Od 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ą?
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?
- Sprawdź stan obecny – tylko wtedy będziesz mógł ocenić, czy optymalizacja przyniosła skutek.
- 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!
- 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.
- 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.
- 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.
- 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.
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 🙂
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 🙂
Zainstalujcie jakikolwiek dodatek cache’ujący – efekt będzie jeszcze lepszy a mam DUŻO wtyczek :)))
Zmiana hostingu, i to nie koniecznie na jakiś drogi, też może dużo pomóc (czasem testuje różne i sporo można zbić).
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.
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)
U mnie 2.55 bez cachowania / ~ 1.83 z Quick Cache na hostingu Zenbox przy ok 40 wtyczkach.
Super 🙂 właśnie na swoich www będę to wprowadzał bo dało efekty na testowanej
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.
Porady na pewno się przydadzą. Dzięki 🙂
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.
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ć.
Cześć, świetna strona!