Jak przyspieszyć szybkość ładowania dla strony WordPress

19 20
Powiedz innym o tym wpisie 😉

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.

Jak przyspieszyć szybkość ładowania dla strony WordPress
5 (100%) 8 votes
Powiedz innym o tym wpisie 😉

19 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.

Dodaj komentarz

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