Core Web Vitals 2025 w praktyce: jak poprawić LCP, CLS i INP bez przepisywania całej strony

Core Web Vitals z „gwoździem programu” w postaci metryki INP (responsywność interakcji) to dziś codzienność właścicieli stron. Dobra wiadomość: większość zysków da się osiągnąć szybko, jeśli skupisz się na elementach, które naprawdę spowalniają witrynę.

Co mierzyć i gdzie zaglądać

Potrzebujesz danych polowych (użytkownicy w realnym świecie) i laboratoryjnych (symulacje). Zacznij od raportu jakości strony i danych o doświadczeniach użytkowników, a na etapie diagnozy wykonaj kilka testów syntetycznych. Patrz nie tylko na wynik ogólny, ale na rozkład urządzeń i łącza.

LCP: szybkie zwycięstwa

Najczęściej zawala hero – duże zdjęcie lub wideo. Zmień format na nowoczesny (WebP/AVIF), ustaw preload dla kluczowego obrazu, usuń zbędne warstwy sliderów. Krytyczne style dostarczaj inline (Critical CSS), a resztę ładuj asynchronicznie. Jeśli korzystasz z fontów zewnętrznych, prekonfiguruj ich pobieranie i włącz rezerwę systemową (font-display).

CLS: porządek w układzie

Rezerwuj w CSS miejsce na obrazy i widżety, nie dociągaj czcionek „po fakcie”, unikaj wstrzykiwania banerów i formularzy nad treścią. Jeśli musisz wstawić dynamiczny komponent (np. opinie), wypełnij go „szkieletem” o stałej wysokości.

INP: szybkie reakcje bez „mielenia” w tle

INP cierpi na nadmiar JavaScriptu. Usuń nieużywane biblioteki, dziel kod na mniejsze pakiety, inicjalizuj ciężkie skrypty dopiero po interakcji. W formularzach waliduj lokalnie i odraczaj integracje (np. z CRM) do momentu wysłania. W komponentach SPA korzystaj z odciążonego renderowania i kolejkowania zadań.

WordPress i spółka: praktyka

Odetnij wtyczki „do wszystkiego”. Zastąp pięć ciężkich jednym porządnym builderem lub – lepiej – lekkim motywem. Optymalizuj obrazki na etapie builda, generuj srcset, redukuj liczbę czcionek. CDN z kompresją i HTTP/2 lub HTTP/3 da często +20–30% do czasu pobierania.

Fronty JS: gdy masz SPA lub hybrydę

Włącz dzielenie kodu per trasa, ogranicz hydratację do widocznych obszarów, wyrzuć runtime’owe polifile dla starych przeglądarek (serwuj je warunkowo). Uważaj na analitykę – strzał w INP często robi kilka ciężkich tagów ładujących się synchronicznie.

Budżet wydajności i monitoring

Ustal limity (np. „JS do 170 kB, obraz hero do 200 kB”) i włącz test w CI/CD. Po wdrożeniu monitoruj zmiany – metryki potrafią się pogorszyć po dodaniu jednego widżetu. Reaguj szybko, zanim ucierpi konwersja.

Plan na 30 dni

Tydzień 1: audyt i szybkie poprawki obrazów/hero. Tydzień 2: porządki w JS i czcionkach. Tydzień 3: krytyczne CSS, preloading, CDN. Tydzień 4: stabilizacja układu i wdrożenie budżetu wydajności. Efekt: zauważalna poprawa w raportach i krótsza droga do konwersji.

Źródła

https://web.dev/vitals/ – przewodnik po Core Web Vitals, definicje i przykłady usprawnień.

https://web.dev/inp/ – szczegółowo o metryce INP i technikach poprawy responsywności interakcji.