Wordperss to najpopularniejszy w Polsce i na świecie system zarządzania treścią, którego podstawowym przeznaczeniem była obsługa blogów. Obecnie dzięki ogromnej ilości dodatków jaką do dyspozycji mają użytkownicy WordPressa stał się on powszechnie wykorzystywanym systemem CMS do budowy firmowych stron internetowych, portali informacyjnych, a nawet prostych portali społecznościowych. Z WordPressa korzystają takie znane marki jak Microsoft, Sony, czy BBC, co tylko potwierdza fakt że jest to bardzo dobry system zarządzania treścią.
Aby wykorzystać jego potencjał w pełni warto zadbać, aby oprócz atrakcyjnej szaty graficznej i ciekawych pluginów nasz CMS był także zoptymalizowany pod względem szybkości działania.
Szybkość ładowania WordPressa na domyślnym motywie
WordPress na domyślnym motywie bez zainstalowanych dodatków uzyskuje całkiem przyzwoite wyniki w PageSpeed Insights, choć nie jest to wynik maksymalny. W przypadku wersji mobilnej CMS ten uzyskuje 73 na 100 możliwych punktów, głównie ze względu na blokujące renderowanie skrypty JS oraz pliki CSS.
W przypadku wersji desktopowej WordPress uzyskuje maksymalny wynik 100 na 100 punktów PageSpeed Insights.
Oczywiście wynik ten jest wygenerowany przez czysty WordPress, który korzysta tylko z domyślnych plików JS i CSS motywu. Niestety po instalacji kilku najpopularniejszych pluginów i samodzielnym stworzeniu motywu szybkość WordPressa znacząco spada i uzyskuje on zaledwie od 30 do 45 punktów w przypadku wersji mobilnej i od 75 do 90 w przypadku wersji desktopowej. Aby poprawić ten wynik niezbędne jest wyeliminowanie najpopularniejszych problemów wpływających na wydajność strony.
Wyświetlaj obrazy w formatach nowej generacji
Błąd ten wyświetlany jest przez narzędzie PageSpeed Insights w przypadku kiedy na stronie wykorzystujemy pliki formatach JPG, PNG lub GIF zamiast w formacie WebP, czy AVIF. W zależności od ilości plików graficznych, błąd ten może obniżyć ocenę naszej stronę o nawet kilkanaście punktów i spowolnić jej ładowanie o kilka sekund.
Jak wyeliminować błąd PageSpeed Insights: Wyświetlaj obrazy w formatach nowej generacji
Wbrew pozorom wyeliminowanie tego błędu nie będzie wymagać od nas ponownego wczytania wszystkich plików graficznych w nowym formacie, czy zmian w motywie. Wystarczy że do naszego WordPressa doinstalujemy jedną z wielu dostępnych wtyczek do konwertowania plików graficznych na format WebP.
Jedną z najpopularniejszych jest wtyczka WebP Converter for Media, która w kilka minut przekonwertuje wszystkie używane grafiki na format WebP zmniejszając przy tym ich rozmiar. Plusem tej wtyczki jest fakt że podczas konwersji nie usuwa ona oryginalnych grafik, a jedynie ładuje nowo utworzone grafiki w formacie WebP. Jeśli przeglądarka nie obsługuje tego formatu, wówczas załadowane zostaną nasze pliki w formacie JPG lub PNG. Cały proces konwersji plików graficznych na WebP wykonujemy przy pomocy jednego kliknięcia, co doceniają zwłaszcza mniej zaawansowani użytkownicy WordPressa.
Wyeliminuj zasoby blokujące renderowanie
Kolejny popularny błąd powodujący wolniejsze ładowanie strony internetowej i niższą ocenę przez narzędzie PageSpeed Insights to blokowania renderowania strony przez skrypty JS oraz arkusze stylów CSS. Błąd ten podobnie jak w przypadku grafik w nieodpowiednim formacie może spowolnić ładowanie strony nawet o 3 sekund, co kosztuje nas kilkanaście punktów PageSpeed Insights.
Jak wyeliminować błąd PageSpeed Insights: Wyeliminuj zasoby blokujące renderowanie
Błąd ten w WordPressie możemy wyeliminować równie szybko jak poprzedni instalując odpowiednią wtyczkę, która połączy ładowane pliki z rozszerzeniem JS oraz CSS w dwa pliki, które będą wczytywane po kluczowych elementach strony.
Bardzo dobre rezultaty w przypadku tego błędu daje wtyczka Hummingbird, która nie tylko optymalizuje skrypty, ale daje także możliwość przetestowania strony po wprowadzeniu zmian. Dzięki czemu łatwo i szybo możemy znaleźć konfigurację, która nie tylko poprawi szybkość ładowania strony, ale także nie wpłynie na jej działanie. Aspekt ten jest bardzo ważny ponieważ często łączenie różnych skryptów JS w jeden plik powoduje ich konflikty i problemy z działaniem poszczególnych wtyczek.
Skróć wstępny czas reakcji serwera
Kolejny błąd, który często jest sygnalizowany przez narzędzie Google PageSpeed Insights dotyczy czasu reakcji serwera. Może być on spowodowany nie tylko przez słabo zoptymalizowany motyw, czy brak wtyczki optymalizującej, ale także przez starą wersję PHP lub mało wydajny serwer.
Jak wyeliminować błąd PageSpeed Insights: Skróć wstępny czas reakcji serwera
Jeśli otrzymujemy ten komunikat warto sprawdzić czy mamy włączoną najnowszą wersję PHP na serwerze, aktualnie jest to wersja 8.1 oraz czy zasoby serwera są adekwatne do ruchu na naszej stronie. Jeśli nie pomyślmy o zakupie serwera z lepszym procesorem i większa ilością pamięci RAM, a także dyskiem SSD. W przypadku zmiany wersji PHP warto zaktualizować wszystkie wtyczki i po zmianie wersji sprawdzić ich działanie. Jeśli część wtyczek nie jest przystosowana do wersji 8.0 lub 8.1 warto pomyśleć o ich zastąpieniu.
Odłóż ładowanie obrazów poza ekranem
Kolejnym błędem z jakim możemy spotkać się używając narzędzia Google PageSpeed Insights jest problem z ładowanie obrazów. Wczytując wszystkie grafiki, nawet te znajdujące się poza ekranem znacząco opóźniamy ładowanie całej strony, co może spowolnić ją nawet kilka sekund. Lepszym rozwiązaniem w tym przypadku jest załadowanie wyłącznie grafik, które są widoczne na starcie przy użyciu leniwego ładowania czyli lazy loading.
Jak wyeliminować błąd PageSpeed Insights: Odłóż ładowanie obrazów poza ekranem
Do wdrożenia leniwego ładowania grafik możemy wykorzystać wtyczkę Lazy Load, która do każdej grafiki, a także iframa, w tym również Google Maps, czy filmiku YouTuba doda odpowiednią klasę, dzięki której skrypt JS załaduje element dopiero w momencie kiedy pojawi się on w polu widzenia użytkownika. Funkcję tę posiadają także najpopularniejsze wtyczki optymalizujące Wordpessa, w tym także wcześniej wspomniany Hummingbird.
Wynik PageSpeed Insights po zastosowaniu wtyczek optymalizujących WordPressa
Po zastosowaniu powyższych wtyczek w narzędziu PageSpeed Insights możemy uzyskać lepsze rezultaty niż w przypadku domyślnego, czystego motywu WordPressa. W wersji mobilnej uzyskując 10 punktów więcej, co jest naprawdę bardzo dobrym rezultatem.
W przypadku wersji na komputery wynik jest nieco słabszy, jednak biorąc pod uwagę fakt, że w przeciwności do czystego wordpressa nasza strona zawiera liczne wtyczki oraz grafiki, wynik 99 punktów zamiast 100 powinien usatysfakcjonować każdego użytkownika WordPressa.
