Testujesz stronę i widzisz słabszy wynik niż wczoraj. Pierwszy odruch: doinstalować wtyczkę, włączyć kolejną opcję cache, usunąć animacje. Tylko że bez sprawdzenia przyczyny łatwo zmienić kilka rzeczy naraz i nadal nie wiedzieć, co pomogło.
Optymalizacja strony WordPress powinna zaczynać się od konkretnego problemu. Czy długo czekasz na pierwszy ekran? Czy menu reaguje z opóźnieniem? A może przycisk przesuwa się w chwili, gdy chcesz go nacisnąć? Każda z tych sytuacji prowadzi do trochę innej diagnozy.
Wynik PageSpeed jest wskazówką, nie opisem całej strony
Wynik pojedynczego testu może się różnić między uruchomieniami. Porównuj ten sam adres, profil urządzenia i wersję strony. Wykonaj kilka prób, zapisz rozrzut i dopiero wtedy oceń zmianę. Własny telefon także warto sprawdzić, ale nie zastępuje on pomiaru w ustalonych warunkach.
Oddziel wynik laboratoryjny od danych prawdziwych użytkowników. PageSpeed Insights pokazuje oba rodzaje informacji, jeśli dane terenowe są dostępne. Dokumentacja narzędzia wyjaśnia tę różnicę. Brak danych dla małej strony nie oznacza, że doświadczenie odwiedzających jest dobre albo złe.
Zielony wynik nie gwarantuje też miejsca w Google. Google opisuje Core Web Vitals jako część doświadczenia strony, a nie obietnicę wysokiej pozycji po uzyskaniu określonej punktacji.
Sprawdź, na co właściwie czeka użytkownik
Aktualne Core Web Vitals obejmują trzy różne aspekty: ładowanie głównej treści, reakcję na interakcje i stabilność układu. Odpowiadają im LCP, INP i CLS.
- LCP pomaga ocenić moment pojawienia się największego istotnego elementu treści. Dobry próg to do 2,5 sekundy.
- INP opisuje szybkość reakcji na interakcje. Dobry próg to do 200 milisekund.
- CLS mierzy nieoczekiwane przesunięcia układu. Dobry próg to do 0,1.
Ocenę danych terenowych odnosi się do 75. percentyla wizyt, z podziałem na urządzenia. To inna perspektywa niż jedna próba na szybkim laptopie. Same nazwy metryk nie wskazują jeszcze pliku, który trzeba zmienić.
Zacznij od ustalenia elementu LCP. Może nim być zdjęcie, ale także blok tekstu. W tym drugim przypadku przyczyną oczekiwania mogą być fonty lub renderowanie. Nie warto więc z góry uznawać wszystkich zdjęć za winowajcę.
Obrazy: właściwe ładowanie i zachowana jakość
Sprawdź, jaki plik faktycznie pobiera telefon i w jakiej ramce go wyświetla. Mechanizmy responsywnych obrazów pozwalają przeglądarce wybierać wariant odpowiedni do układu i rozdzielczości ekranu. Szczegóły opisuje poradnik MDN o obrazach responsywnych.
Nie zaczynaj jednak od hurtowego zmniejszania materiałów. Zdjęcia produktu i detale realizacji muszą pozostać użyteczne. Najpierw oceń obecne pliki, sposób dostarczania i oczekiwaną jakość. Ewentualne warianty przygotowuj osobno, zachowując oryginały i uzgadniając akceptowalny rezultat.
Ważne są także wymiary obrazu w kodzie, które pomagają zarezerwować miejsce. Dokumentacja optymalizacji LCP wskazuje, żeby nie opóźniać obrazu będącego elementem LCP przez lazy loading. Odkładanie pobierania materiałów niżej na stronie jest inną sytuacją niż opóźnianie głównej grafiki pierwszego ekranu.
Fonty i skrypty też potrafią zatrzymać pierwszy ekran
Przy fontach sprawdź liczbę odmian i rzeczywiście używane znaki. Zmiana musi zachować polskie litery oraz wygląd tekstu. Mniejszy transfer sam w sobie nie dowodzi jeszcze szybszego pojawienia się głównej treści; efekt trzeba zmierzyć.
W skryptach zacznij od listy funkcji: menu, formularz, animacje, analityka, zgody i integracje. Potem sprawdź, kiedy kod się uruchamia i ile pracy wykonuje. Optymalizacja nie powinna przypadkiem wyłączyć pomiaru, logowania czy kontaktu.
Nie każdą bibliotekę da się bezpiecznie usunąć. Może być zależnością potrzebnej wtyczki. Rozsądniejsze zlecenie brzmi: „ustal, co blokuje reakcję i przetestuj poprawkę”, zamiast „usuń wszystkie skrypty”.
Hosting i cache oceniaj razem z funkcjami strony
Jeśli długo trwa odpowiedź serwera, trzeba sprawdzić środowisko i sposób generowania treści. Cache może pomóc przy powtarzalnych widokach, ale jego konfiguracja powinna uwzględniać dane użytkownika i działanie sklepu.
Po wdrożeniu upewnij się, że odwiedzający dostaje nową wersję. Zapisz, które warstwy pamięci podręcznej wyczyszczono. Inaczej można porównywać nowy kod lokalnie ze starą wersją dostarczaną przez serwer i wyciągnąć błędny wniosek.
Jak odebrać optymalizację WordPressa?
Ustal punkt odniesienia, listę zmian i serię pomiarów po wdrożeniu. Poproś o wyjaśnienie, które wyniki się poprawiły i czego nie udało się potwierdzić. Obok metryk sprawdź menu, formularz, klawiaturę i zgody. Dla sklepu dodaj koszyk oraz płatność w uzgodnionym trybie testowym.
Chcesz zlecić diagnozę? Przygotuj adres problematycznej podstrony, opis zachowania i link do raportu. W wiadomości do AndrewDesign napisz także, które funkcje muszą zostać zachowane. Jeśli dopiero planujesz witrynę, zobacz zakres tworzenia stron WordPress - wymagania dotyczące szybkości i odbioru warto ustalić już na początku projektu.