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ć.
Reklama
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 🙂
Owszem, to dopiero początek 🙂 Chce zejść do 2 s. Dzięki za porady 🙂
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)
Co do screena, już ładuje się całość, dziś zrobiłem jeszcze kilka poprawek i ładuje się całość 🙂
Dzięki za uwagi 🙂
U mnie 2.55 bez cachowania / ~ 1.83 z Quick Cache na hostingu Zenbox przy ok 40 wtyczkach.
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).
Super 🙂 właśnie na swoich www będę to wprowadzał bo dało efekty na testowanej
Ciesze się, że prezentowane wskazówki okazały się pomocne 🙂
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ć.