Jak poprawić Core Web Vitals: LCP, INP i CLS po kolei

Core Web Vitals to trzy liczby, którymi Google opisuje to, jak stronę odbiera człowiek: jak szybko widzi treść, jak szybko strona reaguje na kliknięcie i czy nic mu nie ucieka spod palca. Poniżej każda z nich osobno, z przyczynami i kolejnością działań.

Progi, które trzeba znać

Google ocenia 75. percentyl realnych wizyt. Oznacza to, że trzy czwarte Twoich użytkowników musi mieścić się w progu, a nie że wystarczy jeden dobry pomiar na Twoim laptopie.

LCP: dlaczego treść pojawia się późno

LCP mierzy, kiedy pojawia się największy element widoczny na pierwszym ekranie. Prawie zawsze jest to zdjęcie w nagłówku albo duży blok tekstu. Przyczyny, w kolejności od najczęstszej:

1. 1Nieoptymalizowany obrazek w hero. Zdjęcie 3000 pikseli szerokości w formacie PNG, wyświetlane w kontenerze o szerokości 600 pikseli. Konwersja do WebP i dopasowanie rozmiaru potrafi ściąć LCP o ponad sekundę.
2. 2Obrazek ładowany leniwie, mimo że jest widoczny od razu. Lazy loading na elemencie hero opóźnia dokładnie to, co powinno pojawić się najszybciej.
3. 3Fonty blokujące renderowanie. Przeglądarka czeka z pokazaniem tekstu, aż pobierze krój. Rozwiązanie: font-display: swap i wczytywanie fontu z własnej domeny zamiast z zewnętrznego serwera.
4. 4Wolna odpowiedź serwera. Jeśli sam dokument HTML przychodzi po 800 ms, to zanim cokolwiek zacznie się rysować, przepaliłeś jedną trzecią budżetu.
5. 5Zbyt dużo CSS-a blokującego renderowanie, zwykle w postaci arkuszy z motywu, z którego używasz 5%.

INP: dlaczego strona się zacina po kliknięciu

INP zastąpiło dawne FID i jest znacznie surowsze, bo mierzy wszystkie interakcje w trakcie wizyty, a nie tylko pierwszą. Zła ocena INP prawie zawsze oznacza jedno: za dużo JavaScriptu wykonuje się w tym samym momencie, w którym użytkownik chce coś zrobić.

• Skrypty zewnętrzne: czaty, mapy, widżety opinii, piksele reklamowe. Każdy z nich to obcy kod działający w Twoim wątku. Ładuj je dopiero po interakcji albo po załadowaniu reszty strony.
• Wtyczki nakładające się funkcjonalnie. Dwa systemy popupów robiące to samo to podwójny koszt przy każdym kliknięciu.
• Ciężkie animacje uruchamiane przy przewijaniu, przeliczane na każdej klatce.
• Kod ładowany na wszystkich podstronach, choć potrzebny jest na jednej. Slider z galerii nie ma czego szukać na stronie kontaktowej.

CLS: dlaczego treść skacze

CLS to suma przesunięć układu w trakcie ładowania. Znasz to z sytuacji, gdy trafiasz palcem w przycisk, a w ostatniej chwili wskakuje nad nim baner i klikasz coś innego. Najczęstsze przyczyny są proste do usunięcia:

• Obrazki bez podanej szerokości i wysokości. Przeglądarka nie wie, ile miejsca zarezerwować, więc treść przeskakuje w chwili wczytania zdjęcia.
• Reklamy i osadzone elementy bez zarezerwowanego miejsca.
• Baner cookies albo pasek promocyjny wstrzykiwany na górę strony po jej wyrenderowaniu.
• Podmiana fontu zapasowego na docelowy o innych proporcjach, przez co tekst przelewa się do innej liczby linii.

Kolejność, w jakiej to robić

Optymalizacja ma bardzo nierówny zwrot. Jeśli masz ograniczony czas, rób to w tej kolejności:

1. 1Obrazki: format WebP lub AVIF, właściwe wymiary, wymuszone wczytanie obrazka z hero. Zwykle największy efekt przy najmniejszym nakładzie.
2. 2Usuń to, czego nie używasz. Wtyczki, skrypty, biblioteki dołożone kiedyś do jednego eksperymentu.
3. 3Przesuń skrypty firm trzecich tak, żeby ładowały się po treści.
4. 4Fonty: własny hosting, ograniczone odmiany, font-display: swap.
5. 5Wymiary obrazków i zarezerwowane miejsce na elementy dynamiczne.
6. 6Dopiero na końcu cache, CDN i optymalizacja serwera.

Dlaczego wynik w PageSpeed bywa mylący

PageSpeed Insights pokazuje dwie różne rzeczy naraz. Górna część to dane terenowe, czyli pomiary od realnych użytkowników Chrome z ostatnich 28 dni. Dolna to test laboratoryjny wykonany właśnie teraz, na symulowanym wolnym telefonie.

Te dwie sekcje potrafią się mocno rozjeżdżać. Widziałem strony z fatalnym wynikiem laboratoryjnym i dobrymi danymi terenowymi, bo realny ruch przychodził na szybkich urządzeniach. Działa to też w drugą stronę. Zawsze decyduj na podstawie danych terenowych, bo to one trafiają do oceny w wyszukiwarce. Wynik laboratoryjny traktuj jako wskazówkę, co naprawiać.

Druga pułapka to sam wynik liczbowy 0-100. To zbiorczy indeks metryk laboratoryjnych, a nie ocena Core Web Vitals. Można mieć 95 punktów i nadal nie zaliczać progu LCP u prawdziwych użytkowników.

Optymalizuj metryki, nie punktację. Punktacja jest dla poczucia satysfakcji, metryki dla użytkownika.

Ile to daje w praktyce

Nie obiecuję cudów w rankingu, bo szybkość jest jednym z wielu sygnałów i przy nierównej jakości treści nie przeważy szali. Realny zysk jest gdzie indziej: mniej osób zamyka stronę przed jej zobaczeniem. Przy płatnym ruchu to przekłada się wprost na koszt pozyskania klienta, bo płacisz za kliknięcia, z których część nigdy nie doczekała się widoku strony.