Wp Rocket – ekspresowa optymalizacja szybkości Twojego WordPress’a
Czy wiesz, że każda sekunda ładowania się Twojej strony powyżej wartości 2 sekund to ryzyko ogromnych strat?
Szybkość ładowania stron, w czasach tak mocno rozwiniętego rynku mobilnego, ma kluczowe znaczenie. Nie da się ukryć, że użytkownicy (nie tylko urządzeń mobilnych) są coraz bardziej niecierpliwi, a i Google od 2010 roku bierze to pod uwagę, jako czynnik rankingowy. Wolno ładująca się strona (leniwe ładowanie, ang. lazy load) to mniejszy ruch, więcej odrzuceń, ograniczenie konwersji, przychodów z Twojej strony.
Niestety bardzo często optymalizacja czasu wczytywania stron internetowych bywa czasochłonnym i niełatwym zajęciem dla Twojego programisty. Może to wymagać sporej ilości jego pracy, a także… Twojego grubego portfela, jeśli chcesz, żeby wprowadzone zmiany (wyczyszczenie pamięci podręcznej i wiele innych) zrobiły dobrą robotę dla strony.
W ostatnim czasie również musiałem uporać się z kwestią czasu wczytywania strony. Trafiłem jednak na wtyczkę do WordPress Wp Rocket, która rozwiązała ten problem w 100%, dosłownie w kilka minut. To dla mnie prawdziwa rewolucja, dlatego dzisiaj przedstawię Ci to niezwykłe narzędzie, które może okazać się bardzo pomocne również dla Ciebie.
Spis treści
Dlaczego warto przyspieszyć Twojego WordPressa?
Wspomniałem już, że dla Google prędkość wczytywania strony to czynnik rankingowy. Warto jeszcze dodać, że ponad rok temu Google wprowadził bardzo duże zmiany w kontekście czasu wczytywania się strony, rozbudowując swoje narzędzie Page Speed Insight o wskaźniki Core Web Vitals.
Po tej zmianie sporo stron, które nie przygotowały się na nią, straciło bardzo mocno na widoczności fraz w Google oraz na ruchu. Dlatego optymalizacja czasu wczytywania strony jest tak ważnym elementem. W przypadku Core Web Vitals temat jest traktowany w znacznie szerszym kontekście, skupmy się jednak na takim podstawowym rozumieniu.
Chyba nie muszę Cię przekonywać, że czas ładowania strony ma wpływ na jej konwersje. Jeśli strona nie ładuje się szybko, użytkownik ją opuści, a Ty stracisz potencjalnego klienta.
Spójrz na poniższą grafikę i zauważ jak co raz dłuższy czas wczytywania strony, ma ogromny wpływ na rosnący współczynnik odrzuceń (wyjścia ze strony). Co prawda poniższe dane są z 2017 roku, ale dają wiele do myślenia.
Według badania Search Logistics 40% osób, oczekuje, że Twoja strona wczyta się nie wolniej niż w przeciągu dwóch sekund, a 79% odwiedzających nie wróci na stronę, która wczytuje się zbyt długo.
Jakie efekty daje wtyczka WP Rocket?
Zanim przejdę do omawiania narzędzia, pokażę Ci, jakie daje efekty, abyś nabrał jeszcze większej ochoty do dalszego czytania i wykorzystania wtyczki WP Rocket na swojej stronie 🙂
Każda z testowanych stron miała zrobione wszystkie optymalizacje, bo to również może mieć wpływ na szybkość działania strony. Wszystkie testy przeprowadziłem w 3 narzędziach: GTmetrix, Pindom, Page Speed Insight.
Wyniki działania WP Rocket – strona 1
Dość prosta strona z 60 podstronami na builderze BeTheme, z włączonymi 15 wtyczkami, m.in. LSCache.
Narzędzie | Badany parametr | Bez WPRocket | Z WPRocket |
Pingdom | Ocena wydajności | D 66 | B 81 |
Rozmiar strony | 2,6 MB | 1,3 MB | |
Czas wczytywania | 2,17 s | 964 ms | |
Żądania HTTP | 121 | 45 | |
GT metrix | Ocena wydajności | D | A |
Wydajność | 73% | 100% | |
Struktura | 69% | 97% | |
Page Speed Insight | Wydajność | 37 | 92 |
Ułatwienia dostępu | 70 | 75 | |
Sprawdzone metody | 100 | 100 | |
SEO | 92 | 92 | |
First Contentful Paint | 4,1 s | 1,7 s | |
Total Blocking Time | 1530 ms | 70 ms | |
Speed Index | 6,2 s | 2,4 s | |
LCP | 7,1 s | 3,2 s | |
Cumulative Layout Shift | 0 | 0 |
Mimo że strona nie była jakoś specjalnie zamulona, to wtyczka WP Rocket pozwoliła uzyskać rewelacyjne efekty, a przy tym sama strona nie ucierpiała w żaden sposób. Czas ładowania strony został skrócony z ponad dwóch sekund do poniżej jednej.
Wyniki działania WP Rocket na tym blogu
WP Rocket zainstalowałem też i skonfigurowałem na tym blogu z ponad 400 zaindeksowanymi podstronami i włączonymi 40 wtyczkami w tym LiteSpeed Cache, Better WordPress Minify, Clear Cache For Me.
Narzędzie | Badany parametr | Bez WPRocket | Z WPRocket |
Pingdom | Ocena wydajności | D 69 | B 87 |
Rozmiar strony | 2,2 MB | 1.0 MB | |
Czas wczytywania | 951 ms | 628 ms | |
Żądania HTTP | 143 | 38 | |
GT metrix | Ocena wydajności | C | A |
Wydajność | 77% | 100% | |
Struktura | 85% | 95% | |
Page Speed Insight | Wydajność | 48 | 96 |
Ułatwienia dostępu | 76 | 70 | |
Sprawdzone metody | 75 | 92 | |
SEO | 82 | 82 | |
First Contentful Paint | 4,3 s | 1,2 s | |
Total Blocking Time | 560 ms | 10 ms | |
Speed Index | 5,6 s | 1,2 s | |
LCP | 6,0 s | 2,8 s | |
Cumulative Layout Shift | 0,109 | 0 |
Jak mogłeś zobaczyć, wtyczka dała naprawdę rewelacyjne rezultaty, a jej konfiguracja zajęła mi nie dłużej niż kilka minut. Jak tylko znajdę stronę, która jest dużo wolniejsza od moich, to uzupełnię ten artykuł o wyniki dla niej.
O wtyczce WP Rocket
WP Rocket powstał w 2013 roku, także już 10 lat temu. Jest to najpopularniejsza wtyczka do optymalizacji prędkości ładowania stron internetowych na silniku WordPress, która rozwiąże wyżej opisywany problem. W sumie nie dziwi mnie jej popularność, biorąc pod uwagę, jak banalna jest w obsłudze i jakie rewelacyjne daje efekty.
Jak to do tej pory wyglądało? Niestety nie jestem programistą. Myślę, że poza optymalizacją obrazów, niewiele bym w tej kwestii był w stanie sam zrobić. Do tej pory to zlecałem, co za każdym razem wiązało się ze sporymi kosztami, wymagało czasu, a mimo to nie rzadko pozostawiało wiele do życzenia.
Jak to wygląda teraz? Wgrywam WP Rocket, wyklikuję kilka opcji, albo nawet importuję gotowe ustawienia i to wszystko. Wystarczy dosłownie kilka minut, a strona ekstremalnie przyspiesza! Nieważne, czy masz sklep, stronę firmową, czy bloga. To naprawdę zadziała!
Brzmi niewiarygodnie, ale tak rzeczywiście jest!
Możesz śmiało sprawdzić w WP Rocket wyniki dla Twojej strony przed i po optymalizacji, np. w GTmetrix, Pingdoom, Page Speed Insight. Zobaczysz, jak wielkie różnice się pojawią.
WP Rocket działa tak wyśmienicie, bo jest bardzo rozbudowany i potrafi zastąpić wiele innych dużo bardziej skomplikowanych wtyczek.
Co bardzo ważne za wtyczkę płacisz raz w roku i masz zapewnioną optymalizację Twojej strony przez cały ten czas, nawet nie musisz o tym myśleć. Gdyby taką optymalizację przeprowadził dla Ciebie człowiek, to musiałbyś co jakiś czas sprawdzać, czy strona na pewno dalej jest dobrze zoptymalizowana, a gdyby okazało się, że nie, to ponownie musiałbyś mu to zlecić, co wiązałoby się z dodatkowymi kosztami.
Obecnie bardzo popularne stało się korzystanie z wszelkiej maści builderów na WordPressie, do tego mnóstwo wtyczek, a to powoduje wczytywanie się mnóstwa dodatkowych plików jss, czy css, co znacznie spowalnia strony.
Zanim zaczniesz korzystać z WP Rocket
Warto zaznaczyć, że WP Rocket jest bardzo rozbudowany. Posiada tak zaawansowane opcje optymalizacji, że pewne elementy na stronie niej mogą przestać działać, dlatego zacząłbym od tego, żeby zrobić backup strony z bazą danych, choć do tej pory, gdy taki problem się pojawiał, to po prostu wyłączenie danej funkcji WP Rocket przywracało poprawne działanie strony.
Abyś uniknął problemów, polecam Ci:
- na początek włączyć tylko to, czego jesteś pewien, że potrzebujesz,
- uruchamiając kolejne opcje, sprawdzaj, czy na stronie wszystko działa poprawnie,
- pamiętaj o opcji czyszczenia cache w WP Rocket, zanim sprawdzisz wdrożone zmiany,
- sprawdzaj działanie strony również na urządzeniu mobilnym,
- wyłącz inne wtyczki, których funkcje obsługuje WP Rocket, aby się nie dublowały.
Jak skonfigurować wtyczkę Wp Rocket?
Co zrobić po zainstalowaniu WP Rocket? W tej sekcji przejdziemy krok po kroku przez ustawienia wtyczki WP Rocket wraz z krótkim omówieniem ich zastosowania. Jeśli ta część Cię nie interesuje, to
Z lewego menu wybierz Pamięć podręczna. 1. Pamięć podręczna dla urządzeń przenośnych – naturalnie chcę, aby moja strona była zoptymalizowana pod urządzenia mobilne, dlatego zaznaczam tę funkcję dla pamięci podręcznej. 2. Pamięć podręczna użytkownika – ta funkcja jest przydatna dla stron, do których użytkownicy się logują np. platformy kursowe, sklepy. Jeśli taką stronę prowadzisz, to zaznacz tę opcję, jeśli nie, to nie ma potrzeby jej zaznaczać, by wyczyścić zawartość pamięci. 3. Cykl trwania pamięci podręcznej Ta funkcja decyduje o tym, co jaki czas, automatycznie ma być czyszczona pamięć podręczna strony. Jeśli strona jest aktualizowana często, bo jest to np. serwis newsowy, to można zmniejszyć ten czas. Mi wystarczy wartość domyślna, a nawet mógłbym ją wydłużyć, bo strona nie jest, aż tak często aktualizowana. Po ustawieniu tych ustawień pamięci podręcznej nie zapomnij kliknąć: Zapisz zmiany. Z lewego menu wybierz: Optymalizacja plików. Pliki CSS 1. Minifikuj pliki CSS – funkcja (podobna do minifikacji HTML) usuwa zbędne spacje i komentarze, aby zmniejszyć rozmiar pliku. 2. Połącz pliki CSS – zaznaczenie tej opcji spowoduje, że strona połączy wszystkie używane pliki CSS, przez co ograniczy liczbę zapytań. Jeśli Twój serwer używa HTTP/2, to nie zaznaczaj tej opcji. 3. Optymalizacja dostarczania CSS – tutaj musisz wybrać, czy WP Rocket ma usunąć nieużywany CSS, czy wczytać go asynchronicznie. Pliki JSS W tej samej zakładce Optymalizacja plików poniżej sekcji Pliki CSS znajduje się sekcja Pliki JS. Tutaj daję te same ustawienia co w CSS. Z lewego menu wybierz: Media. 1. 2. LazyLoad (leniwe ładowanie) Funkcja LazyLoad ((dosłownie: leniwe ładowanie) powoduje, że obrazy, filmy lub iframe na stronie nie są wczytywane, dopóki użytkownik nie przewinie do nich strony. Przez to co prawda nie są od razu widoczne, ale zmniejsza to liczbę żądań HTTP i znacznie przyspiesza jej ładowanie. Zdecydowanie zalecam skorzystanie z tej opcji. Dodatkowo WP Rocket (za pośrednictwem Lazy Load) pozwala wygenerować miniaturkę z podglądem osadzonego filmu, dzięki czemu jest on ładowany dopiero, gdy użytkownik w niego kliknie. 3. Wymiary obrazu Z opcji Dodaj brakujące wymiary obrazu jeszcze nie korzystałem, a pozwala ona zapobiegać przesunięciom układu strony. Z lewego menu wybierz: Wstępne ładowanie. 1. Wstępne ładowanie pamięci podręcznej – dzięki tej funkcji WP Rocket będzie dbał o to, aby w pamięci podręcznej znajdowały się wszystkie zaktualizowane adresy url Twojej witryny. 2. Linki do wstępnego ładowania – dzięki zaznaczeniu tej opcji, użytkownikowi po najechaniu na jakiś link do innej strony, zostanie ona pobrana, co po kliknięciu w ten link pozwoli na jej szybsze załadowanie. 3. Prefetch żądania DNS – tutaj warto wpisać adresy żądań zewnętrznych, z których korzysta Twoja strona, aby mogła ona wczytywać daną zawartość przed tym, jak trafi na nią użytkownik. Co mam na myśli? Np. żądania dla Google Fonts, Facebook, Google Analytics… Na GitHubie tutaj >> znajdziesz listę adresów, które warto uwzględnić, aczkolwiek dobrze je przejrzeć, bo być może część z nich w przypadku Twojej strony będzie zupełnie zbędna. 4. Wstępne ładowanie czcionek – jeśli czcionki masz hostowane w swojej domenie, to może tutaj podać wewnętrzny adres url, aby zostały one wcześniej załadowane. Kolejna zakładka to zaawansowane reguły . Jeśli nie masz zbyt dużej wiedzy o optymalizacji, to lepiej ją pomiń. Z lewego menu wybierz: Baza danych. Zrób kopię bazy danych, zanim przejdziesz do jej czyszczenia. Zdecydowanie zalecam, aby optymalizacja bazy danych z pomocą wtyczki WP Rocket była wykorzystywana przez bardziej zaawansowani użytkownicy. 1. Czyszczenie wpisów – WordPress, automatycznie, co jakiś czas zapisuje stronę, nad którą pracujesz, i wprowadzone zmiany, przez co tworzy wiele jej wersji. Np. ten artykuł, ma już 18 zapisanych wersji. Przy setkach podstron mogą to być nawet tysiące wersji danych podstron, które wyczyścisz z bazy danych, właśnie korzystając z tej funkcji. To skuteczny sposób, by zoptymalizować działanie strony i zaoszczędzić zasoby serwera. Oprócz tego, że eliminujesz starszą wersję każdego artykułu, możesz też tu usunąć automatyczne szkice i wpisy znajdujące się w koszu. 2. Czyszczenie komentarzy – tutaj usuniesz komentarze z kosza i spamowe, czego nie musisz robić, bo WordPress robi to automatycznie. 3. Czyszczenie tymczasowych wpisów 4. Czyszczenie bazy danych – powoduje zmniejszenie rozmiaru tabel w bazie danych, 5. Automatyczne czyszczenie – możesz też skorzystać z automatycznego czyszczenia i w ogóle o tym zapomnieć. To były kluczowe funkcjonalności wymagające konfiguracji. Poniżej w skrócie opiszę pozostałe funkcje. Co to jest CDN? CDN (ang. Content Delivery Network; sieć dostarczania treści) to usługa polegająca na udostępnianiu strony z serwerów, znajdujących się najbliżej lokalizacji internauty, który odwiedza daną stronę. Dzięki temu jest ona w stanie działać szybciej. Usługę taką możesz wykupić gdziekolwiek, czy skorzystaj z bezpłatnej opcji Cloudflare. Tutaj WP Rocket promuje swoją usługę RocketCDN, która jest konfigurowana automatycznie. HeartBeat API zapewnia połączenie i synchronizację WordPress’a z serwerem, np. w celu automatycznego zapisywania postów, blokowania postów, gdy ktoś inne je edytuje, pokazywanie powiadomień na pulpicie… Ta funkcja jest automatycznie włączona i w jakimś stopniu obciąża Twojego WordPressa. Ja jej nie zmieniałem, ale w razie potrzeby możesz kliknąć Zmniejszenie aktywności, aby ograniczyć jej działanie. W tej sekcji znajdziesz dodatki, które pomogą jeszcze bardziej wspomóc optymalizację strony. Wystarczy je włączyć, a całą konfiguracją zajmie się WP Rocket. Aktualnie dostępne są 4 dodatki: W sekcji narzędzia, możesz eksportować, importować ustawienia WP Rocket, co może okazać się szczególnie przydatne podczas testowania ustawień. W tej sekcji jest też dostępna optymalizacja dla czcionek Google. To pokrótce wszystkie funkcje, jakie oferuje WP Rocket. Jak mogłeś zobaczyć, jest ich wiele, co mogło Cię nieco przytłoczyć. Jednak nie przejmuj się, bo po pierwsze WP Rocket jest już wstępnie ustawiony od razu po włączeniu, po drugie możesz skorzystać z informacji, które podałem Ci w tym materiale, a w razie potrzeby sięgnąć do potężnej bazy wiedzy WP Rocket. WP Rocket jest dostępny w trzech planach. Najtańszy Single tylko 59$ rocznie, co daje aktualnie około 250zł. To niedużo, biorąc pod uwagę, że przez cały rok masz zapewnioną optymalizację strony. Osobiście najpierw kupiłem pakiet Plus za 119$, który pozwalał mi na optymalizację do 3 stron, ale, by artykuł był bardziej rzetelny, kupiłem następnie licencję Infinite za 299$, aby móc przetestować WP Rocket na większej liczbie stron. Teraz nie mam żadnych ograniczeń i każdą stronę mogę zoptymalizować w dosłownie kilka minut. Dla osób, które kupią z mojego polecenia WP Rocket (tutaj) >> otrzymają 20% rabatu, co daje: Co ciekawe, nawet jeśli Twoja licencja wygaśnie, to wtyczka dalej będzie działać, jednak nie będzie aktualizowana (a także nie będzie miała wsparcia). Jeśli zatem chcesz, aby Twoja strona cały czas była dobrze zoptymalizowana, to warto licencję odnawiać regularnie. Jedyne, czego mi tutaj brakuje, to bezpłatnej wersji, abym mógł choć przez kilka dni ją przetestować, ale… To, co jednak dostajesz to 14-dniową gwarancję satysfakcji, także jeśli w przeciągu tego czasu uznasz, że wtyczka Ci się jednak nie podoba, to możesz otrzymać pełny zwrot wpłaconych środków. WP Rocket to jedna z najlepszych wtyczek do optymalizacji WordPress’a i skuteczniejsze działanie witryny. Jest bardzo łatwa i przyjazna w obsłudze – naprawdę nie jest trudno skonfigurować WP Rocket. Stanowi kompleksowe narzędzie, które pozwala szybko poprawić szybkość działania Twojego WordPress’a, bez konieczności posiadania specjalistycznej wiedzy do konfiguracji wtyczki. Oczywiście, jeśli nie chcesz za nią płacić i posiadasz odpowiednią wiedzę techniczną, to możesz skorzystać z bezpłatnych alternatywnych wtyczek i poradzić sobie bez niej. Dla mnie jednak WP Rocket jest idealnym rozwiązaniem dla wielu witryn internetowych i sklepów e-commerce. Trzeba tylko wybrać odpowiednie płatne wersje. Ale płacę raz w roku za wtyczkę i mam spokój, nie muszę się niczym przejmować i mogę zająć się innymi sprawami, a moje strony zyskują solidną optymalizację, która wpływa korzystnie na ich działanie i przekłada się na poziom zadowolenia nie tylko mój, ale wszystkich użytkowników, trafiających do danej witryny.Pamięć podręczna (pliki pamięci podręcznej)
Optymalizacja plików
Media
Wstępne ładowanie stron internetowych
Wstępne ładowanie strony
CDN
HEARTBEAT
DODATKI
NARZĘDZIA
Ile kosztuje WP Rocket?
Podsumowanie
Sztuką jest zoptymalizować stronę bez użycia kolejnej wtyczki 🙂 Tak aby była szybka na każdym urządzeniu. Oczywiście tutaj potrzebna będzie większa wiedza i czas, ale ten proces odwdzięczy nam się w przyszłości 🙂
Zauważ, że:
1. zamieniłem 3 inne wtyczki, na WpRocket,
2. o przyszłość nie muszę się martwić, bo dba o to WpRocket,
3. ten wpis, nie jest dedykowany specjalistom, a osobom, które same o to nie umieją zadbać i chcą mieć to z głowy.
O.. Sławek ma alter ego – Aleksandra Madej 🙂 ale do rzeczy… czekam na prawdziwą optymalizację a nie wyklikanie “wyniku” we wtyczce. Wtedy będzie miało to sens , teraz to tylko lokowanie produktu pod afiliację… słabo, coraz słabiej na blogu…
Dzięki Łukasz za komentarz.
Większość osób potrzebuje właśnie takiej drogi na skróty i nie chce się bawić w optymalizację techniczną.
Sam z tej wtyczki korzystam i dlatego z czystym sumieniem polecam.
A moze jakis solidny artykul od A do Z jak zoptymalizowac strone pod katem technocznym i zeby szybciej sie ladowala. Moze cos z Java, css, core vitals ? Chetnie poczytam, a nawet kurs kupie.
To jest już poza zakresem moich kompetencji.
My stosujemy do optymalizacji bardziej techniczne i sieciowe rozwiązania jakie oferuje np. Cloudflare. Nie wszystko można tym przyspieszyć, czasami sama optymalizacja szablonu strony, pozbycie się zbędnego kodu itd. daje lepsze rezultaty niż jakakolwiek optymalizacja.
Oczywiście dla ludzie nietechnicznych takie wtyczki jak WP Rocket, którą poleca Sławek mają jak najbardziej zastosowanie. Czasami lepiej wydać trochę kasy i zostawić całość specjalistom niż samemu grzebać i coś zepsuć. To daje spokój psychiczny i pozwala skupić się na pracy.
Ciekawy artykuł, dotychczas korzystałem z innych wtyczek do przyspieszania strony typu WP Fastest Cache. Trzeba będzie koniecznie przetestować;)
Sprawdź, bo też tego używałem co Ty, ale Wp Rocket dał lepsze efekty.
Dzięki – świetny tekst – zawsze kilka ms w ładowaniu i punktów do przodu 🙂
Może byłbyś w stanie mi pomóc… Zainstalowałem wp rocket, zrobiłem wg. instrukcji – strona działa dobrze, jest widocznie szybsza, ale problem jest z czcionkami. Kiedy jestem zalogowany na wp admin widzę dobrą czcionkę. Ale jak wchodzę przez inną przeglądarkę jako gość to czcionka jest chyba times new roman, w każdym razie nieciekawa. Zmiana w ustawieniach strony nic nie daje (oxygen). Jak zmienić tę czcionkę? Chociaż na jakąś ciekawszą
Kurczę teraz zauważyłem, że na przeglądarce Chrome czcionki są ok, takie jak wybrane w oxygen. Jedynie Edge nie wgrywa tych czcionek. Pomożesz ? 🙂
Napisz do mnie e-mail, a przekażę Ci kontakt do mojego webmastera.