Przewodnik po Core Web Vitals 2026 - Wszystko, co musisz wiedzieć

Popraw LCP tak, aby był krótszy niż 2,5 sekundy już dziś. Dla Core Web Vitals 2025 zacznij od precyzyjnego audytu, który wskaże największe elementy treści i zmapuje ich ścieżkę ładowania od serwera do renderowania. Obecnie mierz LCP, CLS i INP przy użyciu monitoringu rzeczywistych użytkowników równolegle z syntetycznymi testami, aby uchwycić zarówno rzeczywiste prędkości, jak i przypadki brzegowe, co sprawi, że Twój plan optymalizacji będzie oparty na rzeczywistości.

Przyjmij holistyczny plan, który obejmuje optymalizację obrazów, ładowanie skryptów, dostarczanie CSS i wydajność serwera. To podejście jest zoptymalizowane, aby zredukować blokowanie renderowania i zniwelować negatywnie wpływające opóźnienia, pomagając szybciej osiągnąć cele i poprawić satysfakcję użytkowników.

Aby utrzymać стабильность i przewidywalne metryki, używaj zasobów z otwartymi licencjami, aby uprościć buforowanie i routing CDN w różnych regionach. To podejście zapewnia szybkie dostarczanie danych przy nagłym wzroście ruchu i zmniejsza zakłócenia w procesie pozyskiwania, które spowalniają wydania, wspierając стабильность w różnych środowiskach.

Skoncentruj się na zmianach opartych na danych: używaj responsywnych formatów, takich jak formaty obrazów AVIF/WebP, odpowiednich wskazówek dotyczących rozmiaru i leniwego ładowania treści poza ekranem. To redukuje CLS i zachowuje układ, wzmacniając relację między wydajnością a konwersjami, co ma znaczenie dla retencji i przychodów.

W zadaniach szczególnie skoncentruj się na krytycznej ścieżce renderowania: wstępnie załaduj kluczowe czcionki, wstaw w kodzie krytyczny CSS, odłóż niekrytyczny JavaScript i monitoruj wpływ za pomocą lekkiego skryptu analitycznego. To podejście, które zapewnia spójność planu dla zespołów, przynosi wymierne korzyści.

Otwórz swój proces na przejrzysty, oparty na danych cykl: ustaw cel, monitoruj postępy i iteruj. Zacznij od 30-dniowego sprintu i udokumentuj zmiany, a następnie zaplanuj stopniowe wdrażanie na produkcję ze ścieżką wycofywania w przypadku regresji.

Co mierzy CLS w 2025 roku i jak obliczany jest wynik na różnych urządzeniach

Zarezerwuj miejsce na elementy wizualne i osadzone, aby zapobiec CLS. Użyj współczynnika proporcji lub jawnej wysokości/szerokości dla obrazów i banerów. Unikaj wstrzykiwania nowej treści nad istniejącą treścią po początkowym malowaniu; jeśli musisz to zrobić, użyj stabilnego elementu zastępczego. Gdy dynamiczna treść się aktualizuje, zastąp ją w miejscu, zamiast przesuwać układ. Odroczyć niekrytyczne skrypty, zwłaszcza widżety stron trzecich, aby zmniejszyć obciążenie wątku głównego. W przypadku witryn saas napraw jedno, najbardziej widoczne miejsce na stronie, aby zachować stabilność podczas ładowania treści. Konkretne kroki obejmują rezerwowanie miejsc reklamowych o ustalonych wymiarach, używanie ekranów szkieletowych, ustawianie klatek plakatu dla filmów i włączanie leniwego ładowania dla elementów wizualnych poza ekranem. Zmniejsza to przepełnienie, zachowuje przestrzeń i poprawia responsywność dla użytkowników na różnych urządzeniach.

Co mierzy CLS w 2025 roku

Metryka CLS śledzi stabilność wizualną, obserwując nieoczekiwane przesunięcia układu, które występują podczas ładowania i interakcji ze stroną. Każde przesunięcie ma współczynnik wpływu (część viewportu, na który wpływa) i współczynnik odległości (jak daleko element się przesunął). Przesunięcia są grupowane w klastry; w klastrze, największy wynik przesunięcia jest wliczany do CLS, a końcowy CLS jest sumą tych największych wartości w klastrach. Standardowe progi pozostają: dobry ≤ 0,1, wymaga poprawy 0,1–0,25, słaby > 0,25. W 2025 roku obliczenia pozostają takie same, ale obserwowane wartości różnią się w zależności od urządzenia: obszary robocze urządzeń mobilnych są mniejsze, a interakcje w większym stopniu oparte na palcach, podczas gdy komputery stacjonarne oferują więcej miejsca na przesuwanie treści, zanim stanie się to zauważalne. Rzeczą, którą należy zoptymalizować, są stabilne elementy wizualne dla hero, banerów i treści osadzonych, z ustaloną przestrzenią i przewidywalną kolejnością ładowania. Jeśli baner lub film zostanie zastąpiony po pomalowaniu, to pojedyncze przesunięcie może przerodzić się w wyższy CLS, więc elementy zastępcze mają znaczenie.

Jak obliczany jest wynik na różnych urządzeniach

Na różnych urządzeniach, wynik CLS wykorzystuje ten sam silnik, jednak wyniki odzwierciedlają przestrzeń urządzenia, gęstość wyświetlania i warunki sieciowe. Na urządzeniach mobilnych CLS może wzrosnąć, gdy treść przesuwa się podczas zamiany czcionek, ładowania obrazów lub wstrzykiwania reklam; na komputerach stacjonarnych przesunięcia często dotyczą dużych banerów lub dynamicznych widżetów, które przepełniają swoje kontenery. Aby uzyskać porównywalne wyniki, testuj na reprezentatywnych szerokościach, od małych telefonów po duże komputery stacjonarne i zbieraj dane z pola od rzeczywistych użytkowników. Uwzględnij miejsce na filmy i ramki iframe, ogranicz kontenery, aby uniknąć przepełnienia i odrocz powolne ładowanie zasobów. W przypadku skryptów stron trzecich i paneli saas izoluj i odrocz ich ładowanie lub załaduj je po krytycznej treści, aby zminimalizować niestabilność układu. Rezultatem jest bardziej responsywne, stabilne doświadczenie, które odpowiada oczekiwaniom użytkowników na różnych urządzeniach i jest zgodne ze standardowym pomiarem Core Web Vitals, bez dodawania niepotrzebnego obciążenia dla silnika. To nie znaczy, że ignorujesz inne wskaźniki; oznacza to, że CLS jest adresowany za pomocą precyzyjnych poprawek, uwzględniających urządzenie, które pozostają widoczne zarówno dla użytkowników, jak i dla wyszukiwarek.

Zlokalizuj punkty zapalne CLS za pomocą szybkich, przydatnych kontroli na dowolnej stronie

Zidentyfikuj najważniejszy punkt zapalny CLS na stronie internetowej i rozpocznij test 1-próbny, aby zweryfikować wpływ ukierunkowanej poprawki; użyj pulpitu nawigacyjnego aby pokazać udział każdego elementu i skup się na najlepszych 2–4 sprawcach.

Kliknij prawym przyciskiem myszy podejrzany element i sprawdź jego model pudełkowy, a następnie porównaj jego rozmiar przed i po załadowaniu, aby zobaczyć, czy przesunięcie układu jest spowodowane przez obraz, ramkę iframe lub dynamiczne wstrzykiwanie. Jeśli rozmiar się zmieni, wiesz, że dotykasz rzeczy, która powoduje skok CLS.

W przypadku konkretnych kontroli, przyjrzyj się obrazom bez jawnej szerokości/wysokości, reklamom lub osadzeniom bez zarezerwowanej przestrzeni, późno ładującym się czcionkom internetowym i treści wstrzykiwanej nad istniejącą treścią; każdy z nich może wywołać problemy, które negatywnie wpływają na wskaźniki CLS.

Wykorzystaj swoje narzędzia, aby pokazać udział CLS według elementu, a następnie zmapuj je do ich zachowania na stronie; ta technika pomaga skupić się poza zgadywaniem i dostosować poprawki, które pasują do ich wzorców. Użyj wykresu, aby porównać różne strony i zidentyfikować wzorce wspólne dla słabych doświadczeń w różnych sekcjach witryny.

Wdróż najpierw praktyczne poprawki: przypisz jawne wymiary lub współczynnik proporcji do multimediów, zarezerwuj miejsce na miejsca reklamowe, wstępnie załaduj kluczowe czcionki i odrocz niekrytyczne skrypty; zminimalizuj CSS i JavaScript, aby zapobiec długim zadaniom, które opóźniają malowanie. Utrzymuje to kod w czystości i skraca czas oczekiwania na stabilność układu.

Eksperymentuj z jasnym przepływem pracy: uruchom próbę po każdej zmianie, poczekaj na stabilny odczyt CLS i sprawdź, czy poprawa utrzymuje się w różnych warunkach sieciowych i na różnych urządzeniach; udokumentuj wyniki w prostej tabeli, aby ich zespół mógł powielić zyski.

Skanuj w poszukiwaniu zagrożeń malware, które mogłyby wstrzykiwać przesuwającą się treść z widżetów stron trzecich; sprawdź źródła i odrzuć wszelkie ryzykowne skrypty, które zawyżają przesunięcia układu, a następnie zweryfikuj poprawki w panelu nawigacyjnym.

Podczas поиска, użyj ukierunkowanych sygnałów, aby szybko zlokalizować punkty zapalne i zweryfikować poprawki w kontrolowanym środowisku; to zdyscyplinowane podejście pomaga dokładnie wiedzieć, co dostosować i co zachować, utrzymując szybkość i przewidywalność strony internetowej.

Punkt zapalny	Co sprawdzić	Wpływ	Działanie	Notatki
Obrazy bez wymiarów	Rozmiar zmienia się podczas ładowania obrazów	Wysoki CLS	Ustaw szerokość/wysokość lub użyj współczynnika proporcji; podaj rozmiar naturalny	Najlepiej wstawić w kodzie HTML z atrybutami
Reklamy i osadzenia	Brak zarezerwowanej przestrzeni na dynamiczną treść	Duże przesunięcia nad linią załamania	Zarezerwuj przestrzeń z min-height lub CSS; ładuj z async	Testuj na różnych układach
Ładowanie czcionek	Późna zamiana czcionki zmienia metryki	Umiarkowany CLS	Użyj font-display: swap; preconnect do hostów czcionek	Wykorzystuje szybsze renderowanie tekstu
Dynamiczne treści nad linią załamania	Nowa treść przesuwa istniejący układ	Negatywny wpływ	Wstępnie przydziel przestrzeń; wstawiaj poniżej krytycznych ścieżek	Wypróbuj mniejszy początkowy DOM
Widżety/ramki iframe stron trzecich	Treść zewnętrzna przesuwa układ	Wysoki CLS	Izoluj z ustalonym rozmiarem; leniwie ładuj, gdy to możliwe	Monitoruj według źródła
Animacje CSS, które wpływają na układ	Animowanie właściwości układu	Skoki w CLS	Animuj przekształcenia zamiast właściwości układu; uprość	Sprawdź za pomocą narzędzi perf

Praktyczne poprawki: ładowanie obrazów, osadzanie wideo i określanie rozmiaru zasobów

Wstępnie załaduj najbardziej widoczny obraz i plakat wideo, a następnie leniwie załaduj resztę, aby zmniejszyć zmarnowaną przepustowość i poprawić postrzegane ładowanie dla odwiedzających.

Te poprawki mają znaczenie dla elementów, które wpływają na postrzeganie użytkownika.

1. Obrazy

   • Podawaj nowoczesne formaty (WebP/AVIF) i konwertuj w oparciu o obsługę urządzenia, aby zmniejszyć rozmiary plików bez utraty jakości.
   • Dostarczaj responsywne źródła z srcset i sizes; podaj jawne wymiary wyświetlania (width/height) lub współczynnik proporcji, aby miejsce było zarezerwowane, a CLS zminimalizowany.
   • Zastosuj leniwe ładowanie dla obrazów poza ekranem (loading="lazy") i używaj lekkich elementów zastępczych, aby strona była wizualnie stabilna podczas ładowania zasobów.
   • Kompresuj i buforuj: włącz gzip na zasobach tekstowych i polegaj na CDN, aby skrócić adresy URL i opóźnienia na brzegach sieci, co przyspiesza pobieranie danych w różnych lokalizacjach.

   Zwykle daje to mniejsze ładunki i szybsze czasy ładowania dla odwiedzających.

   Monitoruj za pomocą narzędzi deweloperskich: sprawdź żądania obrazów, time-to-first-byte i wodospady sieciowe, aby dowiedzieć się, gdzie gromadzą się fragmenty czasu i bajtów, a następnie dostosuj budżety i formaty.

2. Osadzenia wideo

   • Preferuj osadzenia, które przesyłają strumieniowo w kawałkach (HLS/DASH) i hostuj w CDN, aby obsługiwać tylko to, co jest potrzebne dla bieżącego urządzenia i połączenia.
   • Podaj obraz plakatu i jawne wymiary, aby umieścić osadzenie bez przepełnienia; wyłącz autoplay i ustaw playsinline i muted, aby uszanować doświadczenie użytkownika.
   • Włącz leniwe ładowanie na ramkach iframe i unikaj automatycznego odtwarzania dźwięku; zachowaj lekkość początkowego osadzenia i ładuj dodatkową treść podczas interakcji z użytkownikiem.
   • Zaoferuj prostszą opcję awaryjną dla urządzeń o ograniczonej przepustowości i porównaj wydajność osadzeń, aby dowiedzieć się, które źródło zapewnia najlepsze wrażenia dla większości odwiedzających.

3. Określanie rozmiaru zasobów i dostarczanie

   • Dziel kod JavaScript i ładuj niekrytyczne fragmenty na żądanie, aby zmniejszyć rywalizację wątków i poprawić początkowe malowanie.
   • Zminimalizuj CSS/JS i włącz gzip; rozważ brotli dla jeszcze lepszej kompresji na obsługiwanych serwerach, aby zmniejszyć adresy URL i ładunki.
   • Ogranicz liczbę skryptów stron trzecich i przenieś je poza krytyczną ścieżkę; załaduj je po głównej treści, aby zapobiec blokowaniu czasomierzy.
   • Pre-connect do źródeł i wstępnie załaduj adresy URL kluczowych czcionek lub API, aby przyspieszyć pobieranie i zmniejszyć wyszukiwanie DNS.
   • Ustaw budżet wydajności dla całkowitej liczby bajtów JS/CSS i całkowitej liczby żądań; użyj narzędzi deweloperskich i Lighthouse, aby śledzić metryki i odpowiednio dostosowywać.
   • Testuj na różnych klasach urządzeń; zmierz LCP, CLS i TTI za pomocą czasomierzy, aby zobaczyć, jak optymalizacja wpływa na rzeczywiste wrażenia użytkownika i dąż do zwiększonej responsywności.
   • Ta optymalizacja zmniejsza ładunki i poprawia responsywność. Dodatkowo udostępniaj ustalenia programistom, aby utrzymywać poprawki w oparciu o rzeczywiste dane i trendy.

Ładowanie czcionek, dynamiczna treść i strategie stabilności układu

Wstępnie załaduj dwa górne pliki czcionek używane dla pierwszego ekranu i ustaw font-display: swap, aby zapobiec blokowaniu. Dzięki temu tekst staje się widoczny wcześniej i poprawia rzeczywisty czas renderowania mobilności. Użyj narzędzia, aby zweryfikować wpływ w panelu nawigacyjnym i zmierzyć metrykę, która ma znaczenie dla postrzegania użytkownika: LCP, CLS i zachowanie pozaładowawcze. Ogranicz czcionki do niektórych podstawowych grubości; zmniejsza to ich rozmiar i liczbę fragmentów, co pomaga w rankingach i końcowym doświadczeniu użytkownika na dużych ekranach. Zrozumienie, w jaki sposób ładowanie czcionek oddziałuje na układ, ma kluczowe znaczenie zarówno dla komputerów stacjonarnych, jak i urządzeń mobilnych.

Najlepsze praktyki ładowania czcionek

Wybierz rodziny czcionek oszczędnie: 1–2 rodziny, maksymalnie 2–3 grubości i preferuj woff2. Użyj czcionki zmiennej, gdy jest to możliwe, aby zoptymalizować liczbę fragmentów i rozmiar. Wstępnie załaduj tylko krytyczne czcionki i polegaj na systemowych opcjach awaryjnych dla niekrytycznej treści, aby uniknąć blokowania. Testuj na różnych urządzeniach i użyj panelu nawigacyjnego, aby porównać pomiary i upewnić się, że metryka pozostaje korzystna; Google ceni mobilność i stabilne renderowanie w rankingach. Rozważ ładowanie czcionek jako ścieżkę bez blokowania, która poprawia czytelność i końcowe UX, a następnie wybierz optymalizacje, które pasują do profilu Twojej witryny.

Dynamiczna treść i stabilność układu

Zarezerwuj stałą przestrzeń dla dynamicznej treści, takiej jak reklamy lub rekomendacje, używając atrybutów width/height lub CSS aspect-ratio, aby zapobiec przesunięciom układu. Użyj szkieletów lub elementów zastępczych shimmer , aby prowadzić użytkowników podczas ładowania treści po malowaniu i wstrzykiwać niekrytyczne widżety po początkowym renderowaniu. Zastosuj containment (contain: layout), aby ograniczyć przepełnienia i utrzymać niewielki rozmiar. Gdy treść się pojawi, rozłóż ją na fragmenty zamiast na raz i testuj z losowymi wariacjami, aby zapewnić stabilność. Śledź CLS jako metrykę panelu nawigacyjnego i porównuj z celami, aby chronić rankingi i zachowanie użytkowników na urządzeniach mobilnych. Takie podejście poprawia удобство i ogólną mobilność, jednocześnie utrzymując stabilny i przewidywalny układ końcowy.

Śledzenie CLS: budżety, panele nawigacyjne i rutynowe audyty witryny

Zdefiniuj budżet CLS: celuj w 0,1 dla poszczególnych stron internetowych i 0,25 dla grupy stron i egzekwuj go w sprintach. Przypisz właściciela dla każdego elementu i podłącz alerty do paneli nawigacyjnych, aby wydania szybko pokazywały poprawione liczby.

Gdzie mierzyć: karta Performance w narzędziach deweloperskich przeglądarki, raport podstawowych wskaźników internetowych Lighthouse i dane z pola z raportu Chrome User Experience Report. Uruchamiaj również testy syntetyczne, aby wypełnić luki w sygnałach od rzeczywistych użytkowników, co zapewni holistyczny wgląd w podstawową stronę internetową na różnych urządzeniach i w różnych sieciach.

Projekt panelu nawigacyjnego koncentruje się na widoczności i działaniu: śledź CLS według adresu URL, według sekcji i według urządzenia; wyświetlaj liczbę przesunięć układu, średni CLS i wykres dystrybucji. Dodaj linie trendu i flagi skoków oraz dołącz примеры: obrazy bez wymiarów, późne ładowanie czcionek i dynamiczna treść, aby pokierować poprawkami. Holistyczny układ łączy CLS z ładowaniem i interaktywnością, aby pokazać, jak UX poprawia się, gdy przesunięcia spadają.

Rutynowe audyty witryny ustanawiają dyscyplinę: codziennie sprawdzaj zmiany układu podczas ładowania i chwile interakcji za pomocą narzędzi deweloperskich, sprawdzaj zasoby, które docierają późno i rejestruj wyniki. Audyty tygodniowe celują w strony powyżej budżetu i przypisują właścicieli; miesięczne przeglądy zagłębiają się w zasoby, sloty reklamowe i zamiany czcionek, aby zapobiec przyszłym przesunięciom.

Wskazówki dotyczące wdrażania prowadzą do trwałych korzyści: rezerwuj miejsce na obrazy, wideo i banery, używając atrybutów width/height lub aspect-ratio; wstępnie ładuj czcionki i ograniczaj zamianę czcionek; preferuj animacje, które opierają się na przekształceniach i kryciu, a nie na właściwościach wpływających na układ; utrzymuj krytyczne style wcześnie w kolejności ładowania i sprawdzaj style za pomocą lintera, aby uniknąć nieoczekiwanych przesunięć. Uzyskaliśmy lepsze wrażenia, gdy zespoły przyjęły odpowiedzialne, powtarzalne podejście do śledzenia CLS w dev, staging i produkcji.