Core Web Vitals: LCP, CLS i INP wyjaśnione. Osiągnij progi rankingowe Google dzięki optymalizacji Largest Contentful Paint, Cumulative Layout Shift i Interaction to Next Paint.

Podsumowanie
Core Web Vitals to trzy wskaźniki komfortu użytkowania (LCP, CLS, INP), których Google używa jako czynników rankingowych do oceny, jak szybka i responsywna jest Twoja strona.
Chcesz dowiedzieć się więcej? Zapytaj
W 2021 roku Google ogłosił, że Core Web Vitals są czynnikami rankingowymi. Trzy konkretne wskaźniki mają dziś bezpośredni wpływ na Twoje pozycje w wyszukiwarce: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) i Interaction to Next Paint (INP). Witryny ze słabymi wynikami rzadziej zajmują wysokie pozycje. Witryny z doskonałymi wynikami zyskują przewagę w rankingu. We współczesnym SEO spełnienie wymagań Core Web Vitals jest obowiązkowe.
Konsekwencje są poważne. Nie możesz już ignorować wydajności. Nie zbudujesz wolnej strony i nie możesz liczyć na dobre pozycje. Google jasno dał do zrozumienia, że komfort użytkowników ma znaczenie, a Core Web Vitals go mierzą. Optymalizacja Core Web Vitals nie jest już opcją, lecz koniecznością, jeśli chcesz być widoczny w konkurencyjnych wynikach wyszukiwania.
Core Web Vitals mierzą trzy wymiary komfortu użytkowania: szybkość ładowania (LCP), stabilność wizualną (CLS) i responsywność (INP). Strona Web Vitals od Google szczegółowo definiuje każdy wskaźnik. Te trzy wskaźniki odzwierciedlają najważniejsze aspekty tego, jak użytkownicy odbierają Twoją stronę.
Google zebrał biliony punktów danych od prawdziwych użytkowników, aby ustalić, które wskaźniki są najważniejsze. Rezultatem są Core Web Vitals. Nie są to dowolne progi, lecz oparte na danych pomiary tego, co sprawia, że strona wydaje się prawdziwym użytkownikom szybka i responsywna.
Oficjalne ogłoszenie Google wyjaśnia, jak Core Web Vitals wpływają na pozycje w wyszukiwarce. Google traktuje Core Web Vitals jako jeden z kilku czynników rankingowych. Jakość i trafność treści wciąż liczą się bardziej, ale dwie równie trafne witryny zostaną uszeregowane według wyników Core Web Vitals.
Largest Contentful Paint (LCP) mierzy, jak długo trwa, zanim największy element treści na stronie stanie się widoczny dla użytkownika. Może to być obraz, film, nagłówek lub blok tekstu. LCP wyznacza moment, w którym użytkownik widzi główną treść i ma poczucie, że strona się załadowała.
Zalecenie Google: LCP powinien wynosić poniżej 2,5 sekundy. Strony z LCP poniżej 2,5 sekundy uznawane są za „dobre”. Strony z LCP między 2,5 a 4 sekundami „wymagają poprawy”. Strony z LCP powyżej 4 sekund są „słabe”. Użytkownicy, którzy doświadczają LCP powyżej 3 sekund, odbierają stronę jako wolną. Użytkownicy, którzy doświadczają LCP powyżej 4 sekund, często ją opuszczają.
Typowe przyczyny wolnego LCP: wolna odpowiedź serwera, CSS i JavaScript blokujące renderowanie, niezoptymalizowane obrazy oraz duże czcionki, których ładowanie trwa. Napraw LCP, wykonując następujące kroki: przyspiesz serwer (skróć Time to First Byte / TTFB), usuń zasoby blokujące renderowanie, odrocz JavaScript, zoptymalizuj i skompresuj obrazy, używaj nowoczesnych formatów obrazów (WebP) oraz ładuj z wyprzedzeniem zasoby krytyczne.
PageSpeed Insights pokazuje Twój wynik LCP i podaje konkretne zalecenia. Uruchom test dla kluczowych stron, uszereguj zalecenia według wpływu i wdrażaj najpierw te o największym znaczeniu.
Cumulative Layout Shift (CLS) mierzy nieoczekiwane przemieszczanie się elementów strony w trakcie jej ładowania. Czytasz artykuł i nagle tekst przeskakuje w dół, bo nad nim załadowała się reklama: to właśnie przesunięcie układu. CLS określa liczbowo, jak bardzo układ strony przesuwa się podczas ładowania.
Zalecenie Google: CLS powinien wynosić poniżej 0,1. Wynik CLS poniżej 0,1 jest „dobry”. Wyniki między 0,1 a 0,25 wymagają poprawy. Wyniki powyżej 0,25 są „słabe”. Nawet niewielkie przesunięcia się sumują. CLS równy 0,15 oznacza, że elementy strony przesunęły się podczas ładowania łącznie o 15% wysokości widocznego obszaru. Użytkownicy uznają to za irytujące i czują frustrację.
Typowe przyczyny wysokiego CLS: reklamy ładowane asynchronicznie, obrazy bez podanych atrybutów width i height, osadzenia (filmy z YouTube, widżety mediów społecznościowych) ładowane asynchronicznie oraz czcionki podmieniane w trakcie ładowania. Napraw CLS, wykonując następujące kroki: podaj wymiary obrazów w HTML (atrybuty width i height), zarezerwuj miejsce na reklamy, zanim się załadują, użyj font-display: swap w CSS @font-face, aby uniknąć skoków przy podmianie czcionki, oraz ładuj filmy i osadzenia synchronicznie lub z zarezerwowanym miejscem.
Każdy obraz w Twojej witrynie powinien mieć jawne atrybuty width i height. Mówią one przeglądarce, by zarezerwowała miejsce, zanim obraz się załaduje. Bez wymiarów przeglądarka nie wie, ile miejsca zarezerwować, co powoduje przesunięcie układu po pojawieniu się obrazu.
Interaction to Next Paint (INP) mierzy, jak szybko Twoja strona reaguje na interakcje użytkownika (kliknięcia, dotknięcia, wprowadzanie z klawiatury). INP to czas między interakcją użytkownika ze stroną a wizualną reakcją strony. Responsywna strona reaguje w milisekundach. Nieresponsywna potrzebuje sekund.
Zalecenie Google: INP powinien wynosić poniżej 200 milisekund. Wyniki poniżej 200 ms są „dobre”. Wyniki między 200 a 500 ms wymagają poprawy. Wyniki powyżej 500 ms są „słabe”. Użytkownicy oczekują natychmiastowej reakcji. INP równy 500 ms daje wrażenie ociężałości. INP równy 1 sekundzie sprawia wrażenie, że strona jest zepsuta.
Typowe przyczyny słabego INP: ciężki JavaScript blokujący główny wątek, duże skrypty zewnętrzne, nieefektywne obsługi zdarzeń oraz brak użycia requestIdleCallback. Napraw INP, wykonując następujące kroki: podziel długie zadania JavaScript na mniejsze fragmenty, odrocz niekrytyczny JavaScript, usuń nieużywane skrypty, zoptymalizuj nasłuchiwanie zdarzeń i użyj web workerów do zadań wymagających dużej mocy obliczeniowej.
INP jest często najtrudniejszym do optymalizacji wskaźnikiem Core Web Vitals, ponieważ wymaga wiedzy o JavaScript. Jeśli Twój zespół nie ma umiejętności optymalizacji JavaScriptu, rozważ zatrudnienie konsultanta ds. wydajności lub skorzystanie z zewnętrznej usługi optymalizacji wydajności.
Core Web Vitals mierzy się na dwa sposoby: danymi laboratoryjnymi i danymi terenowymi. Dane laboratoryjne pochodzą z narzędzi takich jak PageSpeed Insights i Lighthouse, działających w kontrolowanym środowisku. Dane terenowe pochodzą od prawdziwych użytkowników odwiedzających Twoją witrynę. Google przywiązuje większą wagę do danych terenowych, ponieważ odzwierciedlają rzeczywiste doświadczenia użytkowników.
Ścieżka nauki o wydajności od Google wyjaśnia różnicę między wskaźnikami laboratoryjnymi a terenowymi. Dane laboratoryjne pomagają wykrywać problemy i testować poprawki. Dane terenowe pokazują rzeczywistą wydajność. Możesz mieć doskonałe wyniki laboratoryjne, ale słabe terenowe, jeśli Twoi użytkownicy korzystają z wolnych sieci lub starych urządzeń.
Google Search Console raportuje dane terenowe Core Web Vitals. Raport pokazuje pomiary od prawdziwych użytkowników zagregowane z Chrome User Experience Report (CrUX). Jeśli Twoja witryna ma za mało danych od prawdziwych użytkowników, Google podaje zamiast nich dane laboratoryjne z Lighthouse.
Google uznaje Core Web Vitals za „dobre”, gdy spełniony jest 75. percentyl doświadczeń użytkowników. Oznacza to, że 75% prawdziwych użytkowników doświadcza Twojej witryny na poziomie progu lub lepiej. Progi są następujące:
LCP: 2,5 sekundy lub mniej. CLS: 0,1 lub mniej. INP: 200 milisekund lub mniej. Progi te zostały naukowo zweryfikowane na podstawie analizy bilionów rzeczywistych interakcji użytkowników. Strony spełniające te progi zapewniają dobry komfort użytkowania.
Google nie wymaga jednak, by 100% Twoich stron spełniało Core Web Vitals. Jeśli zalicza je 75% Twoich stron, cała witryna jest uznawana za mającą „dobre” Core Web Vitals. Możesz więc mieć kilka wolniejszych stron i nadal zaliczyć test, o ile większość stron generujących ruch jest szybka.
Optymalizacja LCP: najpierw zmierz TTFB (Time to First Byte) w PageSpeed Insights. Jeśli TTFB jest wolny (ponad 600 ms), wąskim gardłem jest serwer. Zmień hosting na lepszy, zoptymalizuj kod backendu lub użyj sieci dostarczania treści (CDN). Jeśli TTFB jest dobry, a LCP wolny, Twój CSS lub JavaScript blokuje renderowanie. Odrocz niekrytyczny JavaScript i umieść inline krytyczny CSS dla treści widocznych na pierwszym ekranie.
Optymalizacja CLS: sprawdź witrynę pod kątem elementów, które przesuwają się podczas ładowania. Wskaż przesuwające się elementy w narzędziach deweloperskich przeglądarki. Dodaj atrybuty width i height do każdego obrazu. Użyj font-display: swap w CSS. Zarezerwuj miejsce na reklamy, osadzenia i treści dynamiczne.
Optymalizacja INP: w zakładce Performance w Chrome DevTools znajdź długie zadania JavaScript (trwające ponad 50 ms). Podziel długie zadania. Odrocz niekrytyczny JavaScript. Użyj requestIdleCallback do prac o niskim priorytecie. Testuj na prawdziwych urządzeniach, nie tylko na komputerach stacjonarnych.
Używaj Google Search Console do monitorowania wyników Core Web Vitals. Raport Core Web Vitals pokazuje wskaźniki Twojej witryny od prawdziwych użytkowników i to, jak wypadają na tle progów Google. Strony są klasyfikowane jako dobre, wymagające poprawy lub słabe.
Ustaw alerty monitorujące. Jeśli Twoje Core Web Vitals się pogarszają, musisz natychmiast zbadać przyczynę. Mogą nią być: nowe wdrożenia kodu, które wprowadziły nieefektywność, nowe skrypty zewnętrzne, zmiany w obrazach lub multimediach albo problemy z hostingiem.
Monitoruj osobno wersję mobilną i wersję na komputery. Urządzenia mobilne zwykle mają wolniejsze procesory i wolniejsze sieci, więc Core Web Vitals są często gorsze na urządzeniach mobilnych niż na komputerach. Jeśli Twoja witryna ma duży ruch z urządzeń mobilnych, optymalizację mobilną traktuj priorytetowo.
Core Web Vitals są dziś podstawowym czynnikiem rankingowym, porównywalnym pod względem wagi z linkami zwrotnymi i jakością treści. Witryny ze słabymi Core Web Vitals raczej nie osiągną wysokich pozycji, niezależnie od tego, jak dobre mają treści. Optymalizacja wydajności musi więc być częścią Twojej strategii SEO, a nie dodatkiem na koniec.
Jeśli walczysz o pozycje, a Twoi konkurenci mają lepsze Core Web Vitals, mają przewagę w rankingu. Nie wygrasz samymi treściami, jeśli Twoja witryna jest wolna i nieresponsywna. Musisz dorównać wydajnością konkurencji lub ją przewyższyć, aby rywalizować na równych zasadach.
Core Web Vitals są dziś kluczowe dla sukcesu w SEO. Optymalizacja LCP, CLS i INP bezpośrednio poprawia Twoje pozycje w wyszukiwarce i komfort użytkowników. Witryny z doskonałymi Core Web Vitals wyprzedzają równie trafne witryny ze słabymi wynikami. Nie ma sposobu, by to obejść: jeśli chcesz zajmować czołowe pozycje, musisz spełnić wymagania Core Web Vitals.
Zacznij od uruchomienia PageSpeed Insights dla kluczowych stron. Zidentyfikuj największe wąskie gardła i napraw je w pierwszej kolejności. Traktuj priorytetowo optymalizację mobilną. Regularnie monitoruj wydajność w Google Search Console. Skorzystaj z naszego audytu GEO SEO, aby wykryć problemy z Core Web Vitals w całej witrynie i śledzić poprawę w czasie.
Źródła
Nie. Core Web Vitals są konieczne, ale niewystarczające, by zajmować czołowe pozycje. Witryna z doskonałymi Core Web Vitals, ale ze słabymi treściami i bez linków zwrotnych nie osiągnie dobrych pozycji. Core Web Vitals rozstrzygają o kolejności między witrynami o podobnej jakości treści.
Dobre (zaliczające) wyniki to: LCP poniżej 2,5 sekundy, CLS poniżej 0,1 i INP poniżej 200 milisekund. Google ustala te progi na podstawie 75. percentyla doświadczeń użytkowników.
Szybkie usprawnienia (optymalizacja obrazów, odroczenie JavaScriptu) mogą poprawić wyniki w ciągu kilku dni. Zmiany strukturalne mogą potrwać tygodnie. Pełna optymalizacja Core Web Vitals trwa zazwyczaj od 4 do 12 tygodni.
WYPRÓBOWALI SORANK PRZED TOBĄ
