Core Web Vitals to trzy wskaźniki, którymi Google mierzy doświadczenie użytkownika: INP (reakcja na interakcję), LCP (wyświetlenie największego elementu) i CLS (stabilność układu). Progi są jasne: INP poniżej 200 ms, LCP poniżej 2,5 s, CLS poniżej 0,1. Oto checklista wdrożenia, którą stosujemy u każdego klienta.
TL;DR: Progi: INP poniżej 200 ms, LCP poniżej 2,5 s, CLS poniżej 0,1. Osiąga je: WebP z wymiarami, fonty lokalne, defer na skryptach, cache serwerowy i zero zbędnych wtyczek.
LCP: największy element ma być szybki
- Obraz hero w formacie WebP/AVIF, z prawidłowymi rozmiarami dla mobile i desktopu.
- Preload obrazu LCP w sekcji head, fonty z font-display: swap.
- Hosting i CDN: serwer w Europie, HTTP/2 lub HTTP/3, cache serwerowy włączony.
INP: reakcja na interakcję
- Mniej JavaScriptu: każdy skrypt, którego nie ma na stronie, jest najszybszym skryptem.
- Skrypty niekrytyczne ładowane defer albo lazy, wtyczki statystyczne odroczone po interakcji.
- Testuj na słabym telefonie, nie na laptopie developera. Różnica bywa dwukrotna.
CLS: nic nie skacze
- Każdy obraz i iframe ma zadeklarowane wymiary (width, height).
- Miejsce na reklamy i banery zarezerwowane przed załadowaniem treści.
- Fonty lokalne zamiast wymiany w locie, żeby tekst nie przestawiał się po załadowaniu.
Jak mierzyć
PageSpeed Insights dla szybkiego testu laboratoryjnego, raport Core Web Vitals w Search Console dla danych realnych użytkowników, a szczegóły techniczne w dokumentacji web.dev. Liczy się pole (dane z 28 dni), nie pojedynczy pomiar.
Najczęstsze błędy, które widujemy
Slider z pięcioma zdjęciami po 2 MB na pierwszym ekranie, chat wstawiony w headzie, pięć wtyzek statystycznych naraz, fonty ładowane z trzech CDN-ów. Każdy z tych błędów sam potrafi przesunąć LCP o sekundę.
Podsumowanie
Checklistę przechodzi się raz, porządnie, przy wdrożeniu. Dlatego w naszych stronach WordPress pod SEO i wdrożeniach Next.js zielone wskaźniki są warunkiem oddania projektu, nie dodatkiem. Masz czerwone liczby? Audyt jest bezpłatny.