BLOG / CORE WEB VITALS
Core Web Vitals — co poprawić?
Core Web Vitals to wskaźniki pokazujące, jak szybko strona wyświetla główną treść, reaguje na kliknięcia i czy jej elementy nie przesuwają się podczas ładowania. LCP dotyczy treści, INP reakcji, a CLS stabilności układu. Każdy z nich wymaga osobnej diagnozy.
TRZY WSKAŹNIKI
LCP, INP i CLS odpowiadają na różne pytania
| Metryka | Dobry wynik | Co opisuje |
|---|---|---|
| LCP | ≤ 2,5 s | Wyświetlenie największego elementu treści |
| INP | ≤ 200 ms | Responsywność interakcji |
| CLS | ≤ 0,1 | Stabilność układu |
LCP — kiedy widać główną treść?
Najczęściej dotyczy dużego zdjęcia, bannera albo nagłówka w pierwszym widoku. Liczy się pobranie zasobu, odpowiedź serwera i kolejność renderowania.
INP — jak szybko strona reaguje?
Ocenia czas od kliknięcia, dotknięcia lub użycia klawiatury do kolejnego wyświetlenia klatki z reakcją interfejsu. Długie zadania JavaScriptu mogą tę reakcję opóźniać.
CLS — czy układ pozostaje stabilny?
Wysoki wynik oznacza nieoczekiwane przesunięcia, na przykład po doładowaniu obrazu, reklamy, fontu albo dynamicznego komunikatu.
Oceniaj 75. percentyl danych użytkowników, osobno dla telefonów i komputerów. Pojedyncza sesja laboratoryjna nie potwierdza spełnienia Core Web Vitals przez stronę.
POMIAR
Dane laboratoryjne i rzeczywiste nie muszą być takie same
Lighthouse wykonuje kontrolowany test na konkretnym urządzeniu i połączeniu. Pomaga powtarzać pomiary oraz sprawdzać kolejność i czas pobierania zasobów strony. Dane terenowe pochodzą z rzeczywistych wizyt i obejmują różne telefony, sieci oraz zachowania.
Jeśli raport pokazuje inną wartość w laboratorium i inną w danych użytkowników, nie oznacza to błędu. Trzeba sprawdzić zakres czasu, konkretny URL oraz warunki obu źródeł.
| Pomiar | Odczyt | Interpretacja |
|---|---|---|
| LCP homepage desktop | 1,36 s | Dotyczył początkowego HTML, przed montowaniem canvas |
| Pojawienie canvas | Około 4,53 s | Montaż elementu, nie potwierdzenie gotowości GPU |
Źródło: audyt lokalnego buildu sprzed poprawek. Chromium, viewport 1440 × 900, CPU ×4, opóźnienie 150 ms, pobieranie 200 000 B/s, cache wyłączony. Są to próby laboratoryjne, nie CrUX, INP całej populacji ani pomiar publicznego hostingu.
LCP
Najpierw znajdź element, który jest mierzony
Optymalizacja niewłaściwego elementu nie poprawi wyniku. LCP może różnić się między urządzeniem mobilnym, desktopem i poszczególnymi typami podstron.
- zmniejsz czas odpowiedzi serwera i wykorzystaj cache
- nie ukrywaj ważnego obrazu za JavaScriptem lub zbędnym lazy loadingiem
- użyj właściwego formatu, wymiarów, srcset i sizes
- ogranicz zasoby blokujące renderowanie pierwszego widoku
- preload stosuj tylko do naprawdę krytycznego zasobu
INP
Strona musi mieć czas na reakcję
Duże paczki JavaScriptu, ciężkie komponenty, wiele nasłuchiwaczy i zewnętrzne skrypty mogą blokować reakcję po kliknięciu. Kod warto dzielić, ładować wtedy, gdy jest potrzebny, i ograniczać pracę wykonywaną w jednej długiej porcji.
W aplikacjach trzeba też sprawdzić, czy kliknięcie nie uruchamia niepotrzebnych renderów dużej części drzewa albo kosztownego przeliczania danych.
CLS
Zarezerwuj miejsce zanim treść się pojawi
- podawaj wymiary obrazów i materiałów wideo
- rezerwuj przestrzeń na bannery, formularze i komunikaty
- dobieraj zapasowy krój pisma o podobnych wymiarach liter
- nie wstawiaj nowej treści nad elementem, z którego użytkownik już korzysta
- animuj transform zamiast właściwości zmieniających layout
PRIORYTETY
Jak ułożyć pracę nad wydajnością?
Wybierz ważne adresy
Sprawdź osobno strony, które mają inny szablon lub najwięcej ruchu i konwersji.
Znajdź wspólną przyczynę
Motyw, nagłówek, font albo skrypt analityczny może pogarszać kilka typów stron jednocześnie.
Napraw największe ryzyko
Zacznij od elementu, który wpływa na użytkowników i ma mierzalny koszt, a nie od najłatwiejszego punktu raportu.
Kontroluj regresje
Po wdrożeniu sprawdź funkcje oraz wyniki i powtarzaj pomiar po kolejnych zmianach w serwisie.
FAQ
Pytania o Core Web Vitals
Czy Core Web Vitals wpływają na SEO?
Są jednym z wielu sygnałów dotyczących jakości strony. Nie zastępują trafnej treści, dobrej architektury informacji ani pozostałych podstaw technicznego SEO.
Czy zielony wynik gwarantuje szybką stronę?
Nie w każdej sytuacji. Trzeba sprawdzić różne podstrony, urządzenia i zachowania. Strona może dobrze przejść test pierwszego widoku, a później wolno reagować w ważnym procesie.
Jak często kontrolować wyniki?
Po większych wdrożeniach, zmianie motywu, dodaniu integracji i regularnie w utrzymywanym serwisie. Dane rzeczywiste potrzebują czasu, dlatego warto łączyć je z testami laboratoryjnymi.
POTRZEBUJESZ POMOCY?
Sprawdźmy, czego naprawdę potrzebuje Twój projekt.
Opisz stronę, aplikację lub problem techniczny. Odpowiem konkretnie i zaproponuję sensowny następny krok.