Posiadanie szybkiej strony WordPress ma same zalety. Po pierwsze, korzystanie z takiej strony jest przyjemne z perspektywy użytkownika. Klient lub czytelnik bloga pozostanie na stronie, jego wizyta będzie trwała prawdopodobnie dłużej i będzie głębsza. Tym samym zwiększa się prawdopodobieństwo, że nasza strona spełni założony przez nas cel.
Drugą zaletą (oczywiście mającą ścisły związek z punktem powyżej) jest polepszenie pozycji w wyszukiwarce. Nie od dziś wiadomo, że szybkość działania strony to krytyczny czynnik decydujący o pozycji strony w wyszukiwarce. Mówi o tym samo Google bowiem nadrzędnym celem wyszukiwarki jest dostarczanie trafnych wyników. Strona która działa wolno jest nieprzydatna – będzie powodować frustrację użytkowników wyszukiwarki i może niekorzystnie wpływać na jej postrzeganie – dlatego strony takie są wycinane z wyników wyszukiwania lub ich pozycja jest znacznie pogorszona.
Czytaj więcej o optymalizacji SEO WordPressa
Spis treści:
- Optymalizacja back-end,
- Optymalizacja front-end (wczytywanie),
- Optymalizacja ścieżki renderowania (przetwarzanie)
Dobra optymalizacja wydajności to najpierw eliminacja wąskich gardeł
Poprawna optymalizacja wydajności złożonych systemów takich jak WordPress to znalezienie i zlikwidowanie wąskich gardeł (ang. bottlenecks). Bardzo lubię definicję którą można znaleźć w samouczku Oracla, mówiącej o tym, że wąskie gardła to kluczowe inhibitory wydajności (ang. KPI: Key Performance Inhibitor).
Wąskie gardła w kontekście WordPressa to wszelkie zasoby, które w największym stopniu ograniczają prędkości przepływu zasobów strony internetowej oraz wydłużają czas potrzebny na ich poprawne załadowanie się w przeglądarce użytkownika.
Identyfikacja wąskich gardeł, która de facto powinna być przeprowadzana już w trakcie projektowania strony WordPress pozwala zaplanować działania optymalizujące tak, aby były wykonywane w odpowiedniej kolejności i dały maksymalną korzyść z punktu widzenia użytkownika. Ich eliminacja pozwala ponadto na efektywne wykorzystanie zasobów, którymi aktualnie dysponuje WordPress oraz efektywne rozwijanie strony.
W pierwszej kolejności, warto poświęcić czas na optymalizację, która poprawi wydajność działania WordPressa w większym stopniu a dopiero potem przystąpić do prac, które dadzą relatywnie mniejszą korzyść . Przykładowo, jeżeli 70% czasu potrzebnych na załadowanie się strony WordPress stanowią zdjęcia, to właśnie w optymalizacji zdjęć, powinniśmy szukać rozwiązań, które pozwolą przyspieszyć działanie WordPressa w tym konkretnym przypadku w największym stopniu.
TL;DR
Obsesja na punkcie wyniku w PageSpeed Insights albo GTMetrix tak naprawdę nie jest poprawnym podejściem w przyspieszaniu strony WordPress.
Poprawne podejście to najpierw eliminacja wąskich gardeł a dopiero potem spełnienie ogólnie rozumianych dobrych praktyk w konstruowaniu stron internetowych.
Minimalizacja stylów CSS, która zaoszczędzi niecałe 7 KB podczas kiedy na stronie znajduje się niepoprawnie przeskalowane zdjęcie, które marnuje 250KB – co jest bardzo częstym zjawiskiem na stronach WordPress 😉 – to jak można się domyślić, dowód sporej niekompetencji lub braku staranności web deweloperów.
Uwaga, najbardziej interesują nas wyniki mobilne – bo to na ich podstawie wyszukiwarka „wyrabia sobie zdanie” o prędkości stron internetowych. Fachowo nazywamy to indeksowaniem mobile-first.
Jak badać prędkość WordPressa?
Istnieje kilka podejść, dzięki którym możemy stwierdzić czy nasza strona działa stosunkowo szybko czy wolno.
Pierwszym z nich jest testowanie przy pomocy własnej przeglądarki. Przykładowo Google Chrome ma wbudowany zestaw narzedzi do symulowania powolnego łącza i wyświetlania wodospadu pobieranych przez sieć zasobów.
Druga technika to skorzystanie ze wspomnianych narzędzi GTMetrix, Page Speed Insights, Pingdom itd…
Trzecia technika to monitorowanie zakładki wydajność w Google Analytics. Przechodzimy do: Zachowanie >> Szybkość witryny >> Czas wczytywania
W WordPressie wąskie gardła mają bezpośredni wpływ na jego wydajność i skalowalność. Mogą one występować w wielu miejscach. Poniżej lista potencjalnych wąskich gardeł na stronie WordPressa oraz praktyczne porady jak sobie z nimi radzić. Opis uzupełni zdefiniowane także dobrych praktyk.
1. Optymalizacja po stronie back-endu (skracanie czasu TTFB)
Zbyt długa odpowiedź serwera czyli de facto zbyt wysoka wartość czasu TTFB (Time To First Byte) (pow. 0.2 sekundy) to konsekwencja zbyt rozbudowanej logiki, która ma miejsce w przypadku korzystania z tony różnego rodzaju wtyczek. Daj sobie spokój z wtyczkami do RODO, kreatorami wizualnymi, jakimiś pseudo-zabezpieczeniami, automatyczną optymalizacją obrazków czy Yoastami.
Jeżeli potrzebujesz niestandardowej funkcjonalności w WordPressie, której nie ma w jego podstawowej paczce, zleć web deweloperowi edycję szablonu lub napisanie dedykowanej wtyczki, która będzie napisana tak aby nie poświęcać szybkości działania CMSa.
Długa odpowiedź może być także konsekwencją źle skonfigurowanego hostingu. Poniżej kilka technik radzenia sobie z tym problemem, które w 90% powinny zdać egzamin.
1.1 Wyłączenie niepotrzebnych wtyczek
Przejdź do Wtyczki >> Zainstalowane wtyczki i wyłącz a potem usuń wszystko co się da i co nie jest kluczowe dla twojej strony internetowej. Przed usunięciem sprawdź czy strona poprawnie się wyświetla.
Jeżeli twoja strona jest skonstruowana tak, że wyłączenie wtyczki rozsypuje całą stronę to już wiesz, że twoją stronę wykonywały osoby, które nie potrafią programować a tworzenia stron nauczyli się na tygodniowym kursie 😉
1.2 Zmiana obecnej wersji PHP na najnowszą wersję PHP 8.1
PHP czyli język za pomocą, którego WordPress jest napisany ciągle ewoluuje i wykorzystuje coraz to nowsze technologie. PHP w wersji 7 jest kilkakrotnie bardziej wydajny co przekłada się na szybkość działania stron i aplikacji w jego środowisku.
W PHP 8 wydajność jest jeszcze lepsza za sprawą eliminowania martwego kodu (ang. Dead Code Elimination) oraz kompilacją JIT.
Aby aktywować PHP w wersji 8+ będziemy musieli skorzystać z panelu dostawcy hostingu lub skontaktować się z dostawcą. W niektórych hostingach może działać dyrektywa SetEnv umieszczana w .htaccess. Czytaj więcej jak zmienić wersję PHP na swoim hostingu. W serwerach VPS i dedykowanych będzie to kwestia kilku komend – aktualizacji pakietów, zainstalowania PHP w najnowszej wersji, aktywowania jej jako domyślnej i restartu serwera.
1.3 Wykorzystanie pamięci podręcznej w warstwie CMS
Ideę pamięci podręcznej wykorzystuje się uniwersalnie w wielu systemach komputerowych. Skorzystanie z Cache polega na na przeniesieniu części danych z pamięci o długim czasie dostępu (lub niższej przepustowości) do pamięci o krótszym czasie dostępu . W WordPressie technika ta jest bardzo efektywna ponieważ system ten częściej odczytuje dane, które z drugiej strony stosunkowo rzadko ulegają modyfikacji.
W tym celu (jak na ironię) zalecam zainstalowanie wtyczki WP Super Cache. Działa ona tak, że zapisuje zawczasu wyrenderowany kod HTML na dysku w postaci statycznego, gotowego dla przeglądarki pliku z kodem HTML. Potem usuwa go przy jakiejkolwiek aktualizacji i odtwarza ponownie taki plik. Zapobiega to sytuacji, że użytkownik otrzymuje nieaktualne dane. Posiadanie gotowych danych do przesłania użytkownikowi zwalnia system z odtwarzania treści na podstawie logiki i bazy danych przy każdej kolejnej wizycie. Zobacz jak zainstalować i skonfigurować WP-Super Cache.
1.4 Zmiana serwera i ulepszenia architektury
Zmiana serwera WordPress to w końcu nieunikniony krok, tym bardziej jeżeli naszą witrynę, która wykorzystuje system WordPress ogląda coraz większa liczba użytkowników. Pomóc może zarówno zwiększenie parametrów, samo partycjonowanie czyli izolacja serwisów, zmiana standardowego hostingu współdzielonego na hosting Cloud lub VPS.
Jeżeli ruch jest na tyle duży, że koszty hostingu zaczynają cię przerastać, szukaj usług skalowania i optymalizacji kosztów związanych z administracją i serwerem WWW. Dobrym i opłacalnym wyjściem może okazać się instalacja WordPressa w chmurze Google Cloud. Zobacz też czym się różni hosting WordPress od zwykłego hostingu i jakie są jego wymagania.
1.5 Automatyczne oczyszczenie bazy danych
WordPress przechowuje wiele archiwalnych wersji tych samych wpisów. Dane te zajmują cenna przestrzeń i wydłużają czas potrzebny na przygotowywanie odpowiedzi SQL. Wykorzystanie specjalnie przygotowanych funkcji do czyszczenia tych danych może dać bardzo dobre rezultaty z perspektywy zwiększenia wydajności. Czytaj więcej o optymalizacji bazy danych WordPress za pomocą wtyczki WP-Sweep.
1.6 Obsługa protokołu HTTP/2
Obsługa nowej wersji protokołu ma tak wiele korzyści, że miałem trudność w zaklasyfikowaniu kategorii do której ją przypisać. Włączenie nowej wersji HTTP czyli HTTP/2 jest w stanie zwiększyć wydajność połączenia i znacznie przyspieszyć działanie strony już na poziomie warstwy TCP. Włączenie HTTP/2 zwalnia z konieczności wykonywania żmudnych optymalizacji kodu CSS i JS polegających na minimalizowaniu ich ilości czy scalaniu we większe ładunki sieciowe.
Włączenie nowej wersji protokołu HTTP jest możliwe w serwerach dedykowanych, VPS, wystarczy pobrać moduł i dokonać drobnej modyfikacji w oprogramowaniu obsługującym zapytania HTTP. Wybrani dostawcy umożliwiają włączenie HTTP/2 w panelu w ramach usługi hostingu współdzielonego. Czytaj więcej o tym co to jest, jak włączyć i przetestować HTTP2.
1.7 Wykorzystanie pamięci In-Memory
To bardzo efektywna technika optymalizacji, która redukuje liczbę zapytań do bazy danych przez co skróceniu ulegają czasy TTFB w obrębie całego serwisu – nawet w panelu administracyjnym. Wykorzystanie pamięci memcached lub redis jest stosunkowo łatwe do skonfigurowania. Sprawdź osobny przewodnik: Jak zainstalować i włączyć memcached w WordPress.
2. Optymalizacja pod kątem front-endu (szybkości wczytywania)
Warto też mieć na uwadze, że wąskim gardłem może być powolne łącze klienta. Dlatego warto minimalizować ilość potrzebnego pasma do poprawnego wyświetlania się naszej strony.
W optymalizacji szybkościowej, przyspieszenie WordPressa polega na zminimalizowaniu wymagań pod kątem pasma potrzebnego do załadowania się strony i wyrenderowania, jak to PageSpeed mówi „czegoś znaczącego”.
2.1 Optymalizacja grafik
Optymalizacja zdjęć w WordPress jest dokładnie opisana w artykule: Optymalizacja zdjęć WordPress i nie ma sensu tutaj powtarzać wszystkich szczegółów i wyjaśnień.
W dużym skrócie: skalowanie zdjęć to krytyczna procedura mająca na celu minimalizację pasma potrzebnego do załadowania się strony po stronie klienta. Nieprawidłowy rozmiar grafik marnuje transfer zarówno hostingu jak i użytkownika.
Ustawienia dotyczące skalowania zdjęć udostępnia sam WordPress. W tym celu należy przejść w Ustawienia >> Media i w sekcji rozmiary obrazków podać odpowiednie wartości. Zmierz długość tekstu w artykule dla widoku desktop. Zrób zrzut ekranu bloga, wklej go sobie do Painta 😉 i zobacz jaki maksymalnie obrazek można wkleić u mnie jest to 750px.
PROTIP: Dokładniejszy wynik otrzymamy badając element kontenera treści w konsoli przeglądarki.
Tak otrzymaną wielkość ustawiasz dla „średniej wielkości”. Ładujemy jednak dużo większe zdjęcie, aby wysokiej jakości oryginał można było wykorzystać w przyszłych regeneracjach przy zmianie szablonu i wspomnianych ustawień mediów. Ważne jest aby przy redagowaniu treści wybierać tę właśnie wielkość w opcjach Gutenbierga):
Pamiętaj że na urządzeniach mobilnych o większym ppi, WordPress automatycznie wybierze większy rozmiar, aby zapewnić lepsze wrażenia wizualne. Jest to możliwe dzięki wbudowanej funkcji wp_calculate_image_srcset, dlatego nie trzeba zawyżać rozdzielczości w obawie przed tym że będą niewyraźnie na wyświetlaczach mobilnych.
2.2 Wybór formatu grafik i optymalizacja zdjęć
Dobór formatu to równie krytyczny krok. Proste grafiki zapisujemy w PNG skomplikowane w JPG albo w formatach nowej generacji np. WebP (uwaga, WebP nie będzie się wszystkim wyświetlał poprawnie).
WordPress nie wspiera natywnie grafik w formacie WebP. Aby wykorzystać format WebP, musimy wykorzystać jedną z dostępnych wtyczek. Jedną z najbardziej dopracowanych jest EWWW Image Optimizer. Jako jedyna jednocześnie pozwala zarówno na:
- serwowanie WebP za pomocą tagu picture,
- serwowanie grafik za pomocą przepisywania HTTP po stronie serwera (kompatybilne z NGINX i Apache),
- przy tym wszystkim potrafi wysyłać grafiki do bezstanowej pamięci (kompatybilna z WP Offload Image),
- bierze pod uwagę zdjęcia serwowane z CDN,
- pozwala dostosować współczynnik kompresji do zdjęć w różnych formatach,
- wykorzystuje atrybut srcset w kombinacji z tagami picture,
- regenerację zdjęć uwzględniającą nowe ustawienia i konwersję wcześniej załadowanych zdjęć do formatu WebP.
O optymalizacji zdjęć w środowisku WordPress pisałem w osobnym opracowaniu: Optymalizacja obrazów w WordPress.
2.3 Dostosowanie stopnia kompresji JPEG
Jeżeli nie chcemy korzystać z wtyczek do optymalizacji zdjęć, stopień kompresji JPEG można zmienić dopisując w pliku functions.php poniższy kod, gdzie 80 to współczynnik jakości JPEG:
add_filter('jpeg_quality', function($arg){return 80;});2.4 Wykorzystanie pamięci podręcznej HTTP
Pamięć podręczna HTTP powoduje, że raz ściągnięty plik z internetu może być przechowywane na dysku klienta i każdorazowe przyszłe żądania do niego mogą odbywać się bez pobierania go ponownie. Jest to możliwe za pomocą wykorzystania nagłówków Expires lub Cache-Control.
Jest to przydatna opcja w przypadku posiadania na stronie zasobów w postaci plików CSS, JS, zdjęć itp… Edycja pliku .htaccess w celu dodania nagłówków expires:
ExpiresActive On
ExpiresDefault "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType text/html "access plus 1 year"
ExpiresByType application/xhtml+xml "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"Czytaj więcej w artykule o Expires i Cache-Control – pamieć podręczna przeglądarki.
2.5 Wykorzystanie kompresji deflate / GZIP
Dane wysyłane z serwera zawierają hipertekst, który tak jak zwykły tekst może być skompresowany. Taka niewidoczna kompresja podczas transmisji może radykalnie zmniejszyć objętość danych a tym samym przyspieszyć wczytywanie się strony WordPress. Przeglądarka odbierając dane dekompresuje je i prezentuje we właściwy sposób.
Dopisujemy do .htaccess:
<ifModule mod_deflate.c> <filesMatch "\.(js|css)$"> SetOutputFilter DEFLATE </filesMatch> </ifModule>Czytaj więcej w artykule: kompresja Brotli / GZIP / deflate
2.6 Minimalizacja plików CSS, JS, HTML
Dane można zmniejszyć stosując minifikację. Jest to możliwe za pomocą specjalnych narzędzi online, lub automatyzując pracę za pomocą front-endowych narzędzi takich jak gulp. Jest też opcja aby wykorzystać wtyczkę Autoptimize a nawet po stronie serwera za pomocą modułu pagespeed. Czytaj więcej na czym polega minifikacja.
2.7 Opóźnienie stylów i skryptów w szablonie WordPress
Bardzo przydatna technika przyspieszenia wczytywania stron z dużym współczynnikiem odrzuceń (powyżej 50%), stron One-Page oraz Single Page Application.
Polega na wklejeniu zawartości kodu CSS w tagi <style> oraz skryptów JavaScript w tagi <script>. Można wykonać ręcznie lub przy pomocy Autoptimize. Czytaj więcej w moim teście wtyczki Autoptimize. Ona może pomóc także w kontekście następnego punktu.
Technika ta zmniejsza ilość zapytań HTTP, oczywiście poświęca możliwość zadziałania pamięci podręcznej ale w na stronach WordPress SPA (gdzie praktycznie nigdy nie doświadczamy „prawdziwego” odświeżenia strony) i stron z małym odsetkiem odsłon na wizytę i tak by nie doszło do jej wykorzystania.
2.8 Skorzystanie z technik lazy-load zdjęć i infinite-scroll
Synchroniczne ładowanie się wszystkich zdjęć i zasobów, nawet do bardzo nisko położonych (do których trzeba kilka razy przewinąć cały widok) marnuje łącze i blokuje szybkie pojawianie się treści położonych wyżej.
W najnowszych wersjach WordPress (od 5.6) odpowiedni mechanizm lazy-load działa domyślnie. Mechanizm ten jest włączany automatycznie. Wykorzystuje ona nowy atrybut loading=”lazy”, który jest wspierany w nowszych przeglądarkach. Zaletą tego rozwiązania jest zgodność z filozofią progressive enhancement. Dla starszych przeglądarek kod jest całkowicie zrozumiały i czysty (bo nie ma dodawania fallbacków za pomocą <noscript>) a funkcjonalność będzie działać poprawnie w nowych przeglądarkach.
W starszych wersjach WordPress musieliśmy znowu wykorzystywać wtyczki takie jak np. Autoptimize, która w trzeciej zakładce ustawień umożliwia włączyć bardzo dobrze działający mechanizm lazy-load. Obecnie nie ma sensu ich instalować i aktywować.
Zdjęcia pojawiają się z lekką animacją stopniowanego opacity, dobrze to wygląda a kod JavaScript odpowiedzialny za działanie mechanizmu jest bardzo lekki. Autoptimize analizuje także kod szablonu dlatego dokonuje opóźnionego ładowania dla zdjęć zapisanych „na sztywno” w szablonie. Dzieki tagom <noscript> zgodnie z filozofią graceful degradation zdjęcia będą się wyświetlać także przy wyłączonym JavaScript. Za pomocą wykluczeń można dodać nazwy plików lub klasy, które nie powinny być ładowane z opóźnieniem. Można tutaj dodać logo lub jakieś inne ważne i położone wysoko elementy graficzne.
Drugą propozycją jest oficjalna wtyczka twórców WordPressa o nazwie WP Lazy Loading.
Infinite-Scroll to mimo wielu podobieństw całkiem inny mechanizm, który wymaga stworzenia mechanizmu pobierającego poszczególne partie strony z serwera. Tego typu funkcjonalność trzeba stworzyć na etapie tworzenia szablonu strony lub dodać odpowiednia wtyczkę do w miarę poprawnie napisanego motywu.
Dla elementów video i iframe nadal trzeba przebudować stronę aby niewidoczne w pierwszym ekranie video i inne dodatki ładowały się z odpowiednim opóźnieniem. Dobrą praktyką jest załączanie video z atrybutem preload=”none” i ładowanie ich dopiero jak będą widoczne dla użytkownika. Dla elementów iframe można wykorzystać tradycyjną metodę z wykorzystaniem JavaScript lub natywnego atrybutu loading=”lazy”. Niewiadomo dlaczego WordPress domyślnie dodaje ten atrybut tylko do zdjęć. Jeżeli chcesz go dodać także do zamieszczonych w postach elementach iframe pobierz i włącz wtyczkę Lazy Loading oEmbed Iframes
autor: Weston Ruter.
Czytaj więcej na czym polega ta technika w artykule Lazy Load grafiki i wideo.
2.9 Cache zasobów za pomocą CDN
CDN jest zoptymalizowany pod szybkie serwowanie statycznych zawartości, eliminuje opóźnienia w działaniu strony. Jego system plików szybciej zwraca dane i jest w stanie skracać geograficzną odległość pomiędzy urządzeniami transmitującymi dane. Odciąża główny hosting i tym samym eliminuje powstanie wąskich gardeł.
Zobacz instrukcję krok po kroku jak zintegrować Google Cloud Storage z WordPressem i Google CDN. Aby przekonać się jak wazny jest ten punkt czytaj więcej jak działa i jakie są zalety CDN.
2.10 Usuwanie ciągów zapytania (ang. query string) z zasobów
Zarówno Expires, GZIP oraz poprawne funkcjonowanie CDN może być zaburzone poprzez dodawane przez WordPress tzw. ciągi zapytania, czyli dodatkowe zmienne dodawane do adresów URL aby przeciwdziałać działaniu pamięci podręcznej.
function pm_remove_script_version( $src ){
$parts = explode( '?ver', $src );
return $parts[0];
}
add_filter('script_loader_src','pm_remove_script_version', 15, 1 );
add_filter('style_loader_src','pm_remove_script_version', 15, 1 );
Funkcja ta usunie te wyrażenia z adresów i końcówki typu ?ver=1.1.5 zostaną usunięte. To pozwoli na poprawne funkcjonowanie pamięci podręcznej przeglądarki. Jeżeli nie chcemy edytować kodu, ponownie możemy wykorzystać Autoptimize.
3. Optymalizacja pod kątem wydajności kodu i krytycznej ścieżki renderowania
Szybkość polega nie tylko na tym jak szybko dane zostaną pobrane przez przeglądarkę. Istotne jest także to, jak bardzo skomplikowany będzie front-end i w jakim stopniu obciążamy możliwości obliczeniowe końcowego urządzenia.
3.1 Minimalizacja zasobów i skryptów
W tym punkcie chodzi o usuwanie nadmiarowych funkcjonalności, które nie są kluczowe dla naszej witryny. Priorytet muszą mieć krytyczne elementy (takie jak fonty, obrazki, wideo, skrypty, animacje itd..). Wystrzeganie się slajderów, wodotrysków, skomplikowanych animacji i SVG pozwoli przyspieszyć zarówno wczytywanie się strony WordPress oraz jej płynne działanie po załadowaniu.
3.2 Zastosowanie wszystkich praktyk z rozdziału 2
Minimalizacja objętości wszystkich zasobów (grafik, skryptów) odraczanie pobierania i odtwarzania multimediów wpływa na prędkość przetwarzania i renderowania, ponieważ zasoby nie mogą pobierać się jednocześnie. Skracając czas pobierania się zasobów do klienta końcowego skracamy jednocześnie cały proces rysowania strony w przeglądarce dlatego ten rozdziała jest szalenie istotny jeżeli zależy nam na wydajnej stronie WordPress.
3.3 Skrócenie łańcuchów żądań krytycznych
Dobrą praktyką jest dołączanie skryptów z atrybutem async lub defer i wklejać instrukcje w ciało strony. Czytaj więcej o tym w osobnym poradniku: Optymalizacja skryptów JS.
3.4 Usunięcie nadmiarowego kodu CSS
Aby wyeliminować przetwarzanie nadmiarowego kodu przez procesor renderujący należy usunąć nieużywany kod CSS oraz style dołączane przez wtyczki i dodatki.
3.5 Optymalizacja wczytywania fontów (czcionek)
Fonty blokują wyświetlenie się strony. Udoskonalenia w tym zakresie możemy wykonać ręcznie dodając instrukcje font-display do deklaracji fontów w kodzie CSS, dodać &display=swap do linków Google Fonts lub ponownie wykorzystać wtyczkę Autoptimize, która w dodatkach ma opcje optymalizujące pobieranie i wyświetlanie fontów. Czytaj więcej w artykule: optymalizacja fontów pod kątem wydajności strony internetowej.
3.6 Automatyzacja niektórych powyższych punktów
Cześć z przytoczonych punktów można wykonać automatycznie po stronie serwera z wykorzystaniem modułu PageSpeed. Minimalizuje i scala on pliki CSS i czuwa nad ich aktualizowaniem w przypadku jakichkolwiek zmian. Czytaj więcej w artykule o module PageSpeed, w którym dokonano krótkiego testu i w którym zamieszczono instrukcję jego instalacji.
3.7 Opóźnienie ładowanie skryptów analitycznych i widgetów
Jeżeli dodamy do idealnie zoptymalizowanej strony WordPress jakiś widget z zewnątrz (mowa tu np. o LiveChat, Hotjar lub Analytics) to od razu wyniki w PageSpeed Insights pójdą drastycznie w dół. Można wykonać bardzo prosty trik polegający na opóźnieniu inicjalizacji tyck skrytpów. Wystarczy użyć funkcji setTimeout() i ustawić odpowiednie opóźnienie np. 15 sekund. Strona będzie się wczytywać szybciej a wyniki powrócą do pierwotnych wartości. Nie dodawaj takich skryptów samodzielnie za pomocą pierwszej lepszej wtyczki.
3.8 Upraszczanie drzewa DOM
Wszystkie nasze wysiłki związane z optymalizowanie stylów i skryptów mogą iść na marne jeżeli ładujemy zbyt ciężko kod HTML, który zajmuje dużo pamięci RAM przeglądarce a drzewo DOM jest zbyt złożone. Tworząc szablon lub opracowując architekturę serwisu WordPress zadbaj aby elementów HTML nie było zbyt dużo i aby nie były nadmiernie zagnieżdżone. Tworząc menu pamiętaj, aby aby nie było w nim kilkadziesiąt elementów. W sidebarach ogranicz ilość widżetów. Ogranicz też ilość wyświetlanych postów lub produktów na jednej podstronie. Skorzystaj z paginacji aby równomiernie rozłożyć bogate treści twojego serwisu na wiele podstron. Jeżeli nie chcesz stosować tradycyjnej paginacji WordPress rozważ zastosowanie rozwiązania infinite-scroll.
Dodatek 1. Przyspieszanie sklepu WooCommerce
Jak wiadomo, sklepy WooCommerce korzystają z WordPressa, ponieważ WooCommerce to wtyczka rozszerzająca możliwości tego systemu do systemu sklepowego. Wszystkie techniki, które poruszyłem wcześniej można z powodzeniem zastosować w przypadku przyspieszania WooCommerce. Dodatkową techniką może być wyłączenie niepotrzebnych w danym momencie skryptów CSS i JS ponieważ większość skryptów z folderu woocommerce, które są ładowane do każdej podstrony są potrzebne na stronach typowo sklepowych (tj, strona produktu, listing produktów, koszyk i checkout). Aby osiągnąć takie zachowanie WordPressa dodajmy do pliku functions.php następujące linie:
function woocommerce-script-remover() {
if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
wp_dequeue_style( 'woocommerce_frontend_styles' );
wp_dequeue_style( 'woocommerce-general');
wp_deregister_script( 'selectWoo' );
}
}
add_action( 'wp_enqueue_scripts', ' woocommerce-script-remover', 99 );
Wewnątrz funkcji może się znaleźć więcej instrukcji, np.:wp_dequeue_style( 'woocommerce_frontend_styles’ );
- wp_dequeue_style( 'woocommerce-general’); i w nawiasie może być również: woocommerce-layout, woocommerce-smallscreen, woocommerce_chosen_styles, 'woocommerce_prettyPhoto_css.
- wp_dequeue_script( 'selectWoo’ );
- wp_deregister_script( 'selectWoo’ );
- wp_dequeue_script( 'wc-add-payment-method’ ); w nawiasie może być również: wc-lost-password, wc_price_slider, wc-single-product, wc-add-to-cart, wc-cart-fragments, wc-credit-card-form, wc-checkoutwc-add-to-cart-variation, wc-single-product, wc-cart, wc-chosen, woocommerce
Radzę pojedynczo sprawdzić każdą linijkę znoszącą skrypt ze stosu – jeżeli jakiś skrypt jest potrzebny ( ponieważ zauważymy, że niektóre funkcje przestają działać) należy go przywrócić. Trik polega na tym, że najpierw sprawdzamy czy klient znajduje się na stronie wymagającej funkcji sklepu. Dzięki temu strony główne, blog i inne strony będą odciążone z niepotrzebnego balastu dodatkowych skryptów, które są nam potrzebne tylko w panelu klienta lub na stronach produktowych. To świetne rozwiązanie w witrynach, które łączą stronę firmową, blog i sklep. Funkcje sklepu nie spowalniają podstron, które nie służą do obsługi sklepu.
Czy wydajność strony WordPress ma wpływ na jej pozycje?
Odpowiedź na to pytanie znajdziesz tutaj: czy szybkość i wydajność strony wpływa na pozycje?
Odpowiedz sobie w myślach na te pytania:
- Jak myślisz, po co powstają projekty takie jak Lighthouse, PageSpeed Insights, Podstawowe wskaźniki Internetowe, PWA?
- Czy słyszałeś o czymś takim jak Speed Update?
- Czego nie lubisz, kiedy korzystasz ze stron internetowych na komórce?
Nie będę odpowiadał, zostawiam to do osobistej refleksji. Jeżeli dotarłeś aż tutaj, to już wiesz dlaczego niektóre strony mimo bardzo dobrej treści i długiego stażu w indeksie są niżej w wyszukiwarce od młodszych stron z podobną lub nawet uboższą treścią. Brzmi to banalnie ale szybkość strony jest obecnie bardzo ważna.
Jeżeli masz inne zdanie i uważasz, że wyniki w analizatorach nie są ważne, bo według Ciebie liczy się „realna szybkość”, którą sam sobie mierzysz po swojemu lub preferujesz inne narzędzia do testowania – OK – racjonalizacja to jedna z technik radzenia sobie z wieloma problemami. Jeżeli w przyszłości przekonasz się, że warto jednak mieć szybszą stronę, doceń, że w tym artykule próbowałem Ci to podpowiedzieć.
Podsumowanie
Jak widać na szybkość działania strony WordPress wpływa wiele elementów. Działania wykonane w kierunku optymalizacji i przyspieszania witryny na pewno będą się opłacać i będą długofalowo przynosić pozytywne efekty, które będą niczym innym jak konsekwencją oficjalnych i prostych rad twórców wyszukiwarki oraz pozytywnych wrażeń użytkowników twojej witryny.
Jeżeli zainteresował cię ten artykuł i chcesz poznać zaawansowane techniki realnego polepszenia parametrów Core Web Vitals i wyników w PageSpeed Insights czytaj osobny poradnik dla WordPress Developerów: Optymalizacja WordPress dla Core Web Vitals. Zawarłem w nim wiele praktycznych przykładów jak podejść do optymalizacji wtyczek, skryptów CSS i JS na etapie tworzenia motywu, optymalizacji i konserwacjistrony WordPress.
Odpowiedz lub skomentuj