Jak przyspieszyć szybkość ładowania dla strony WordPress

87 92

Prędkość wczytywania strony jest jednym z ważniejszych czynników, zarówno jeżeli chodzi o zadowolenie użytkowników, prowadzenie ich w stronę konwersji jak i poniekąd, inne aspekty SEO.

O tym jak przyspieszyć ładowanie strony pisałem już wcześniej w artykule pt. Jak zwiększyć prędkość witryny, jednak ze względu na fakt iż jak to mówią „Szewc bez butów chodzi” i okazuje się, że wynik dla mojego bloga z biegiem czasu stał się średni (żeby nie powiedzieć słaby), przygotowałem mały case study, który pokazuje krok po kroku, jak wiele można ugrać przy całkiem drobnym wysiłku.

Analiza prędkości strony

Naszym benchmarkiem będą dwa narzędzia, PageSpeed Insights i Pingdom Website Speed Test. Zobaczmy jak wygląda obecna sytuacja dla strony głównej.

W obu przypadkach, zarówno dla wersji mobilnej jak i desktop, wynik przeprowadzonego przez narzędzie Google testu, wygląda miernie.

  • Mobile 46/100
  • Desktop 52/100

 

Pingdom natomiast wykazuje czas ładowania strony na poziomie 3,68 sekundy i pomijając pozostałe parametry, przyznał punktację na poziomie 70/100 możliwych.

 

Optymalizacja szybkości ładowania strony WordPress

Czas wziąć się do pracy. Do całego procesu przyspieszania WordPressa wykorzystałem:

  1. Notepad++ – do edycji pliku .htaccess w celu wykorzystania pamięci podręcznej przeglądarki
  2. FileZilla – do pobrania plików graficznych w celu kompresji i dodania ich ponownie na serwer
  3. Pingo – do kompresji zdjęć
  4. Async JS and CSS – Wtyczka do optymalizacji plików CSS i skryptów JavaScript
  5. Plugin load filter – Wtyczka do zarządzania wtyczkami
  6. Dobrą kawę i trochę chęci 😉

 

Wykorzystanie pamięci podręcznej przeglądarki

W pierwszej kolejności za pomocą Notepad++ wyedytowałem plik .htaccess dodając przygotowany wcześniej (do pobrania tutaj) kod odpowiedzialny za nadanie plikom graficznym, css, skryptom itp., daty ważności.

 

Optymalizacja obrazów

Kolejnym krokiem było pobranie (za pomocą FileZilla) na dysk zawartości folderu /wp-content/uploads. Oczywiście cały ten folder warto skopiować po raz drugi aby w razie niezadowalającej jakości kompresji, można było odzyskać oryginalne zdjęcia.

W przypadku wszystkich plików wykorzystałem bezstratną kompresję (skrypt do optymalizacji zdjęć – Pingo) lecz PageSpeed Insights wciąż czepiał się ikon wpisów, więc osobno skompresowałem je przy użyciu kompresji na poziomie 85%.

 

Po kompresji, wszystkie pliki wgrałem ponownie na serwer do folderu o nazwie uploads2 i zwyczajnie zamieniłem jego nazwę z oryginałem w celu uzyskania płynnego przejścia i zachowania kolejnej kopii zapasowej (tych nigdy dosyć).

 

Optymalizacja CSS i JavaScript

We wtyczce Async JS and CSS ustawiłem asynchroniczne ładowanie skryptów js i css, umieszczanie ich w górnej części kodu strony oraz usuwanie odniesień do konkretnych linii kodu. Tutaj mała uwaga, część wtyczek opartych o JavaScript może mieć z tym problemy lecz wtyczka pozwala nam na wykluczanie ich z osobna, co pozwala na przynajmniej częściową optymalizację (lepiej poprawić coś niż nic).

 

Lepsze zarządzanie wtyczkami WordPress

Ostatni krok lecz równie istotny to ustawienie (za pomocą Plugin load filter), które wtyczki powinny być ładowane w przypadku różnych rodzajów stron.

Dla przykładu wyłączyłem wczytywanie na stronach statycznych, wtyczki kk Star Ratings, która nie ma na nich zastosowania bowiem pojawia się tylko w postach (w przypadku tego bloga). Podobnie Easy Fancy Box (powiększanie grafik) itd.

 

Po tym zabiegu należy pamiętać o przejściu w zakładkę odpowiedzialną za definiowanie konkretnych rodzajów podstron, dla których dana wtyczka powinna być ładowana.

 

Końcowy czas ładowania strony

Nadszedł czas na ostateczny test prędkości w celu walidacji wdrożonych przez nas zmian. Jak możemy przeczytać poniżej, wynik znacząco się poprawił i wynosi obecnie:

Według PageSpeed Insights:

  • Mobile 92/100
  • Desktop 95/100

 

Natomiast według Pingdom, czas ładowania strony spadł do 1,78 sekundy, a wynik wydajności wynosi teraz 81.

 

Podsumowanie

Oczywiście, że nie uzyskaliśmy wyniku 100/100 ponieważ narzędzia to tylko narzędzia, a dla nas najważniejsi są użytkownicy. Punktację można było jeszcze podnieść dzięki zwiększeniu poziomu kompresji zdjęć, co zaowocowałoby pikselizacją, poprzez wyłączenie skryptów, które usprawniają działanie strony i odłączenie Google Analytics, czego robić naturalnie nie chcemy.

Dodatkowo okazuje się, że moja serwerownia zaczęła mieć problemy z prędkością odpowiedzi za co również zostały odjęte punkty, w tym miejscu mogę zmienić dostawcę lub wykorzystać CDN (Content Delivery Network), czyli tak zwanego pośrednika, który będzie przechowywał kopię strony i dostarczał ją użytkownikom z bliższych lokalizacji.

W każdym razie ogólna prędkość mojej strony opartej o CMS WordPress, została znacząco poprawiona niemal w kilka minut, gdyby nie liczyć czasu pobierania i upload’owania plików graficznych. A gdyby nie hosting, który najwyraźniej ma jakieś opóźnienia, wynik byłby jeszcze lepszy.

4.5/5 - (15 votes)

87 komentarzy dla “Jak przyspieszyć szybkość ładowania dla strony WordPress

  1. Dodałbym jeszcze PHP w wersji 7 i jakiś szybki serwer pod WP. Robiłem kiedyś podobne zabiegi, ale dopiero po migracji na dużo szybszy serwer, strona oparta na Visual Composerze zaczęła szybciej się ładować.

    1. Jeżeli mówisz o wykluczeniu wtyczek z konkretnych wpisów to w standardzie raczej nie. Na upartego można wykorzystać filtr adresu url, dla którego wtyczka ma zostać zastosowana więc pewnie jakoś da się to wykombinować.
      Odnośnie Pingo, a przeciągałeś obrazek na plik? 😉 On w domyśle kompresuje bezstratnie więc pewnie nie zauważyłeś jak plik stracił na rozmiarze 😉 Sprawdź ponownie z jakimś innym.

  2. Osobom, które zastanawiają się czy w ogóle warto zaprzątać sobie głowę tematem tempa ładowania witryny i elementów/modułów na niej zaimplementowanych należy podkreślić, iż w obecnej chwili czas ładowania strony odgrywa kluczową rolę podczas ustalania rankingu Google dla określonych zapytań. Nawet jeśli będziemy oferować najwyższej jakości usługi, mieć mnóstwo pozytywnych opinii czy posiadać świetny profil linkowy, to z uwagi na fakt długiego wczytywania zawartości zwyczajnie możemy być klasyfikowani w rankingu niżej. Należy zapamiętać, że tak jak ważne są: content, optymalizacja witryny i linki tak samo istotnym jest prędkość ładowania się strony.

    Bardzo dobrze, że Łukasz o tym napisał i tym samym ludzie będą bardziej świadomi. Pozdrowienia!

  3. Rzeczywiście, coraz to lepsze sprzęty i większe rozdzielczości zdjęć paradoksalnie nie są wcale takim błogosławieństwem, bo powszechną praktyką jest obecnie wrzucanie grafiki, która waży nawet kilka mb… A faktycznie dzisiaj jednym z podstawowych kryteriów pozycjonowania Google jest szybkość wczytywania strony, a nie to, czy zdjęcie jest w jakości hiper-ultra-full-hd.

  4. Czekałem na taki wpis, ponieważ mi udało się ostatnio przyśpieszy swoje 3 strony firmowe do wyniku powyżej 90/100 🙂 Ale chętnie zwiększę ten wynik. Niedługo o swoich wynikach napiszę również na blogu 🙂 Pozdrawiam!

    1. Prędkość strony jest czynnikiem bezpośrednim tylko w przypadku bardzo wolnych stron, natomiast w przypadku dobrego wyniku wpływa pozytywnie na inne sygnały, które wysyłają użytkownicy. Także jeżeli strona nie ładuje się dłużej niż 6-8 sekund to nie ma problemów. Myślę, że Google bierze ten wynik w jakimś stopniu pod uwagę więc lepiej mieć te 70-90 niż mniej tak na wszelki wypadek 😉 W każdym razie i tak najważniejszy jest rzeczywisty czas ładowania. 6 sekund to dla mnie już dużo jak na przeładowanie podstrony, dla innych zapewne również więc polecam trzymać się max 3ch sekund coby nie irytować użytkowników.

  5. Fajne zestawienie w pigułce. Dzięki! Dodam tylko, że „odłączenie Google Analytics” nie jest oczywiście konieczne 🙂 Na wizytówce dawid.med.pl udało się wykręcić 100 na 100 😎 ale wiadomo, to html’owy one page więc nie ma co porównywać do wordpressa – jednakże tam możesz zobaczyć to rozwiązanie z Analyticsem…

  6. Swietny artykuł 😊 . Informacja o wtyczce Async JS bezcenna 😊 . Jesli chodzi natomiast o wykorzystanie podrecznej pamieci przegladarki, to z tego co sie orientuję uzytkownicy serwerow home.pl musza korzystać z bardziej zmodyfikowanego kodu niż ten podany przez Ciebie.
    Jesli go znasz to bardzo bym prosił o jego podanie. 😊
    Pozdrawiam

      1. 1.Pomyliłem się bo faktycznie wtyczka nie była aktualizowana od 4 lat 🙂

        2. Nie wiem od czego zależy też ta szybkość ale w momencie pisania komentarza była na poziomie 50/70 – teraz rzeczywiście jest lepiej

        3. PHP7 – to też mnie zastanawia, bo np. w tej chwili działam na 5.6 a zmiana na 7 czy 7.1 nie zwiększa w żaden sposób prędkości w page speed. Wszyscy piszą że podkręca wynik, więc nie rozumiem.

  7. O! bardzo ciekawą informacją jest optymalizacja CSS i JS. Szczerze mówiąc nigdy tego nie robiłem, ale faktycznie ma to dużo sensu. Muszę jeszcze sprawdzić to Pingo, jeszcze nigdy nie używałem.

  8. Bardzo przydatne case study 😉
    Duży plus dla Pana Łukasza za opisanie wszystkiego w sposób zrozumiały dla laików.
    Optymalizacje obrazków można wykonać bardzo łatwo przy użyciu wtyczki ShortPixel (100 darmowych kredytów na miesiąc. Przy mniejszych witrynach powinno starczyć) czy też WP Smush.it (nieco gorsze wyniki, ale nadrabia prostotą użycia).

  9. Odkąd szybkość strony staje się czynnikiem rankingowym warto zwracać coraz większą uwagę na ten aspekt. Obserwując wiele stron w sieci można zaobserwować, że na wielu z nich jest jeszcze naprawdę sporo do poprawienia.

  10. U mnie króluje Autooptimize na WordPressie. Myślę, że jest to wygodne dla mało wymagających użytkowników. Optymalizacja obrazów od Tiny PNG, spisuje się rewelacyjnie nawet w wersji bezpłatnej.

  11. Bardzo fajny i ciekawie napisany art – coś czego ja jeszcze nie potrafię robić 😉

    Jednak prawda jest taka, że lepiej podjąć wysiłek i skrócić czas odpowiedzi serwera z 2 sekund do np. 0,5 niż usuwać spacje ze skryptów JS, które praktycznie nie przyspieszają PageLoadu a tylko spełniają prosty warunek narzędzi, które szukają takich „drobnostek”.

    Problem w tym, że jest to trudniejsze zadanie i nie sposób tutaj napisać praktycznego poradnika (chyba, że na zasadzie „wyłącz wszystkie wtyczki WP” 😉 )- wiąże się z optymalizacją samego szablonu, serwera i czasem wdrożenia CDN.

  12. Prędkość wczytywania się strony staje się coraz bardziej istotna dla Google. Jednak właściciele strona na WordPress akurat są wstanie poprzez optymalizacji zdjęć (co większości przypadków BARDZO poprawia wynik) + wykorzystanie wtyczek do optymalizacji osiągną wyniki bardzo dobre, czyli ponad 80-90 punktów.

  13. htaccess oraz wgranie plików wygenowanych przez Google Insight to start. Dobrze też zrobić defer dla css i js, ale nie działa to łatwa z każdym szablonem WordPress.

  14. Przydatne porady dotyczące przyspieszenia strony, jednak warto pamiętać o tym, że szybkość strony jest brana pod uwagę przez Google tylko gdy jest ona krytycznie niska i może się to przełożyć na złe doświadczenia użytkowników przy korzystaniu ze strony. W związku z tym poprawienie szybkości strony z 92 na 96 z reguły nie ma większego sensu, ponieważ nie poprawi rankingu strony czy doświadczeń użytkownika z korzystania ze strony.

  15. Bardzo dobry artykuł. Jednak mimo wielu narzędzi do optymalizowania strony i jej szybkości ładowania wiele osób nie przywiązuje wagi do tego zjawiska. Często liczą się dla nich tylko walory wizerunkowe a nie techniczne. A jednak jak pokazują statystyki szybkość ładowania strony ma spory wpływ na nasze pozycje w wyszukiwarce.

  16. Przyśpieszenie ładowania strony ma bardzo dobry wpływ na wyniki w wyszukiwarce Google 😉 Wolno ładujące się strony po prostu wypadają z Google, a co za tym idzie konwersja leci na
    „łeb i na szyję” 😉 Trzeba więc optymalizować witrynę i szybkość ładowania – musi być na dobrym poziomie 😉

  17. Dziękuję za artykuł. Miałem właśnie problem z ładowaniem mojej strony internetowej postawionej na WordPressie, po tym poradniku wszystko jest okej.

  18. Sama optymalizacja obrazów w większości przypadków zapewnia bardzo dobrą prędkość ładowania. Trzeba tylko pamiętać o jakości obrazów i uważać, aby nie straciły na estetyce przy pomniejszaniu.

  19. Osobiście nienawidzę jak strona jest poniżej 90… ale to co wymieniłeś to podstawowe rzeczy jakie trzeba wykonać. Jednak jak hosting daje siwe znaki wtedy nerwy razy dwa 🙂 Dla mnie spokój jest jak oba wyniki wyjdą od 95 do 100 🙂

  20. Dość ciekawe wyniki. Ja wykorzystuję wersję płatną WP Fast Cache i prawie za każdym razem mam wynik w okolicach 100. Osobiście nie zaobserwowałem, żeby to miało jakiś większy wpływ na pozycje w Google, ale liczny cieszą 🙂

  21. Trzeba też zdać sobie sprawę, że nie każda strona ma realne szanse na wyniki bliskie 100 w google PSI. Najlepiej porównać jak wygląda optymalizacja konkurencji. Duże sklepy będą miały obiektywnie kiepskie wyniki, ale nie można porównać wielkiego sklepu z AGD do Landing Page z czystym html oraz css. Zawsze trzeba analizowac konkurencje.

      1. dzieżko 🙂 a moim zdaniem własnie coraz łatwiej. No chyba ze korzysta się z magicznych wordsresów itp gdzie kombajn ciągnie masę wtyczek za sobą…

    1. Z jednej strony tak, jednak z drugiej obrazki optymalizujesz hurtowo. Cache ogarniasz hurtowo, a jeśli chodzi o mechanizmy, szablony itp. to nawet w wielkim sklepie internetowym masz tylko kilka rodzajów podstron do poprawienia.
      Strona główna, karta produktu, kategoria.. także tutaj również działasz hurtowo 🙂 Prędkość jest ważna, często myślimy o niej „robię to dla wyniku Google”, a powinniśmy chyba bardziej skupiać się na użytkowniku. Dzięki lepszej prędkości, moi użytkownicy chętniej przeglądną inną zawartość, chętniej zrobią zakupy itd.

      1. dzięki za info. musiałbym zatrudnić programistę. dodatkowo każda zmiana na stronie to konieczność optymalizacji kodu. Kupiłem aplikację, która automatycznie przyśpiesza działanie. Wynik prawie 100%. niestety czasem strona się błędnie się wyświetla

  22. Bardzo przydatne case study 😉
    Duży plus dla Pana Łukasza za opisanie wszystkiego w sposób zrozumiały dla laików.
    Optymalizacje obrazków można wykonać bardzo łatwo przy użyciu wtyczki ShortPixel

  23. Świetny wpis. Sam prowadzę stronę na WordPress i zastanawiałem się długo jak przyspieszyć ładowanie.
    Dziękuję za porady 🙂

  24. Swietny artykul i przede wszystkim wymieniles kilkanarzedzi, o których nie miałem pojęcia. Teraz widze, ze jest sporo rzeczy do poprawienia na moich stronach.

    Pozdrawiam
    krzysztof

  25. Mój dostawca hostingu wydał mi wtyczkę lightspeed. Powiem szczerze że średnio jestem przekonana do jej działania. Chciałabym Poznać Twoje zdanie na ten temat bo coraz bardziej przekonuje się czy nie wywalić jej I zainstalować Twoje polecane.

    1. Jeśli Twoja strona wczytuje się w tym momencie bardzo wolno to zdecydowanie tak. Natomiast jest to tylko jeden z wielu czynników, także niekoniecznie doświadczysz wielkiego skoku na wszystkie frazy. Nie mniej jednak poprawiając prędkość dla całej witryny, ułatwisz sobie budowanie lepszych pozycji dla wszystkich słów.

  26. Witam

    Dziękuje za porady. Szybkość strony się poprawiła.

    Chciałem się tylko zapytać co się stanie gdy skończy się data ważności obrazków i innych plików.

    Pozdrawiam serdecznie

  27. Super artykuł. Szybkość ładowania strony jest niezwykle ważna pod względem atrakcyjności dla potencjalnego użytkownika. Nikt nie lubi, gdy strona się wiesza lub wolno ładuje. Przekłada się to również na pozycjonowanie w Google. Jeśli prowadzimy sklep internetowy lub witrynę, która ma sprzedawać produkty lub usługi, koniecznie trzeba optymalizować ją pod względem szybkości ładowania.

  28. Wiele builderów strasznie syfi kod strony i potem optymalizacja jest trudna i mozolna. DBajmy o fundameny – serwer, czysty kod, minimalizm a nie rozrzutność we wtyczkach, a wyniki bliskie 100 pkt są bez problemu do osiągniecia. Przykładem jest moja strona i tamtejsze przykłady.

  29. Prosta ale dobrze zrobiona optymalizacja potrafi przynieść rewelacyjne efekty. Jak dla mnie – największym sukcesem webmastera jest osiągnąć 100/100 w prędkości oraz zoptymalizować kod do oporu. To juz daje kopa!

  30. Co dziwne do dzisiaj wodpress jest tak rozwiązany, że ładuje kody na każdej stronie nawet jak dana strona ich nie używa. Ma się forum na forum a ładuje pliki i style forum itp na każdej stronie serwisu gdzie go nawet nie ma.

  31. Muszę sprawdzić u siebie z wtyczkami, bo nie wiedziałem o tym, że to też może być aż taki duży problem 🙂 Wiedziałem, że mogą spowolnić stronę, ale nie aż tak.

  32. Cenne informacje. W GSC ciągle pojawiają się jakieś zarzuty o powolność tego, czy innego zasobu, więc warto tego pilnować. Szczególnie wersja Mobile to obecnie oczko w głowie wielkiego brata.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *