Jak poprawić słabe wyniki Core Web Vitals?

Ustal, który wskaźnik zawodzi, na jakim urządzeniu i w jakiej grupie stron; raport Core Web Vitals w Search Console pokazuje wszystkie trzy na podstawie rzeczywistych wizyt w Chrome. Następnie usuń przyczynę problemu z danym wskaźnikiem: w przypadku LCP chodzi o to, jak szybko docierają główny obraz lub tekst; w przypadku INP o długie zadania JavaScript, które opóźniają reakcję strony; w przypadku CLS o treści pojawiające się bez zarezerwowanego dla nich miejsca. Dane terenowe obejmują ostatnie 28 dni, więc skuteczność poprawki oceniaj w perspektywie miesiąca.

Krok 1: ustal, co zawodzi

1. Otwórz raport Core Web Vitals w Search Console i wybierz Mobile lub Desktop; obie wersje są oceniane osobno.
2. Otwórz jeden z wymienionych problemów, na przykład problem z LCP na urządzeniach mobilnych, aby zobaczyć grupę dotkniętych adresów URL i przykładowe adresy URL. Cała grupa ma jeden wspólny status, wynikający z najsłabszego wskaźnika.
3. Przepuść przykładowy adres URL przez PageSpeed Insights, aby zobaczyć dane terenowe tej strony obok testu laboratoryjnego, który pomoże w diagnozie.

Narzędzia laboratoryjne, takie jak Lighthouse, nie potrafią zmierzyć INP, ponieważ nikt nie wchodzi w interakcję ze stroną, dlatego raportują zamiast tego Total Blocking Time. W przypadku INP wiarygodnym wyznacznikiem jest pomiar na rzeczywistych użytkownikach.

Jak naprawić wolne LCP

Poradnik web.dev dotyczący optymalizacji LCP dzieli LCP na cztery części: czas odpowiedzi serwera, opóźnienie przed rozpoczęciem ładowania głównego zasobu, czas jego pobierania oraz opóźnienie przed jego wyrenderowaniem. Zacznij od największej z nich:

• Spraw, by obraz LCP był wykrywalny w początkowym kodzie HTML, zamiast wstawiać go przez JavaScript lub CSS, i nadaj mu atrybut fetchpriority="high".
• Nigdy nie ładuj obrazu LCP leniwie.
• Zmniejsz jego rozmiar: użyj odpowiednich wymiarów, nowoczesnego formatu i kompresji oraz skorzystaj z sieci CDN blisko odwiedzających.
• Usuń zasoby blokujące renderowanie: mniejsze arkusze stylów, brak synchronicznych skryptów w <head>, renderowanie głównej treści po stronie serwera.
• Przyspiesz odpowiedź serwera: ogranicz przekierowania i umożliwij buforowanie stron na brzegu sieci.

Jak naprawić słabe INP

Poradnik optymalizacji INP dzieli każdą interakcję na opóźnienie wejścia, czas przetwarzania i opóźnienie prezentacji:

• Opóźnienie wejścia: ogranicz JavaScript wykonywany podczas ładowania strony, aby główny wątek był wolny, gdy ktoś w coś stuknie.
• Czas przetwarzania: dziel długie procedury obsługi zdarzeń na mniejsze zadania i oddawaj sterowanie głównemu wątkowi; najpierw wykonaj widoczną aktualizację, a resztę odłóż na później.
• Opóźnienie prezentacji: utrzymuj niewielkie drzewo DOM, unikaj wymuszania układu przez odczytywanie stylów zaraz po ich zmianie i używaj content-visibility na długich stronach.

Jak naprawić wysokie CLS

Poradnik optymalizacji CLS wymienia typowe przyczyny i sposoby ich usunięcia:

• Obrazy i filmy bez podanych wymiarów: dodaj atrybuty width i height albo właściwość CSS aspect-ratio.
• Reklamy, osadzenia i elementy iframe: zarezerwuj dla nich miejsce w układzie, zanim się załadują.
• Treści wstawiane nad istniejącą zawartością: użyj zastępnika o odpowiednim rozmiarze albo wstawiaj nowe treści poniżej tego, co czyta odwiedzający.
• Czcionki internetowe: wczytuj z wyprzedzeniem te najważniejsze, aby tekst nie zmieniał układu w ostatniej chwili.
• Animacje: animuj transform, a nie właściwości takie jak top czy left.

Strony, które mogą korzystać z pamięci podręcznej wstecz/dalej (back/forward cache) w przeglądarce, unikają też przesunięć układu, gdy odwiedzający do nich wracają.

Krok 3: potwierdź poprawkę

Wdróż zmiany, a następnie otwórz problem w raporcie Core Web Vitals i rozpocznij walidację. Google monitoruje grupę przez 28 dni; walidacja nie wywołuje ponownego indeksowania ani niczego nie przyspiesza, a jedynie śledzi, czy problem zniknął. Ponieważ dane terenowe są liczone w oknie 28 dni, spodziewaj się stopniowej poprawy w raporcie. Co oznacza każdy ze wskaźników, dowiesz się z artykułu Co oznaczają LCP, INP i CLS?.

Jak pomaga AutoPSEO

Raport Core Web Vitals w AutoPSEO przedstawia na wykresie dane tygodniowe z Chrome UX Report z około sześciu miesięcy, dla całej witryny lub dla jednego adresu URL, na telefonie, komputerze lub tablecie. Dzięki temu widzisz tydzień, w którym poprawka zaczęła działać, albo tydzień, w którym wydanie nowej wersji pogorszyło sytuację, bez czekania na zamknięcie kolejnego 28-dniowego okna.