Jak czytać PageSpeed Insights: Core Web Vitals w prostym języku
Przetestowali Państwo swoją stronę internetową w PageSpeed Insights i widzą czerwoną liczbę, na przykład 45. Co to oznacza i jak poważny jest to problem? W tym artykule dowiedzą się Państwo, jak czytać raport, co mierzą trzy Core Web Vitals i co można samodzielnie poprawić.
Trzy pomiary
| Pomiar | Co mierzy | Dobrze | Wymaga poprawy | Źle |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Jak szybko największy fragment treści pojawia się na ekranie, często duże zdjęcie u góry | do 2,5 s | 2,5 do 4 s | powyżej 4 s |
| INP (Interaction to Next Paint) | Jak szybko strona reaguje na kliknięcie, dotknięcie lub wpisywanie tekstu | do 200 ms | 200 do 500 ms | powyżej 500 ms |
| CLS (Cumulative Layout Shift) | Jak bardzo strona przesuwa się podczas ładowania (wynik, nie czas) | do 0,1 | 0,1 do 0,25 | powyżej 0,25 |
Strona spełnia wymagania Core Web Vitals, jeśli co najmniej 75 procent odwiedzin osiąga dobry wynik we wszystkich trzech kategoriach, osobno dla urządzeń mobilnych i komputerów. Liczy się więc nie szybki komputer Państwa, lecz doświadczenie większości odwiedzających, także na starszym telefonie. W marcu 2024 roku INP zastąpiło starszy pomiar FID. Jeśli napotkają Państwo jeszcze FID, oznacza to, że informacja jest nieaktualna.
Dane terenowe i dane laboratoryjne
PageSpeed Insights pokazuje dwa rodzaje pomiarów, które często dają różne wyniki:
- Dane terenowe (u góry): pomiary od rzeczywistych odwiedzających korzystających z Chrome z ostatnich 28 dni. To one decydują o tym, czy strona spełnia wymagania Core Web Vitals. Jeśli strona ma zbyt mało odwiedzin, zobaczą Państwo dane dla całej witryny lub w ogóle brak danych terenowych.
- Dane laboratoryjne (poniżej): test z użyciem Lighthouse, który ładuje stronę jednorazowo na symulowanym telefonie średniej klasy i połączeniu o przeciętnej jakości. Stąd pochodzi liczba od 0 do 100. Lighthouse nie może zmierzyć INP, ponieważ nikt nie klika.
Proszę korzystać z danych laboratoryjnych, aby znaleźć przyczyny i od razu sprawdzić, czy wprowadzona poprawka pomaga. Proszę zacząć od karty Mobile: tam wyniki są zwykle gorsze, a Google przede wszystkim ocenia mobilną wersję strony.
Jak bardzo wpływa to na pozycję w Google?
Google podaje, że Core Web Vitals są brane pod uwagę przy ustalaniu rankingu. Jednak Google zawsze wyświetla najbardziej trafną treść, nawet jeśli ta strona nie jest najszybsza. Liczba od 0 do 100 pochodzi z testu laboratoryjnego i nie jest oceną ze strony Google; ta ocena wynika z danych terenowych. Dążenie do perfekcyjnego wyniku wyłącznie dla Google nie jest, według samego Google, najlepszym wykorzystaniem czasu. Proszę zadbać o to, aby znajdować się w zielonym lub przynajmniej pomarańczowym obszarze, zwłaszcza że odwiedzający rezygnują przy wolnej lub przesuwającej się stronie.
Co można poprawić na samej stronie
- Mniejsze obrazy. Zdjęcie o szerokości tysięcy pikseli wyświetlane w polu o szerokości 800 pikseli to najczęstsza przyczyna wolnego LCP. Proszę zmniejszać zdjęcia przed przesłaniem i stosować nowoczesny format, taki jak WebP lub AVIF.
- Szerokość i wysokość przy każdym obrazie. Bez atrybutów
widthiheightprzeglądarka nie wie, ile miejsca potrzebuje zdjęcie, przez co tekst przesuwa się po jego wczytaniu. To zwiększa CLS:<img src="bloemstuk.webp" width="800" height="600" alt="Bukiet ślubny z białymi różami">
- Nie ładować najważniejszego zdjęcia leniwie. Atrybut
loading="lazy"jest przydatny dla zdjęć znajdujących się niżej na stronie, ale nie dla zdjęcia widocznego od razu po otwarciu. W przeciwnym razie przeglądarka czeka właśnie na zdjęcie, które decyduje o wartości LCP. - Nie wstawiać niczego nad treścią w późniejszym momencie. Pasek dotyczący plików cookie, reklama lub widżet, który przesuwa stronę w dół, powoduje przesunięcie całej zawartości. Lepiej, aby taki pasek nakładał się na stronę, zamiast ją przesuwać.
- Mniej skryptów zewnętrznych. Słaby wynik INP niemal zawsze wynika z nadmiaru JavaScript: ciężkich motywów, suwaków, okien czatu i narzędzi śledzących. Proszę krytycznie przyjrzeć się każdej wtyczce lub osadzonej usłudze.
Co zależy od serwera
Wszystko zaczyna się od pierwszej reakcji serwera, czyli Time to First Byte (TTFB). Sam TTFB nie jest wskaźnikiem Core Web Vitals, ale przy wolnej pierwszej reakcji dobry wynik LCP jest niemal niemożliwy do osiągnięcia. Jako wartość orientacyjną przyjmuje się 0,8 sekundy lub mniej. Przyczyną bywa często brak pamięci podręcznej (cache) na stronie, zbyt mała moc obliczeniowa lub przekierowania. Serwer powinien również wysyłać pliki tekstowe w formie skompresowanej (kompresja gzip lub Brotli). Więcej o tym, jak podejść do strony serwerowej, dowiedzą się Państwo z artykułu Moja strona jest wolna lub zużywa zbyt dużo CPU: jak ją przyspieszyć oraz z instrukcji DirectAdmin, Moja strona jest wolna.
W AI Builder i WordPressie
Strona utworzona w AI Builder automatycznie ustawia szerokość i wysokość dla obrazów, których wymiary są znane, ładuje pierwsze zdjęcie na stronie od razu i z priorytetem, a pozostałe dopiero po pojawieniu się na ekranie, a przy publikacji tworzy mniejszą wersję dużych zdjęć. W WordPressie najbardziej pomaga wtyczka do pamięci podręcznej (cache) oraz zmniejszanie obrazów. Można o tym przeczytać w bezpłatnym kursie WordPress, w lekcjach Co spowalnia stronę i jak to zmierzyć? oraz Obrazy, PHP i inne sposoby na przyspieszenie strony.
Więcej informacji
- web.dev: Web Vitals (w języku angielskim)
- Informacje o PageSpeed Insights (w języku angielskim)
- Google: komfort użytkowania strony a wyszukiwarka Google (w języku angielskim)
- Google: raport Podstawowe wskaźniki internetowe