WP Rocket. Poradnik dla początkujących

Szukając wtyczki cache do swojego WordPress, na pewno zetkniesz się ze wtyczką WP Rocket.

Z tego wpisu dowiesz się:

• jak wtyczka WP Rocket spisuje się na tym blogu,
• czy i o ile sekund poprawiła szybkość ładowania się wpisów,
• dlaczego sugerowanie się wynikami punktowymi w testach to zły pomysł (na moim przykładzie),
• jak poprawnie skonfigurować WP Rocket,

WP Rocket nie jest zwykłą wtyczką typu WordPress Cache. Oprócz funkcji cache posiada wiele funkcji optymalizujących stronę pod kątem szybkości ładowania.

Oto co ta wtyczka potrafi:

• Cache stron
• Wstępne ładowanie cache
• Wstępne ładowanie mapy witryny
• Kompresja GZIP
• Cache przeglądarki
• Optymalizacja bazy danych
• Optymalizacja czcionek Google
• Opóźnienie ładowania obrazków
• Minifikacja / Łączenie HTML, JS, CSS
• Usunięcie Query Strings z zasobów statycznych
• DNS Prefetching
• Wsparcie CDN
• Wykrywanie urządzeń mobilnych
• Wsparcie dla rozwiązań e-commerce
• Opóźnienie ładowania JS

Jeżeli większość z tych funkcjonalności niewiele Ci mówi, to nic nie szkodzi.

Jedną z największych zalet tej wtyczki jest to, że jest bardzo prosta w obsłudze i konfiguracji.

Funkcja Cache działa dobrze już po samym włączeniu wtyczki, bez żadnej dodatkowej konfiguracji.

Jasne posiada opcje, które można konfigurować i o tym także poniżej napiszę.

Test WP Rocket, czyli jak wtyczka radzi sobie w praktyce

WP Rocket jest wtyczką, która działa na tym blogu. Pozwól, że pokażę Ci w praktyce jak wygląda szybkość ładowania się bloga zenmarketing, przy włączonej i wyłączonej wtyczce WP Rocket. Do testów wykorzystam narzędzie Gtmetrix.

Dlaczego właśnie Gtmetrix?

Gtmetrix pokazuje czas ładowania się strony w sekundach. Kiedy przychodzi do optymalizacji ładowania się witryny, to na końcu to właśnie czas ładowania jest najważniejszy, a nie ładny wynik 100/100 w teście optymalizacji.

Innymi słowy, optymalizacja strony dla samej optymalizacji jest bez sensu. Natomiast optymalizacja dla szybszego czasu ładowania się strony już tak, ponieważ nikt nie lubi wolno ładujących się stron.

W ustawaniach Gtmetrix można wybrać, z jakiej lokalizacji ma być wykonany test, z jakiej przeglądarki oraz dla jakiego połączenia. Ja wybrałem odpowiednio:

• Lokalizacja: Wielka Brytania, ponieważ jest to najbliższa Polski dostępna lokalizacja w Gtmetrix.
• Przeglądarka: Chrome, ponieważ jest to aktualnie najpopularniejsza przeglądarka w Polsce.
• Połączenie: 3G, ponieważ nie każdy dysponuje szybkim łączem.

Blog znajduje się na hostingu Wpstacja. Domyślnie na tym hostingu jest włączona kompresja gzip oraz cache przeglądarki już w domyślnych ustawieniach. Na większości hostingów jednak te opcje nie są domyślnie włączone, dlatego przeprowadzam tutaj trzy testy, aby zobaczyć o ile rzeczywiście WP Rocket przyspieszy ładowanie strony.

• Z wyłączoną wtyczką WP Rocket oraz wyłączoną kompresją gzip oraz browser cache po stronie hostingu.
• Z wyłączoną wtyczką WP Rocket oraz włączoną domyślną konfiguracją hostingu Wpstacja (kompresją gzip oraz browser cache).
• Z włączoną wtyczką WP Rocket oraz z włączoną domyślną konfiguracją hostingu Wpstacja.

1. Test strony głównej zenmarketing.pl z wyłączoną wtyczką WP Rocket oraz wyłączoną kompresją gzip oraz browser cache w ustawieniach Wpstacji.

Strona główna załadowała się w 9.1 sekundy.

2. Teraz przywrócę domyślne ustawienia Wpstacji. Wtyczka WP Rocket ciągle nie jest włączona.

• 

Samo przywrócenie domyślnych ustawień Wpstacji spowodowało zwiększenie wyniku z 62 punktów do 93 na 100, aczkolwiek tak jak wspomniałem wcześniej, ten wynik nie ma tutaj żadnego znaczenia.

Najważniejsze jest, że czas ładowania się strony skrócił się z 9,1 sekundy do 5,7 sekundu.

3. Teraz przeprowadzę test z włączoną wtyczką WP Rocket oraz domyślnymi ustawieniami hostingu Wpstacja.

I tutaj moglibyśmy zakończyć całe testy. Ty natomiast możesz stwierdzić, że 0,6 sekundy to niewiele i gra jest nie warta świeczki.

Zostań jednak ze mną jeszcze na trochę, a obiecuję, że nie pożałujesz.

Zobacz, co się stanie, gdy do testów wezmę jeden z wpisów na zenmarketing.

Powiedzmy sobie szczerze, moja strona główna jest dosyć prosta i nie ma tam za wiele treści.

Co innego wpis o zakładaniu bloga. Ten jest bardziej rozbudowany.

Zróbmy więc test dla niego, ponieważ, powiedzmy sobie szczerze, nie tylko szybkość strony głównej się liczy. Szybkość ładowania się Twoich wpisów jest również ważna, o ile nie ważniejsza. To one przecież generują większość ruchu na Twoim blogu, prawda?

Przypominam, że test jest przeprowadzony przy symulowaniu prędkości dla połączenia 3g, ponieważ nie każdy odwiedzający stronę posiada szybkie łącze.

1. Test z wyłączoną wtyczką WP Rocket, wyłączoną kompresją gzip oraz browser cache w ustawieniach Wpstacji.

Dramat w czystej postaci. Nikt przy zdrowych zmysłach nie będzie czekał prawie półtorej minuty, aż strona się załaduje.

2) Teraz przywrócę domyślne ustawienia Wpstacji. Wtyczka WP Rocket ciągle nie jest włączona.

Czas ładowania się strony skrócił się o 25.1 sekundy, aczkolwiek to w dalszym ciągu jest 48 sekund, zatem sporo.

Wynik punktowy natomiast poprawił się z 47 do 81 na 100, mimo iż strona ładuje się w 48 sekund. To jest najlepszy przykład na to, że opieranie się o wyniki punktowe to zły pomysł.

3) Teraz przeprowadzę test z włączoną wtyczką WP Rocket oraz domyślnymi ustawieniami hostingu Wpstacja.

Czas ładowania się strony skrócił się do 10 sekund.

Jest moc, prawda?

Dla jasności sytuacji. Wpis jak założyć bloga jest jednym z bardziej rozbudowanych na moim blogu i w pozostałych wpisach włączenie wtyczki nie daje już tak spektakularnych rezultatów. Same domyślne ustawienia Wpstacji mocno skracają czas ładowania się stron. Aczkolwiek, no właśnie, im wpis bardziej rozbudowany, im ma więcej komentarzy, tym wtyczka daje bardziej spektakularne rezultaty.

Na koniec wynik testu ciekawostki.

Tak jak wspomniałem przed testem, w ustawieniach Gtmetrix jako typ połączenia wybrałem połączenie 3g. Zrobiłem tak, ponieważ nie każdy odwiedzający Twoją stronę będzie dysponował szybkim połączeniem, natomiast im wolniejsze połączenie tym optymalizacja strony pod szybkość ładowania staje się bardziej kluczowa.

Z ciekawości zrobiłem jednak test z nielimitowanym połączeniem, domyślnymi ustawieniami Wpstacji oraz włączoną wtyczką Wp Rocket.

Jak widzisz strona załadowała się poniżej sekundy. Czyli naprawdę szybko.

Jak skonfigurować WP Rocket

Teraz przejdźmy do konfiguracji wtyczki krok po kroku.

1) Wybierz z menu zakładkę „Pamięć Podręczna”.

2) Zapewne będziesz chcieć zoptymalizować szybkość działania strony również dla urządzeń mobilnych, dlatego zaznacz opcję przechowywania w pamięci podręcznej dla urządzeń mobilnych.

3) Twórcy WP Rocket zalecają przechowywać oddzielnie pliki cache dla urządzeń mobilnych, dlatego też zaznacz tę opcję.

4) Zaznaczenie opcji pamięci podręcznej dla użytkowników będzie miało sens tylko i wyłącznie wtedy, gdy prowadzisz stronę członkowską lub sprzedajesz kursy i część treści jest dostępna tylko po zalogowaniu. W pozostałych przypadkach będziesz chcieć zostawić tę opcję odznaczoną.

5) Cykl trwania pamięci podręcznej jest dość istotną opcją. To tutaj określa się, co jaki czas pamięć cache ma być czyszczona. Dla znakomitej większości przypadków, szczególnie blogów oraz stron firmowych najlepiej będzie tutaj wprowadzić wartość 0.

Wtyczka Wp Rocket stara się samodzielnie wykrywać zmiany na stronie np. kiedy opublikujesz lub uaktualnisz wpis, stronę lub ktoś doda komentarz. Następnie samodzielnie czyści pamięć Cache.

Dodatkowe czyszczenie pamięci cache i generowanie jej od nowa co kilka godzin czy nawet dni jest bez sensu. Dlatego najlepiej wprowadzić tutaj wartość 0, co wyłącza okresowe czyszczenie, natomiast pliki cache dalej będą automatycznie czyszczone, kiedy wprowadzisz zmiany na stronie.

6) Na koniec nie zapomnij zapisać zmian.

Czas na optymalizację plików.

1) Przejdź do zakładki „Optymalizacja plików”.

2) Zaznacz opcję minifikacji HTML.

3) Zaznacz opcję połączenia plików Google Font. Nawet jeśli teraz nie używasz fontów od Google, lub nie wiesz, czy używasz, to może zaczniesz w przyszłości, tak więc od razu już będzie zaznaczone.

4) Możesz zaznaczyć usunięcie ciągu zapytań z zasobów statycznych, aczkolwiek to raczej kosmetyka niż realne przyspieszenie strony.

5) Zaznacz opcje minifikacji CSS.

6) To czy zaznaczyć opcję łączenia CSS zależy w dużej mierze od Twojego hostingu. Jeżeli hosting korzysta już z nowocześniejszego protokołu HTTP/2 (następna HTTP), co nie jest regułą, to zaznaczanie tej opcji nie jest wskazane. Jeżeli korzystasz z hostingu, który korzysta z HTTP/2 to zostaw to pole niezaznaczone. Ponieważ Wpstacja korzysta już z HTTP/2, pozostawiam to pole niezaznaczone.

7) Zaznacz opcje optymalizacji dostarczania CSS.

8) Zaznacz opcję minikacji JavaScript.

9) Podobnie jak z łączeniem CSS, jeżeli korzystasz z hostingu, który wykorzystuje nowszy protokół HTTP/2, to pozostaw to pole nieznaczone. Ja ponownie zostawiam to pole niezaznaczone.

10) Zaznacz opcję ładowania plików JS metodą defer.

11) Zaznacz opcję zalecanego trybu bezpiecznego.

12) Zapisz zmiany.

1) Teraz wybierz zakładkę „Media”.

2) Najważniejsze tutaj jest włączenie funkcji LazyLoad dla obrazków.

Funkcja ta opóźnia ładowanie się grafik, które znajdują się w dalszej części tekstu. Ich załadowanie nie jest konieczne, dopóki użytkownik nie przewinie tekstu do miejsca, w którym znajduje się grafika. Dlatego gorąco zachęcam do zaznaczenia tej opcji, co znacznie przyspieszy ładowanie się wpisów z większą ilością grafik.

3 i 4) Jeżeli wrzucasz na bloga pliki wideo, np. z YouTube, to zaznaczanie opcji dla Iframe i wideo będzie dobrym wyborem.

5) Zaznaczenie tej opcji spowoduje zastąpienie WordPress’owych Emoji (popularnych buziek), tymi z przeglądarki. Jak widzisz, ja mam tę opcję zaznaczoną.

6) Czasami zdarza się, że ktoś „kradnie” treści z Twojej strony i umieszcza na swojej stronie w tzw. Iframe. Zaznaczenie tej opcji uniemożliwi taką praktykę.

Ja korzystając z Wpstacji nie mam zaznaczonej tej opcji.

Dlaczego ?

Otóż Wpstacja domyślnie zabezpiecza treści przed ich „kradzieżą” i osadzaniem ich na innych witrynach (można to zmienić w ustawieniach konta Wpstacji lub po kontakcie ze wsparciem).

7) Zapisz zmiany.

Czas na zakładkę Preload.

1) Wybierz zakładkę Preload.

2) Aktywacja preload spowoduje, że po każdym wyczyszczeniu pamięci cache, od razu zacznie się tworzenie nowych plików cache. Zaznacz tę opcję.

3) Jeżeli posiadasz zainstalowaną wtyczkę SEO Yoast, to zaznacz również opcję ładowania Preloadu na podstawie mapy witryny.

4) WP Rocket wykrył mapę utworzoną przez SEO Yoast. Zaznaczam tę opcję, aby użyć tej mapy witryny.

5) Bardzo często używane przez Ciebie wtyczki oraz motyw graficzny, ładują zasoby z zewnętrznych serwerów (innych niż Twój hosting). Wydłuża to ładowanie Twojej strony. Możesz jednak dać znać przeglądarkom, aby załadowały owe zasoby wcześniej, zanim ktoś odwiedzi Twoją stronę.

W tym celu skopiuj i wklej poniższą listę w białym polu pod „URL do prefetch”:

//www.googletagmanager.com
 //www.googletagservices.com
 //adservice.google.com
 //pagead2.googlesyndication.com
 //maps.googleapis.com
 //maps.gstatic.com
 //fonts.googleapis.com
 //fonts.gstatic.com
 //ajax.googleapis.com
 //apis.google.com
 //google-analytics.com
 //www.google-analytics.com
 //ssl.google-analytics.com
 //youtube.com
 //api.pinterest.com
 //cdnjs.cloudflare.com
 //pixel.wp.com
 //connect.facebook.net
 //platform.twitter.com
 //syndication.twitter.com
 //platform.instagram.com
 //disqus.com
 //sitename.disqus.com
 //s7.addthis.com
 //platform.linkedin.com
 //w.sharethis.com
 //s0.wp.com
 //s.gravatar.com
 //stats.wp.com
 //referrer.disqus.com
 //c.disquscdn.com
 //0.gravatar.com
 //2.gravatar.com
 //1.gravatar.com
 //player.vimeo.com

W ustawieniach zaawansowanych reguł możesz dodać adresy podstron na swojej witrynie, dla których nie chcesz, aby były tworzone pliki cache.

Ta opcja Ci się przyda, jeśli korzystasz z jakiejś mniej popularnej wtyczki sklepu internetowego.

Dlaczego możesz nie chcieć tworzyć plików cache w przypadku ecommerce?

Ponieważ strona, pod którą wyświetla się koszyk zamawiającego nie może zostać cachowana. W przeciwnym wypadku każdy po przejściu do „kasy” dostanie koszyk z pamięci „cache”. Innymi słowy zamiast produktów, które dodał do swojego koszyka, w najlepszym wypadku wyświetli mu się pusty koszyk lub w gorszym przypadku, produkty kogoś innego, które akurat zostały załadowane do pamięci cache.

Spokojnie.

WP Rocket jest kompatybilny z popularnymi wtyczkami e-commerce.

Jeżeli korzystasz z którejkolwiek ze wtyczek z poniższej listy, to nic nie musisz robić, ponieważ WP Rocket zajmie się sprawą za Ciebie:

• WooCommerce

• Easy Digital Download

• iThemes Exchange

• Jigoshop

• WP-Shop

Ok. Idźmy dalej.

1) W zakładce „Baza Danych” znajdują się opcje, które nie tyle optymalizują witrynę, ile panel administracyjny WordPressa. W większości przypadków będziesz chcieć pominąć tę zakładkę, chyba że Twój panel działa naprawdę wolno. Wtedy warto ją odwiedzić.

2) Czyszczenie wpisów — tutaj możesz usunąć starsze wersje wpisów, automatyczne szkice oraz wpisy, które znajdują się w koszu.

Za każdym razem, kiedy klikasz przycisk „Zapisz” podczas dodawania nowego wpisu, zapisywane są poszczególne wersje tego wpisu. W każdej chwili możesz przywrócić starszą wersję takiego wpisu. Z czasem może jednak tych wersji nazbierać się bardzo duża ilość i zaczną spowalniać panel Twojego WordPressa. Tutaj możesz usunąć starsze wersje wpisów z bazy danych.

3) W sekcji „Czyszczenie komentarzy” możesz usunąć spamowe komentarze oraz te, które znajdują się w koszu.

4) Tymczasowe wpisy możesz spokojnie usunąć.

5) Czyszczenie bazy danych — tutaj możesz zoptymalizować bazę danych oraz uruchomić cykliczną optymalizację bazy danych.

Warto jednak przed tym utworzyć cykliczną automatyczną kopię bezpieczeństwa w panelu administracyjnym Twojego hostingu.

W przypadku Wpstacji, jest to już zrobione. W razie problemów po skorzystaniu z tej opcji, można przywrócić kopie bezpieczeństwa swojej strony kilkoma kliknięciami w panelu.

6) Po zaznaczeniu wybranych opcji pozostało Ci kliknąć „Optymalizuj”.

Następna w kolejce jest zakładka CDN.

Co to jest CDN (Content Dleivery Network)?

Jeżeli korzystasz z CDN, to pliki z cache Twojej strony rozsiane są po serwerach na całym świecie. Dzięki temu, jeśli ktoś z Azji odwiedza Twoją stronę, to ładuje mu się plik cache z serwera z Azji, a nie z Polski. Dzięki temu Twoja strona otwiera mu się szybciej.

Opcja ta może być przydatna, jeśli prowadzisz stronę w języku angielskim i masz odwiedzających z całego świata.

Jeżeli prowadzisz stronę w języku polskim, to w większości wypadków zdecydowana większość Twojego ruchu będzie pochodzić z Polski. Jeżeli Twój hosting, z którego korzystasz ma serwery zlokalizowane w Polsce, to spokojnie możesz pominąć opcję CDN.

Przykładowo Wpstacja korzysta z chmury OVH, która jest zlokalizowana w polskim Data Center, co spokojnie wystarcza, jeżeli strona jest w języku polskim lub w języku Państwa zlokalizowanego blisko Polski (np. języku niemieckim).

Jeżeli jednak prowadzisz stronę w języku angielskim, to warto zainteresować się usługą CDN np. Key CDN.

Dane konfiguracyjne do WP Rocket dostaniesz bezpośrednio od usługodawcy CDN, z którego korzystasz.

1) Zakładka Heartbeat optymalizuje pod względem wydajności komunikację Twojego serwera z WordPressem, warto skorzystać z tej opcji.

2) Zaznacz checkbox przy „Kontrola Hearteat”.

3) Kliknij „Zapisz zmiany”.

W zakładce dodatki znajdują się dodatki, które optymalizują współpracę z innymi aplikacjami.

Jeżeli korzystasz, z którejś z wymienionych tam aplikacji, warto włączyć taki dodatek.

Przykładowo, jeżeli korzystasz z Google Analytics, włącz dodatek „Śledzenie Google”.

Dla jasności, dodatek Facebook Pixel nie integruje Twojej strony z Facebookiem. Nie zaznaczaj go, jeśli po prostu tylko masz FanPage na Facebooku.

Dodatek włącz tylko wtedy, gdy masz na swojej stronie zainstalowany skrypt „Facebook Pixel”. Facebook Pixel służy do remarketingu i targetowania reklam na Facebooku. Jeżeli nie przypominasz sobie, aby coś takiego jak Facebook Pixel było instalowane na Twojej stronie lub nie reklamujesz swojej strony na Facebooku, to pozostaw ten dodatek wyłączony.

Następna w kolejce jest zakładka „Optymalizacja Obrazków”.

WP Rocket zaproponuje Ci zainstalowanie wtyczki IMAGIFY do optymalizacji obrazków.

Jeżeli nie masz jeszcze zainstalowanej wtyczki do optymalizacji obrazków, to jak najbardziej możesz zainstalować wtyczkę IMAGIFY.

Jest to wtyczka typu freemium. Co miesiąc możesz zoptymalizować obrazki o łącznej wadze 25mb. Jest to wystarczające, jeżeli nie publikujesz dużo wpisów z grafikami.

Ostatnia zakładka to „Narzędzia”.

Tutaj możesz utworzyć kopie swoich ustawień w WP Rocket, następnie zaimportować je na innej stronie używającej również wtyczki WP Rocket. Możesz też przywrócić wcześniejszą wersję wtyczki, jeżeli najnowsza sprawia Ci jakieś problemy.

Ile kosztuje WP Roket

Wtyczka WP Rocket kosztuje w zależności od licencji (ceny netto w dolarach):
• 49 dolarów dla licencji na jedną stronę,
• 99 dolarów dla licencji na 3 strony,
• 249 dolarów dla licencji na nielimitowaną ilość stron.

Podsumowanie

Wtyczka WP Rocket to jedna z najczęściej polecanych wtyczek przez blogerów, marketerów oraz ekspertów od WordPressa.

Zaufało jej już prawie półtora miliona witryn WordPress.

Jest ku temu znaczący powód.

Jest to najlepsza wtyczka premium cache optymalizująca WordPressa pod kątem szybkości i wydajności. Zdecydowanie warta każdej złotówki.