Optymalizacja czasu ładowania strony – WordPress

Czas ładowania strony - optymalizacjaOd dłuższego czasu mówi się, że czas ładowania strony jest istotnym czynnikiem jeśli chodzi o SEO. Oprócz tego, nie należy lekceważyć też kwestii użytkowników – dłuższy czas oczekiwania przekłada się na ich doświadczenia (user experience). Im krócej tym lepiej, tym efektywniej, niestety gotowe CMS wraz z upływem czasu obrastają w zbędną tkankę „tłuszczową” – kod, zbędne wtyczki, nie używane już dodatki, których nie odinstalowaliśmy w porę. Jak temu zaradzić? Optymalizować.

Jakiś czas temu zacząłem dostawać pierwsze sygnały, iż blog nieco zwolnił i komfort korzystania z niego – delikatnie mówiąc spadł. Tak dzieje się z przeróżnymi serwisami, bo choć internet w domach mamy coraz szybszy, to tym więcej próbuje się do naszych komputerów plików, danych i dodatków przedostać. Jak to wyglądało przed optymalizacją?

Długi czas ładowania strony - co zrobić?

Posłużyłem się narzędziem Pingdom do sprawdzenie szybkości ładowania poszczególnych elementów witryny oraz całości. Cóż, wynik był krótko mówiąc odpychający. W sumie trudno było mi w to uwierzyć, sam codziennie wchodząc na własną stronę nie zauważałem tak długiego czasu ładowania – głównie z powodu zapisywania się części elementów po prostu w pamięci podręcznej przeglądarek. Jeśli jednak zwykły, nieodwiedzający serwisu na co dzień użytkownik wchodził, strona ładowała się niczym żółw.

Jak zoptymalizować czas ładowania strony?

  1. Sprawdź stan obecny – tylko wtedy będziesz mógł ocenić, czy optymalizacja przyniosła skutek.
  2. Przejdź do sekcji Wtyczek i wyłącz wszystkie. – tak, wszystkie. Sprawdź czas ładowania, zobacz różnice. U mnie czas ładowania z 23 s spadł do 7 s. To 3-krotnie mniej!
  3. Włączaj po kolei poszczególne wtyczki – zaczynając od tych najistotniejszych. Z 12 udało mi się zrezygnować z ponad połowy, ograniczając się do: Akismeta, PageNavi (paginacja wpisów), NoCategory Base (żeby zachować aktualne URL kategorii) itd. Reszta w jakiś sposób powielała swoje funkcje, część z nich zdecydowałem się w prosty sposób napisać sam (np. lista ostatnich wpisów) – gdyż wtyczka to kilkanaście linii kodu, za samo to zadanie odpowiada prosty kod, na 2-3 linijki, który nie jest trudno stworzyć samemu. Tak o to ograniczyłem się do 5.
  4. Unikaj wszelkiego rodzaju wtyczek pobierających dane z zewnątrz (np. RSS) lub przetwarzających pliki w locie. Przykład takiej wtyczki, która robiła chyba największe spustoszenie to Facebook Open Graph Meta Tags, tworząca tagi usprawniające udostępnianie na fb. No niestety ona robiła największe opóźnienie.
  5. Przyjrzyj się liście ładowanych plików (CSS, JS) – w polecanym narzędziu wszystkie wywoływane pliki i czas oczekiwania na ich załadowanie, są pokazywane na ładnym grafie. Oceń, czy wszystkie pliki są potrzebne. W moim przypadku okazało się, że ciągle ładowane były przez header pliki odpowiedzialne za zewnętrzne czcionki i elementy CSS, które były w pierwotnym szablonie ale zastąpiłem je graficznym logo. Zatem były zbędne! Dodatkowo, jeśli widzisz jakiś plik który jest ładowany choć nieistnieje, został usunięty – pamiętaj, to również strasznie obciąża czas ładowania. Skrypt próbuje ten plik wywołać mimo wszystko, oczekując na odpowiedź traci cenny czas.
  6. Sprawdź czas ładowania strony ponownie – teraz powinien być zdecydowanie lepszy, dzięki sprawdzeniu stanu przed, po oraz testom w trakcie możesz ocenić także to, które elementy witryny są najbardziej obciążające dla twojej witryny.

Jak się przekonałem na własnym przykładzie, optymalizacja czasu ładowania strony potrafi przynieść nawet 10-krotne przyspieszenie czasu ładowania strony.

Przyspieszanie www - audyt i optymalizacja

Chcesz być na bieżąco?

Zapisz się do newslettera - najświeższe informacje, porady oraz artykuły dzięki którym zwiększysz swoje pozycje w wyszukiwarce!


16 thoughts on “Optymalizacja czasu ładowania strony – WordPress

  1. Cześć,
    Ciekawy wpis i dobrze, że w końcu ktoś zwraca uwagę, na takie rzeczy. Nie mniej jednak nie mogę oprzeć się wrażeniu, że to dopiero początek góry lodowej (może druga część? 🙂 ) Kilka groszy ode mnie:

    – Polecam wtyczkę „Plugin Performance Profiler” (https://wordpress.org/plugins/p3-profiler/) – automatyzuje punkt 2 i 3 😉

    – js i css najlepiej wrzucić do 1 pliku. Co więcej js w większości i tak jest ładowane na document ready, więc swobodnie może być zasysane w stopce.

    – kompresja wyżej wymienionych

    – optymalizacja zdjęć

    Pozdrawiam 🙂

  2. Zrobiłem test i wynik – 3.15 sekundy (w drugim teście, w pierwszym było ponad 5), muszę nad tym popracować. Przyznam się, że podczas optymalizacji strony całkowicie skupiłem się na testowaniu jej za pomocą google speed, a zapomniałem o czasie ładowania się strony, dzięki za przypomnienie i wskazówki 🙂

    1. Zgadzam się w 100%. Obserwuję u siebie – dwa bardzo podobne serwisy, które chodzą na dwóch różnych hostingach. Jeden z nich śmiga aż miło, drugi potrzebuje czasu … no i potrzebuje zmiany na inny hosting.

  3. Kilka uwag:
    – 404 wcale strasznie nie opoznia ladowania strony,
    – Twoja strona wcale nie zaladowala sie w 2.4 s, spojrz na zrzut ekranu z pierwszego i drugiego testu – na drugim tescie tresc strony nie jest widoczna. Ani Twoi uzytkownicy nie prawdopodobnie Google nie bedzie sadzic, ze strona laduje sie w 2.4 s. Nie wiem czy G juz stosuje SpeedIndex do pomiaru szybkosci strony ale w pewnym momencie pewnie zacznie.
    – ku przestrodze.. Dobry wynik z PageSpeed lub YSlow nic nie mowi o szybkosci strony.
    – nie wszystkie CSS mozna od razu polaczyc w jeden plik,
    – nie kazdy skrypt JS mozna wrzucic na koniec ,
    – zazwyczaj laczenie wszystkich plikow JS w jeden nie jest najbardziej optymalnym rozwiazaniem (np. bardzo popularne jQuery lepiej ladowac z CDN jQuery/Google/Cloudflare gdyz uzytkownik prawdopodobnie ma je i tak w cache)

    1. Niezły wynik! Dzięki za podzielenie się. Faktycznie, ilość wtyczek nie jest najistotniejsza – choć czasami po niektórych testach dochodzę do wniosku, że jedna wtyczka potrafi zepsuć cały efekt (ładując się 8-10 sekund).

  4. Przydatne porady, ale nie zauważyłem nic na temat podmiany obrazków. Istnieją programy które zmniejszają wagę obrazka bez utraty na jakości. Mi taka podmiana przyniosła największe efekty w szybkości wczytywania strony.

  5. Dobry artykuł! U mnie czas wydłużał się najbardziej przez CSS’y i czcionki. Dodatek Better WordPress Minify niestety nie poradził sobie i ostatecznie ręcznie połączyłem niektóre elementy.

  6. Dobrym dodatkiem jest plutkim w3 total cache , trzeba tylko poczytać manuala żeby sobie nie narobić roboty , włączając niektóre funkcje trona nie będzie działać.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *