Jak przyśpieszyć stronę WordPress

W ostatnich latach google wprowadziło tak wiele zmian w swoich algorytmach że ich podstawowe narzędzie do mierzenia szybkości strony internetowej stało się niezwykle ważne. Obecnie każda strona musi ładować się szybko i spełniać wiele wymogów które pozwolą wam uzyskać ponad 90 punktów oraz przejść pozytywnie przez Core Web Vitals.

W dużym uproszczeniu szybka strona to taka której rozmiar jest jak najmniejszy a kod na niej wykonywany nie opóźnia jej ładowania – po prostu wpisujesz adres url i w mgnieniu oka powinieneś zobaczyć stronę. Tak naprawdę rozchodzi się tu nie tylko o pozytywne doświadczenia użytkowników ale także a może przede wszystkim o pieniądze. Im szybsza będzie twoja strona tym teoretycznie będzie zajmować mniej miejsca oraz będzie konsumować mniej zasobów serwera – czyli będzie tańsza. 

Może wam się wydawać że nie ma to znaczenia ale jeśli pomyślicie ile na świecie istnieje stron internetowych to można sobie łatwo wyobrazić jak wiele można byłoby zaoszczędzić gdyby wszystkie zdjęcia skompresować np o 50% – oczywiście nigdy nie będzie tak kolorowo ale generalnie idzie to w dobrym kierunku.

Nie podejrzewałbym także największych firm na rynku o to że dbają o użytkowników czy o prąd potrzebny do napędzania serwerów, dbają o swój interes a jest nim także to jak szybko będą mogli wyświetlać wyniki wyszukiwania.

Sprawdzanie i poprawianie szybkości strony WordPress

Jak sprawdzić szybkość swojej strony? Jest kilka narzędzi, ale ja skupię się głównie na jednym czyli Page Speed Insights firmy Google oraz postaram się wytłumaczyć jak należy interpretować dane które otrzymacie po wykonaniu testu.

Test “szybkości” oparty jest na kalkulatorze który bierze pod uwagę 5 elementów. Pierwsze wyrenderowanie treści, indeks prędkości, największe wyrenderowanie treści, całkowity czas blokowania oraz skumulowanie przesunięcie układu. Brzmi strasznie ale wcale takie nie jest.

Źrodło

Wynik od 90 punktów traktowany jest jako dobry i powinniście dążyć do tego aby taki uzyskać. Wbrew pozorom nie jest to wcale takie trudne ale oczywiście wymaga doświadczenia i wiedzy programistycznej. 

1.Pierwsze wyrenderowanie treści

Zacznijmy od First Contentful Paint (FCP) czyli pierwszego wyrenderowania treści. Ten element jest skoncentrowany na użytkowniku i tym jak postrzega ładowanie strony. FCP mówi ile czasu musi minąć aby użytkownik mógł zobaczyć waszą stronę w pełnej okazałości i nie będzie brakować jej żadnych elementów. Maksymalny dopuszczalny przez google czas ładowania FCP to 1.8 sekundy. 

Przyczyn wolnego ładowania FCP jest wiele, postaram się opisać jak najwięcej abyście mogli się dowiedzieć jak poprawić ten parametr.

• Wyeliminuj zasoby blokujące renderowanie – chodzi tutaj o adresy url (i znajdujące się tam pliki css lub js) które muszą zostać załadowane aby strona wyświetliła się prawidłowo. Obecnie praktyka jest taka że powinniśmy w tych adresach url używać tylko zasobów krytycznych a całą resztę powinniśmy odroczyć oraz postarać się o to aby wszystko co nie jest używane na konkretnej stronie zostało usunięte. Jeśli na przykład ładujecie stronę główna na której nie ma żadnej karuzeli ale ładuje plik js z całą biblioteką ją obsługującą to dobrą praktyką jest usunięcie w całości takiej biblioteki i załadowanie jej tam gdzie rzeczywiście jest używana. Jeśli nie możecie jej usunąć możecie próbować odroczyć ładowanie takiego skryptu.
• Zmniejszanie css – należy zadbać o minifikacje css bo może to zmniejszyć rozmiar pliku drastycznie, obecnie większość dedykowanych serwerów WordPress lub wtyczek ma taką funkcjonalność wbudowaną więc wdrożenie tego rozwiązania nie powinno być żadnych problemem.
• Usuń nieużywany kod CSS – warto wdrożyć rozwiązanie które polega na ładowaniu tylko tego css’a który jest na konkretnej stronie wykorzystywany. niestety często jest to skomplikowany proces jeśli wasza strona nie została przygotowana z myślą o takim rozwiązaniu.
• Usuń nieużywany kod JavaScript – nieużywany kod javascript zawsze spowalnia stronę a dzieje się to przede wszystkim z tych dwóch powodów. Po pierwsze jeśli taki kod blokuje renderowanie strony to przeglądarka musi go pobrać, przeanalizować, skompilować oraz ocenić skrypt i to wszystko trwa. Wiele osób ustawia taki kod aby ładował się asynchronicznie co może pomóc ale nadal nie jest to najlepsze rozwiązanie. Taki kod konkuruje z innymi zasobami o przepustowość co wpływa na performance strony a na końcu i tak musi zostać załadowany. Przy urządzeniach mobilnych wysyłanie nieużywanego kodu przez sieć jest niepożądana ponieważ bardzo często użytkownicy nie mają nieograniczonej transmisji danych.
• Wcześniej połącz się z wymaganymi źródłami – możesz powiedzieć przeglądarce aby pobrała jakiś element z twojej strony z wyprzedzeniem co pozwoli na szybsze jej ładowanie. Należy uważać aby nie ładować zbyt wielu elementów używając tej metody ponieważ możecie uzyskać efekt odwrotny do zamierzonego.
• czas do pierwszego bajtu (TTFB) – to czas jaki wasz serwer potrzebuje aby wysłać pierwszy bajt danych po otrzymaniu żądania od przeglądarki. Nie jest to podstawowy wskaźnik internetowy więc jeśli będziecie mieli nieco niższy wynik nic złego się nie będzie dziać pod warunkiem że uzyskacie dobry wynik w innych wskaźnikach.
• Unikaj wielokrotnych przekierowań – tutaj powinno być to oczywiste, w przypadku wielu przekierowań strona będzie wolniejsza więc powinno być ich jak najmniej.
• Wstępnie wczytuj żądania klucza – możesz zadeklarować aby przeglądarka pobrała wcześniej konkretne pliki js lub css. W dużym uproszczeniu jeśli wcześniej załadujecie plik js którego wykonanie zajmie 200ms to tyle możecie zaoszczędzić używając opcji preload.
• Unikaj bardzo dużych ładunków sieciowych – to akurat bardzo ważne ponieważ mówi wprost aby nie do strony żadnych zasobów które zajmują bardzo dużo miejsca. Mogą to być olbrzymie pliki jpeg lub wielkie pliki css z masą niepotrzebnych rzeczy. Każde pobranie takiej strony kosztuje dużo więc nie ma żadnego sensu wyświetlać takiej strony użytkownikowi na dobrej pozycji w wyszukiwarce google ponieważ może zostać obciążony dodatkowymi kosztami.
• Wyświetlaj zasoby statyczne, korzystając z wydajnej zasady pamięci podręcznej – to nic innego jak odpowiednia konfiguracja systemu cache. Przede wszystkim ważna jest dyrektywa max-age które powie serwerowi jak długo ma przetrzymywać zasób w pamięci podręcznej. Jest jedna ważna rzecz o której należy pamiętać. Przy długiej dyrektywie max-age może być tak że użytkownicy nie zobaczą aktualizacji w plikach takich tak css lub js. Warto wtedy kompilować te pliki w odpowiedni sposób tak aby za każdym razem gdy dodacie jakąś zmianę miał unikalną nazwę. Może być to na przykład wersja.
• Unikaj nadmiernego rozmiaru DOM – kolejna ważna rzecz która ma naprawdę ogromny wpływ na to jak strona jest ładowana i jak radzą sobie z nią na przykład urządzenia mobilne. DOM to w dużym uproszczeniu struktura dokumentu HTML i bardzo ważnym jest aby ta struktura była jak najlepsza. Czyli nie posiadała wielu zagnieżdżeń, nie była zbyt duża. Często mniej doświadczone osoby tworzą bardzo “długie” strony na których dodatkowo osadzają kod javascript używający ogólnych selectorów i wtedy zamiast dostać się do jednego elementu sprawdzają na przykład wszystkie elementy <li> na całej stronie. Taki kod w połączeniu z dużym DOM jest w stanie naprawdę obciążyć przeglądarkę.
• Minimalizowanie głębokości żądań krytycznych – należy ograniczyć żądania sieciowe zasobów które są od siebie zależne. Tutaj warto ponownie sprawdzić czy nie można niektórych z tych zasobów ładować wcześniej lub asynchronicznie jeśli są to zasoby krytyczne oraz pomyśleć o tym aby zmniejszyć ich rozmiar. Często zmniejszenie rozmiaru nie jest możliwe poniewaz to zewnętrzna biblioteka a wtedy warto ponownie rozważyć czy nie warto zamiast biblioteki napisać czegoś mniejszego skrojonego pod waszą stronę.
• Zadbaj o to, żeby tekst był widoczny podczas wczytywania czcionek internetowych – niektóre czcionki potrafią zajmować bardzo dużo miejsca i zanim zostaną wczytane na stronie nie będzie widoczny żaden tekst co po załadowaniu sprawi że użytkownik zobaczy coś co nazywa się “przebłysk niewidocznego tekstu”. Ten problem bardzo łatwo rozwiązać. Należy zastosować font-display w miejscu gdzie deklarujecie czcionkę  wtedy przeglądarka użyję  czcionki systemowej zanim załadowana zostanie ta docelowa. Jest kilka opcji które możecie użyć także zachęcam do przeczytania tego artykułu.
• Maksymalna liczba próśb i niewielkie pliki przenoszenia – ostatni punkt z tej list jest w zasadzie podsumowanie wszystkich ważnych rzeczy, to liczba wysłanych żądań sieciowych oraz ilość danych przesłanych z serwera. Sprawa jest oczywista – ma być ich jak najmniej.

2.Indeks prędkości

Indeks prędkości mówi nam jak szybko na która chcecie wejść jest widoczna. Bardzo ciekawe jest to jak Lighthouse to sprawdza. Nagrywany zostaje film a następnie mierzone jest wizualne przechodzenie między klatkami. Na tej podstawie otrzymuje się wynik. Za wszystko odpowiada moduł Speedline Node.js. Wynik ten jest potem porównywany z rzeczywistymi danymi witryn z archiwum http. Aby poprawić ten wynik należy przede wszystkim zadbać o te 3 elementy (które omówiliśmy powyżej)

• Minimalizowanie pracy wątku głównego
• Skróć czas wykonywania JavaScriptu
• Zadbaj o to, aby tekst był widoczny podczas ładowania czcionki internetowej

3.Największe wyrenderowanie treści (LCP)

Największe wyrenderowanie treści to bardzo ważne narzędzie (waga 25%) które mierzy postrzeganą szybkość wczytywania. Przy dobrym wyniku LCP użytkownicy są zazwyczaj pewni tego że strona jest przydatna i dobrze działa.

Poniżej cytat z dokumentacji google “LCP raportuje czas renderowania największego obrazu, bloku tekstowego lub filmu widocznego w widocznym obszarze w odniesieniu do czasu, w którym użytkownik po raz pierwszy przeszedł na stronę.”

Dobrym wynikiem jest czas poniżej 2.5 sekundy co wydaje się być czymś prostym a w rzeczywistości wcale takim nie jest. Źle zaprojektowana i zaprogramowana strona może dać wam naprawde zły wynik. 

Niektóre elementy brane pod uwagę przy największym wyrenderowaniu treści to na przykład obrazy <img>, elementy <video>, elementy z obrazem tła wczytywane za pomocą url() elementy z przezroczystością 0  lub takie które zakrywają cały obszar i są uznawane za tło a w rzeczywistości nim nie są. Dlatego tak bardzo ważne jest aby przy projektowaniu strony już na etapie wireframe komunikować się w programistami lub osobami które specjalizują się w szybkim wczytywaniu strony.

4. Całkowity czas blokowania (TBT).

Łączny czas blokowania (TBT) to całkowity czas, podczas którego strona internetowa jest mniej responsywna, licząc od momentu, gdy pierwszy fragment treści pojawi się na ekranie (FCP), aż do momentu, gdy strona staje się w pełni interaktywna (TTI). 

Działa to tak: kiedy przeglądarka ładuje stronę, czasami trafia na tzw. „długie zadania”. Są to procesy, które trwają dłużej niż 50 milisekund. Kiedy takie zadanie jest uruchomione, przeglądarka nie może przerwać jego działania, więc jeśli użytkownik w tym czasie kliknie, przeglądarka będzie mogła odpowiedzieć dopiero po zakończeniu tego zadania. Jeśli takich długich zadań jest więcej, użytkownik może odczuć opóźnienie lub wolne działanie strony. Całkowity czas blokowania (TBT) to suma wszystkich opóźnień, które wynikają z tych długich zadań, i pokazuje, jak bardzo strona może wydawać się „zablokowana” podczas ładowania.

5. Skumulowane przesunięcie układu

Nieoczekiwane zmiany układu na stronie internetowej mogą być uciążliwe dla użytkowników. Na przykład, gdy czytają tekst i nagle przesunie się on w inne miejsce, mogą stracić wątek lub przypadkowo kliknąć niewłaściwy link lub przycisk. W niektórych przypadkach takie nagłe przemieszczenia mogą prowadzić do poważnych błędów, jak np. przypadkowe potwierdzenie dużego zamówienia.

Tego rodzaju problemy najczęściej występują, gdy strona ładuje się asynchronicznie (czyli elementy pojawiają się w różnym czasie) lub gdy nowe treści są dynamicznie dodawane przed już wyświetlanymi elementami. Przyczyną mogą być obrazy i filmy bez określonych rozmiarów, czcionki o zmienionych wymiarach lub reklamy, które nagle zmieniają swoje rozmiary.

Jak przyspieszyć stronę WordPress – Narzędzia

Aby twoja strona WordPress była szybka należy podejść do tematu kompleksowo i zadbać o wszystkie elementy strony które mogą być problematyczne. Już z sekcji powyżej mogliście przeczytać że na prędkość strony WordPress wpływ mają na przykład zbyt duże pliki css lub js. Lub zbyt duże zdjęcia. Czasem zdarza się też że sam kod javascript jest napisany źle i zanim strona będzie funkcjonalna użytkownik zdąży zrobić kawę i zjeść ciastko :).

Zacznijmy od plików css oraz js. Jest wiele wtyczek które pomogą wam w rozwiązaniu tego problemu. Myśle że najlepszym wyborem dla osób które nie zajmują się programowaniem będzie użycie wtyczki takiej jak wprocket. Ma w sobie w zasadzie wszystkie najważniejsze funkcję które pomoga wam uporać się z wieloma problemami. 

Możecie na przykład ustawić opóźnianie kodu javascript na stronie co pozwoli wam uzyskać świetne wyniki prędkości. Działa to tak że kod dodawany jest po pierwszej interakcji użytkownika (scroll, lub ruch kursorem). Ta metoda naprawde pomoże wam uzyskać lepszy wynik w google page speed.

Kolejnym elementem który jest niezwykle ważny to rozmiar zdjęć. Im strona więcej zajmuję tym więcej kosztuje wejście na nią więc musicie zadbać o to żeby zdjęcie były jak najmniejsze oraz żeby ładowały się z opóźnieniem nazywanym “lazy loading”.

Jak już uporacie się z plikami i kodem to musicie mieć świadomość że wybór odpowiedniego serwera jest także niezwykle ważny. My korzystamy z dedykowanych rozwiązań i najczęściej wybieramy firmę kinsta.com – która ma świetną ofertę dopasowaną do każdych potrzeb. Nie jest to oferta najtańsza ale warto. Po pierwsze mają świetny system cache który sprawi że wasza strona będzie naprawde dobrze działać. Kinsta zadba o to żebyście używali najnowszej wersji php, regularnie także informuje użytkowników jeśli o podatnościach we wtyczkach. Jeśli tylko jakaś okazuję się podatna na ataki systemy kinsta od razu wysyłają monit z prośbą o aktualizację lub tymczasowe wyłączenie wtyczki. Dodatkowo mają też w cenie CDN dzięki któremu wasza strona także będzie ładować się szybciej.

Jest jeszcze wiele innych rzeczy które można zrobić aby poprawić szybkość ładowania strony WordPress, przedstawię kilka z nich.

• zastosuj lady loading w ładowaniu komentarzy użytkowników
• ogranicz lub wyłącz rewizje postów
• usuń ładowanie google fonts
• Wyłącz i dostosuj Heartbeat API
• wyłącz emotki oraz dashicons

Podsumowanie

Jak widzicie przyśpieszanie strony WordPress nie jest wcale tak prostym zadaniem i często zależy od wielu czynników. Prawda jest taka że jeśli strona zostanie dobrze zaprojektowana i zaprogramowana to prace na jej szybkością powinny pójść szybko i sprawnie. Niestety nie zawsze tak jest i wtedy do akcji powinien wkroczyć programista który fachowo zajmie się jej optymalizacją. Źle użyte wtyczki mogą wyrządzić wiele szkód lub uniemożliwić użytkownikom chodzenia po waszej stronie lub co jeszcze gorsze dokonywania zakupów a wtedy oprócz strat wizerunkowych stracicie także pieniądze.