Używanie WP Rocket jako tajnej broni dla naszej agencji WordPress

Co jeśli powiem Ci, że możesz tworzyć szybkie i wydajne witryny WordPress, które uzyskują ponad 90% w PageSpeed ​​Insights? Co więcej, gdybym ci powiedział, że możesz uzyskać te imponujące wyniki dla urządzeń mobilnych i przekazać Core Web Vitals dla każdego projektu?

Robimy to konsekwentnie w przypadku projektów klientów wykorzystujących szybkie motywy, dobry hosting i co najważniejsze, WP Rocket. Korzystanie z WP Rocket to tajna broń naszej agencji WordPress!

Ale co, jeśli odziedziczysz projekt od innego programisty lub agencji i potrzebujesz poprawić wydajność? W tym artykule dokonujemy przeglądu niektórych typowych wąskich gardeł wydajności i sugerujemy ulepszenia, które można wprowadzić za pomocą WP Rocket, aby uzyskać niesamowite wyniki.

Nasze doświadczenie i doświadczenie WordPress

Nasza agencja, Clio Websites, pomaga klientom uruchamiać nowe, piękne strony internetowe od 2007 roku.

Pracujemy z WordPressem od 2013 roku i widzieliśmy i rozwiązaliśmy prawie wszystko, co może zaszkodzić wydajności witryny. Od nieefektywnych motywów po duże pliki obrazów i wiele kreatorów w tej samej witrynie.

Jedną z naszych podstawowych ofert jest pomoc klientom w poprawie wydajności ich stron internetowych, a WP Rocket odgrywa w tym kluczową rolę. Użyliśmy WP Rocket do projektów wykorzystujących niestandardowe motywy, edytor bloków (Gutenberg) i popularne programy do tworzenia stron, takie jak Elementor i WP Bakery, i uzyskaliśmy doskonałe wyniki. Dlatego nazywamy WP Rocket tajną bronią naszej agencji WordPress.

Buforowanie, minifikacja i opóźnienia zasobów — klucz do osiągnięcia doskonałej wydajności witryny

Ze względu na swoją nieszablonową architekturę WordPress wymaga odrobiny dodatkowej miłości, jeśli chodzi o wydajność. Implementacje Vanilla WordPress często uzyskują dostęp do bazy danych SQL w celu wyszukania informacji, co powoduje częste podróże w obie strony do serwera, gdy użytkownicy wchodzą w interakcję ze stroną internetową.

Dynamiczny charakter tej konfiguracji, która jest największą zaletą WordPressa jako systemu zarządzania treścią (CMS), jest również największą wadą.

Jak działa buforowanie

Wtyczki do buforowania, takie jak WP Rocket, tworzą statyczną wersję Twojej witryny i wyświetlają ją odwiedzającym, zamiast odbywania podróży w obie strony do bazy danych i serwerów zaplecza.

Kiedy wprowadzasz zmiany w swojej witrynie lub dodajesz nową zawartość, WP Rocket buforuje tę wersję i pokazuje użytkownikom najbardziej aktualne pliki. Aby dowiedzieć się więcej o tym, jak działa ta magiczna wtyczka, sprawdź funkcje WP Rocket.

Jak minifikacja może poprawić wydajność

Minifikacja to kolejna ważna funkcja, dzięki której strony internetowe działają lepiej. Ten proces usuwa wszystkie niepotrzebne znaki i spacje z plików witryny, czyniąc je czytelnymi dla ludzi i tworząc wydajniejsze wersje tych plików.

Ponieważ komputery nie potrzebują miejsca do otwierania i wyświetlania plików, ich odczytywanie i renderowanie jest znacznie szybsze. Minifikacja plików może pomóc w zwiększeniu szybkości witryny, ale musi być również dokładnie przetestowana, ponieważ czasami może powodować problemy (które omówimy w przyszłych sekcjach artykułu).

Co to są aktywa opóźniające i odraczające?

Opóźnianie zasobów witryny od załadowania do momentu, gdy są potrzebne, jest dokładnie tym, na co wygląda. Korzystając z WP Rocket, możesz opóźnić lub odroczyć ładowanie pliku lub obrazu, dopóki użytkownik nie przewinie do tej sekcji lub rozpocznie interakcję z funkcją witryny. Może to znacznie poprawić wydajność witryny, ponieważ możesz zmusić witrynę do załadowania tylko początkowej części, którą odwiedzający musi zobaczyć, gdy trafi na Twoją witrynę.

Teraz, gdy wiesz trochę więcej o buforowaniu i minifikacji, przejdźmy do typowych problemów, które widzimy podczas pracy z klientami i pokażmy, jak je naprawić za pomocą WP Rocket.

4 typowe problemy z wydajnością strony internetowej

Mamy duże doświadczenie w budowaniu i pomaganiu klientom w poprawianiu wydajności stron internetowych.

Najczęstsze problemy, które napotykamy podczas pracy z witrynami, które odziedziczyliśmy po innych programistach, to:

1. Duże i nieskompresowane obrazy
2. Źle skonfigurowane wtyczki buforujące lub brak wtyczek buforujących
3. Nieskompresowane zasoby (pliki CSS i JavaScript) bez funkcji opóźnień i odroczeń
4. Niewydajne motywy i wtyczki

Jak zidentyfikować problemy z wydajnością

Istnieje wiele bezpłatnych narzędzi, których można użyć do diagnozowania i rozwiązywania problemów z wydajnością witryny. Nasze ulubione narzędzia to PageSpeed ​​Insights, GTmetrix i WebPageTest.

Nie bój się korzystać ze wszystkich trzech, ponieważ oferują one unikalne spostrzeżenia i sugestie dotyczące rozwiązywania problemów. Naszym zdaniem PageSpeed ​​Insights jest najważniejszym i najbardziej niezawodnym narzędziem. To są zalecane przez Google narzędzia do rozwiązywania problemów i rozwiązywania problemów z wydajnością zidentyfikowanych w Google Search Console.

W kilku następnych sekcjach zagłębimy się w najczęstsze problemy z wydajnością i sposoby ich rozwiązywania.

1. Nieskompresowane obrazy

Używanie dużych i nieskompresowanych obrazów to najczęstszy problem, który negatywnie wpływa na szybkość ładowania witryny. Średni rozmiar witryny w 2022 r. wynosi około 2,3 MB dla komputerów stacjonarnych i około 2 MB dla wersji mobilnych.

Jeśli Twoja witryna korzysta z kilku wysokiej jakości obrazów, możesz szybko przekroczyć średni rozmiar witryny i spowolnić ją. Spowodowałoby to spowolnienie ładowania strony internetowej i wczytywanie zdjęć po tekście, co daje stronom internetowym klimat połowy lat 90-tych.

Kompresowanie obrazów przed przesłaniem ich do witryny jest kluczowe. Możesz zautomatyzować ten proces, używając narzędzi takich jak Imagify. Zapoznaj się z tym artykułem, aby uzyskać inne sugestie dotyczące kompresji i wyświetlania obrazów w witrynach internetowych.

2. Źle skonfigurowane lub brakujące wtyczki buforujące

Ponieważ WordPress wykorzystuje architekturę klient-serwer, włączenie i konfiguracja buforowania jest koniecznością. Korzystanie z wtyczki buforującej może rozwiązać wiele problemów z wydajnością, których doświadczają właściciele witryn WordPress.

Spotykamy wiele witryn, które całkowicie pomijają ten krok. Może to spowodować, że strony internetowe będą ładować się w nieskończoność, zwłaszcza na urządzeniach mobilnych, które są jeszcze mniej wybaczające niż urządzenia stacjonarne, jeśli chodzi o wydajność witryny.

Wtyczki buforujące bywają skomplikowane i łatwe do błędnej konfiguracji. To kolejny powód, dla którego wolimy WP Rocket. Jest naprawdę łatwy w konfiguracji i jest skonfigurowany w celu uzyskania doskonałych wyników w krótkim czasie.

3. Nieskompresowane aktywa bez funkcji opóźnień

Kompresowanie innych zasobów witryny, takich jak pliki CSS i JavaScript (JS), jest łatwe dzięki odpowiednim narzędziom i może generować świetne wyniki. W następnej sekcji pokażemy, jak możesz to zrobić, aby poprawić wydajność swojej witryny.

Te same zasoby można również łączyć, opóźniać i odraczać w celu dalszej poprawy wydajności. Problemy te mogą być nieco trudniejsze do rozwiązania, ale tutaj przydają się narzędzia takie jak GTmetrix.

GTmetrix ma wykres kaskadowy, który może pokazać wszystkie zasoby, które są ładowane przez Twoją witrynę. Bez kompresji i opóźnień zobaczysz ładowane coraz większe pliki CSS i JS.

Słowo ostrzeżenia: włączenie ustawień kompresji i opóźnień może czasami spowodować uszkodzenie niektórych sekcji i funkcji Twojej witryny. Upewnij się, że dokładnie je testujesz na każdym kroku.

4. Nieefektywne motywy i wtyczki

Nieefektywne motywy WordPress mogą zawierać wiele skryptów, nadętych zasobów i złych praktyk programistycznych, co może znacząco wpłynąć na wydajność sieci. Zalecamy pracę z motywami, które są przede wszystkim szybkie i wydajne (takie jak Hello Elementor, GeneratePress i Astra).

Podczas gdy narzędzia takie jak WP Rocket mogą pomóc złagodzić problemy spowodowane złymi motywami, łatwiej jest ich całkowicie uniknąć, używając szybkich motywów podczas tworzenia nowych projektów.

Unikanie zbędnych wtyczek to kolejny świetny pomysł, gdy skupiasz się na wydajności i rozwiązywaniu problemów z wolnymi witrynami. Zainstalowanie wielu wtyczek może znacznie spowolnić działanie witryny.

Chociaż nie ma sztywnych i szybkich reguł, jeśli chodzi o liczbę wtyczek, których powinieneś używać, zalecamy nie używać ich więcej niż musisz. Nie wszystkie wtyczki są tworzone jednakowo, a niektóre są zdecydowanie lepsze od innych. Kiedy współpracujemy z klientami, którzy chcą poprawić wydajność swojej witryny, staramy się wyeliminować jak najwięcej zbędnych wtyczek.

Jak używamy rakiety WP, aby osiągnąć> 90% wyników?

Nikt nie lubi korzystać z powolnej witryny. Zwłaszcza nie na urządzeniach mobilnych.

Po zidentyfikowaniu problemów z wydajnością, których doświadczają witryny Twoich klientów, możesz je rozwiązać za pomocą WP Rocket i uzyskać ponad 90% punktów na urządzeniach mobilnych.

Co to oznacza dla Twoich klientów i Twojej agencji

Niedawno pomogliśmy klientowi poprawić wydajność z 54% do 97% na urządzeniach mobilnych, po prostu instalując i konfigurując WP Rocket :

Zauważyliśmy, że wydajność poprawia konwersje, SEO i satysfakcję użytkowników witryn naszych klientów. W rzeczywistości, według badań, ponad połowa odwiedzających opuści stronę, której ładowanie trwa dłużej niż 3 sekundy.

Google wskazał również, że szybkość ładowania jest czynnikiem rankingowym, co oznacza, że ​​jeśli Twoja witryna jest szybsza od konkurencji, będzie miała wyższą pozycję w wyszukiwarce Google.

W innym przykładzie użyliśmy WP Rocket, aby poprawić wydajność mobilną z 24% do ponad 90% i pomóc im przejść Core Web Vitals (patrz zrzut ekranu poniżej). Wkrótce po rozwiązaniu problemów z wydajnością i usunięciu błędów spowolnienia Google Search Console ruch SEO wzrósł o 55% .

Jako agencja korzystamy z planu WP Rocket Infinite i instalujemy WP Rocket na wszystkich stronach internetowych naszych klientów w celu poprawy wydajności. Używamy tego jako korzyści z korzystania z naszej agencji w stosunku do innych, co może zmusić Cię do zakupu własnych wtyczek premium.

Nasi klienci korzystają z dostępu do jednych z najlepszych wtyczek na rynku (takich jak Imagify i WP Rocket). WP Rocket ułatwia również zarządzanie witrynami na ich platformie i usuwanie ich w razie potrzeby. Wszystkie witryny korzystające z Twojej licencji pojawią się na Twoim koncie i możesz łatwo usunąć lub nawet zablokować witryny, w których nie chcesz już korzystać z licencji.

W następnej sekcji omówimy typowe funkcje WP Rocket, których używamy w witrynach WordPress, aby poprawić wydajność i uzyskać ponad 90% na urządzeniach mobilnych.

1. Ustawienia pamięci podręcznej

Zawsze włączamy „Włącz buforowanie dla urządzeń mobilnych” w sekcji WP Rocket Cache. Ponieważ Google ocenia szybkość działania na podstawie tego, jak Twoja witryna działa na urządzeniach mobilnych, to ustawienie jest koniecznością.

Priorytetowo traktujemy poprawę wydajności urządzeń mobilnych, ponieważ są one trudniejsze do osiągnięcia. Jeśli osiągniesz świetne wyniki na urządzeniach mobilnych, uzyskasz również świetną wydajność na urządzeniach stacjonarnych, ponieważ są one nieco bardziej wyrozumiałe (ze względu na szybszy internet w domu i prędkość komputera stacjonarnego).

Ustawienie „Czas życia pamięci podręcznej” jest również czymś, co zwykle zwiększamy, aby poprawić wydajność. Wartość domyślna to 10 godzin, co oznacza, że ​​co 10 godzin pamięć podręczna witryny zostanie całkowicie usunięta.

Jest to niepotrzebne i zwykle zwiększamy to ustawienie, ponieważ zaktualizowane strony zostaną automatycznie zregenerowane i wstępnie załadowane przez WP Rocket.

2. Ustawienia optymalizacji plików

Sekcja Optymalizacja plików jest jedną z najważniejszych i najbardziej imponujących sekcji WP Rocket. Ale z wielką mocą wiąże się wielka odpowiedzialność.

Zalecamy włączanie tych ustawień jeden po drugim i dokładne testowanie w Chrome incognito z wyłączonym buforowaniem przeglądarki, aby mieć pewność, że Twoja witryna się nie zepsuje. Jeśli się zepsuje, możesz cofnąć lub rozwiązać konkretne ustawienie.

Optymalizacja CSS

Sekcja na górze zajmuje się modyfikacjami i ulepszeniami plików CSS, a sekcja na dole zajmuje się ulepszeniami plików JavaScript.

Włączenie funkcji „Minifikuj pliki CSS” usunie wszystkie spacje i niepotrzebne znaki z plików CSS witryny i przyspieszy wczytywanie tych zasobów. Zwykle włączamy to ustawienie.

Zwykle wyłączamy łączenie plików CSS i JS, ponieważ większość naszych witryn jest hostowana na serwerach obsługujących protokół HTTP2, a ładowanie plików osobno, zamiast ich łączenia, może być bardziej wydajne.

Optymalizacja dostarczania CSS to również świetna funkcja, którą możesz wypróbować, jeśli zobaczysz ostrzeżenia w PageSpeed ​​Insights. Jak widać w powyższym przykładzie, to ustawienie nie jest włączone i nadal uzyskujemy 97% usług mobilnych w tej konkretnej witrynie klienta.

Włączenie tego ustawienia może być korzystne, jeśli szukasz dalszych ulepszeń. To ustawienie usunie wszystkie nieużywane CSS z Twojej witryny i zwiększy jej wydajność, ponieważ Twoja witryna nie będzie musiała ładować i wykonywać tak dużej ilości kodu.

Jak widać w powyższym przykładzie, dokładne przetestowanie tej funkcji jest zalecane, ale może przynieść imponujące wyniki.

Optymalizacja JavaScript

Sekcja optymalizacji JavaScript ma podobne opcje i funkcje.

Zalecamy włączenie minifikacji JavaScript, ale pozostawienie „łączenia” wyłączonego, jeśli korzystasz z serwerów korzystających z protokołu HTTP2.

Opóźnianie i odraczanie wykonania JavaScriptu znacznie poprawi również wydajność witryny. W rzeczywistości większość stron internetowych odczuje największy wpływ, ładując wiele plików JavaScript, które nie są odroczone i opóźnione.

Sekcje odroczenia i opóźnienia mogą spowodować awarię i przestanie działać niektórych funkcji, więc włączaj je pojedynczo i przetestuj swoją witrynę. Jeśli wystąpią problemy, istnieją sposoby ich rozwiązania.

Niektóre popularne motywy i wtyczki mają tendencję do psucia się, gdy to ustawienie jest włączone. Jednym z najczęstszych przykładów jest Elementor Pro. WP Rocket obejmuje Cię, jeśli wystąpi problem podobny do tego. Zapoznaj się z ich przewodnikiem rozwiązywania problemów z wykluczeniami JavaScript, aby uzyskać więcej informacji i dodaj zalecane przez nich skrypty do tej sekcji.

Na przykład w przypadku witryn Elementor Pro można znaleźć skrypty, które należy wykluczyć, i dodać je do tej sekcji, a mimo to korzystać z tej funkcji w przypadku pozostałych plików JavaScript witryn.

3. Opcje mediów i strojenie

Innym częstym problemem, który widzimy, są nieskompresowane obrazy i brak leniwego ładowania.

Przesyłanie niedostrojonych obrazów może znacząco wpłynąć na wydajność, więc dostosuj i skompresuj obrazy przed przesłaniem ich do witryny. Możesz także użyć wtyczki, takiej jak Imagify, aby po fakcie automatycznie je skompresować. Korzystamy z tej metody dla witryn naszych klientów, ponieważ chcemy zautomatyzować tę część i utrzymać dobrą wydajność dla naszych klientów. Imagify dobrze integruje się z WP Rocket, ponieważ jest rozwijany przez ten sam zespół. WP Rocket rozpozna i wykorzysta Imagify, jeśli zostanie zainstalowany na tej samej stronie internetowej.

Zalecamy włączenie wszystkich funkcji na karcie Media, aby włączyć LazyLoad dla obrazów i filmów. Dzięki temu obrazy będą ładowane tylko wtedy, gdy użytkownik przewinie do tej sekcji.

Możesz wykluczyć obrazy, takie jak Twoje logo lub obraz głównej sekcji bohatera, dodając je do sekcji „wykluczone obrazy lub ramki iframe”.

Dodanie brakujących wymiarów obrazu jest również zalecane jako dobra praktyka tworzenia stron internetowych i dostępności. Ponieważ niektóre motywy i programiści pomijają ten krok, WP Rocket może ci pomóc, automatyzując to dla obrazów, które nie mają wymiarów. Zawsze używamy tego ustawienia podczas pracy na stronach internetowych klientów.

4. Wstępne ładowanie

Wstępne ładowanie w WP Rocket jest domyślnie włączone i zalecamy pozostawienie go włączone. Symuluje użytkownika odwiedzającego witrynę, który uzyskuje dostęp do witryny i generuje buforowaną wersję witryny, dzięki czemu pamięć podręczna jest już obecna, gdy pojawi się rzeczywisty użytkownik.

Łącza do wstępnego ładowania to również fajna funkcja, która rozpoczyna ładowanie witryny, gdy użytkownik najedzie kursorem na hiperłącze. Gdy użytkownik kliknie link, strona zostanie prawie natychmiast załadowana.

5. Inne ustawienia rakiety WP

Kolejną bardzo przydatną, ale opcjonalną funkcją jest „czyszczenie bazy danych”. Aby przyspieszyć działanie, uruchamiamy tę funkcję w witrynach, które miały wiele poprawek do postów i komentarzy zawierających spam. Istnieje również możliwość zautomatyzowania tego czyszczenia i uruchamiania go co jakiś czas. Zazwyczaj zalecamy wykonanie tego kroku ręcznie po wykonaniu kopii zapasowej bazy danych, na wypadek gdyby coś poszło nie tak.

Zalecamy również pozostawienie domyślnej opcji „Kontroluj bicie serca” w sekcji Puls. Puls jest domyślnym zaplanowanym zadaniem WordPressa, które pomaga w automatycznym zapisywaniu wersji posta podczas jej pisania. Jest to bardzo przydatna funkcja, ale może powodować niepotrzebne wykorzystanie zasobów serwera.

WP Rocket automatycznie zmniejszy tę aktywność z 1-minutowych do 2-minutowych odstępów, aby zachować zasoby serwera i pomóc w wydajności.

Inne ustawienia Add-On obejmują włączenie buforowania Varnish (automatycznie wykrywanego przez WP Rocket) i kompatybilność z WebP.

Możesz dodatkowo pomóc w poprawie wydajności strony po stronie serwera, używając Varnish. Jeśli Twój dostawca usług hostingowych używa Varnish, włącz to ustawienie, jeśli nie jest ono automatycznie rozpoznawane.

WebP to stosunkowo nowy standard kompresji obrazu i rozszerzenie plików, które obsługują wszystkie nowoczesne przeglądarki. Aby uzyskać lepszą wydajność, wtyczka do kompresji obrazu, taka jak Imagify, może automatycznie konwertować obrazy png i jpg do WebP. WP Rocket może automatycznie wyświetlać te obrazy z pamięci podręcznej.

Jako agencja, jedną z naszych ulubionych funkcji jest eksportowanie i importowanie ustawień z jednej witryny do drugiej. Ponieważ większość używanych przez nas ustawień i narzędzi jest podobna w różnych projektach, eksportowanie i importowanie ustawień do innej witryny oszczędza nam dużo czasu!

Zawijanie rzeczy

Włączając te ustawienia i dokładnie testując swoją witrynę, możesz uzyskać imponujące wyniki dla witryn swoich klientów. WP Rocket sprawia, że ​​włączanie i testowanie tych funkcji jest bardzo łatwe i oferuje niesamowite wskazówki dotyczące rozwiązywania problemów, jeśli napotkasz problemy.

Utrzymywanie wyników wydajności po dostrojeniu

Gdy uruchomisz szybką i wydajną stronę internetową, Twoja praca na tym się nie kończy. Łatwo jest dodać rozdęcie z powrotem do witryny, ale wprowadzając niepotrzebne wtyczki, przesyłając duże obrazy lub filmy, nie utrzymując bazy danych w czystości i nie aktualizując witryny (wtyczki, rdzenie i wersje PHP).

Zawsze raz w miesiącu testujemy wydajność witryny za pomocą PageSpeed ​​Insights i GTmetrix, aby zapewnić szybkie ładowanie witryny. Zaleca się również zwracanie uwagi na nowe funkcje i aktualizacje WP Rocket, które mogą pomóc w dalszej poprawie. WP Rocket zawsze ulepsza i dodaje nowe funkcje, które mogą pomóc użytkownikom zwiększyć wydajność ich witryny.

Dodanie WP Rocket do arsenału agencji może pomóc w tworzeniu superszybkich stron internetowych i poprawić szybkość stron internetowych dla obecnych klientów. Mamy nadzieję, że ten artykuł pomógł Ci zachęcić Cię do dodania WP Rocket jako tajnej broni Twojej agencji WordPress.