Core Web Vitals okiem developera: 8 rzeczy, które naprawdę liczą
Co poprawiamy najpierw, kiedy strona klienta ładuje się dłużej niż 4 sekundy.
Większość audytów wydajności kończy się listą 40 „błędów" z Lighthouse, z których połowa nie ma wpływu na realnego użytkownika. Kiedy strona klienta ładuje się 4+ sekundy, zaczynamy od rzeczy, które faktycznie ruszają wskaźniki.
LCP — największy element widoczny na starcie
Najczęstszy winowajca to niezoptymalizowany obrazek hero albo web font blokujący render. Zaczynamy zawsze tutaj, bo LCP najmocniej koreluje z odczuwalną szybkością.
- Obrazek hero w nowoczesnym formacie (AVIF/WebP) i z
priority. - Wstępne ładowanie krytycznego fontu, reszta z
font-display: swap. - Zero ciężkich bibliotek na ścieżce krytycznej.
CLS — przeskakujący layout
Layout, który „skacze" podczas ładowania, frustruje i psuje CLS. Rozwiązanie jest nudne, ale skuteczne: rezerwuj miejsce z góry — wymiary obrazków, miejsce na reklamy, brak treści wstrzykiwanej nad istniejącą.
INP — reakcja na kliknięcie
INP zastąpił FID i jest znacznie bardziej wymagający. Tu wygrywa ograniczanie JavaScriptu: mniej kodu na starcie, dzielenie długich zadań, brak ciężkich handlerów na każde kliknięcie.
Czego nie robić
Nie goń za wynikiem 100/100 w Lighthouse kosztem realnych funkcji. Zielone Core Web Vitals w terenie (dane z prawdziwych użytkowników w Search Console) są warte więcej niż perfekcyjny wynik w laboratorium.
Agencja marketingowa z Katowice. 60+ projektów, od 2018 roku. Piszemy wyłącznie o tym, co realnie testujemy z klientami i na własnym ruchu.