CLS i INP to Core Web Vitals, które mierzą inne aspekty doświadczenia użytkownika niż szybkość.
CLS mierzy stabilność wizualną. Przesunięcie układu zdarza się, gdy treść przesuwa się po załadowaniu. Ktoś czyta artykuł. Ładuje się reklama. Artykuł zjeżdża w dół. Czytelnik gubi miejsce. CLS liczbowo opisuje tę irytację.
INP mierzy czas reakcji. Użytkownik klika przycisk. System odpowiada. Jak długo to trwa? INP liczbowo opisuje opóźnienie reakcji.
Cumulative Layout Shift (CLS) w szczegółach
Co powoduje CLS
Ładują się reklamy i zajmują miejsce. Ładują się osadzone treści i zajmują miejsce. Obrazy ładują się bez podanej wysokości. Czcionki się zmieniają i tekst się przelewa. Treść jest wstrzykiwana przez JavaScript.
Prawdziwy przykład
Układ strony jest stabilny. Użytkownik zaczyna czytać. Ładuje się reklama. Reklama ma 300 pikseli wysokości. Treść pod reklamą przesuwa się w dół o 300 pikseli. Użytkownik gubi miejsce. To irytujące.
Pomiar
CLS mierzy się jako procent przesuniętego obszaru widoku. Jeśli widok ma 1000 pikseli wysokości, a treść przesunie się o 300 pikseli, CLS wynosi 0,3. Cel to poniżej 0,1 (przesunięcie o 10 procent jest akceptowalne, o 30 procent nie).
Optymalizacja CLS
Strategia pierwsza: zarezerwuj miejsce
Zarezerwuj miejsce na reklamy, osadzone treści i obrazy. Powiedz silnikowi układu: reklama zajmie 300 pikseli. Zarezerwuj miejsce. Reklama ładuje się w zarezerwowane miejsce. Bez przesunięcia.
Strategia druga: wstawiaj na dole
Unikaj wstrzykiwania treści w środek strony. Wstawiaj na dole (treść poniżej jest już poza widokiem). Albo w przypiętym nagłówku (użytkownik spodziewa się, że nagłówek się zmieni).
Strategia trzecia: unikaj zmian czcionek
Unikaj zmiany czcionki w trakcie ładowania strony. Zmiana czcionki powoduje przelanie tekstu. Przesuwa się cały tekst w tej czcionce. Użyj `font-display: optional` albo `font-display: swap`, by ograniczyć przesunięcie.
Strategia czwarta: podaj wysokość obrazów
Używaj stałej wysokości obrazów. Obraz się ładuje. Wysokość jest podana. Obraz wypełnia zarezerwowane miejsce. Bez przesunięcia.
Prawdziwy przykład: optymalizacja CLS strony produktu w sklepie internetowym
Wyjściowy CLS: 0,25 (słaby).
Analiza
Obrazy produktu ładują się bez podanej wysokości. Przesuwają treść. To wnosi 0,10 CLS. Reklama pod produktem ładuje się po załadowaniu strony. Zajmuje miejsce. Treść się przesuwa. To wnosi 0,12 CLS. Opinie użytkowników ładują się z API. Są wstrzykiwane na stronę. Treść się przesuwa. To wnosi 0,3 CLS.
Optymalizacja
Podaj wysokość obrazów w HTML. Obrazy wypełniają zarezerwowane miejsce. Wkład w CLS: zero. Zarezerwuj miejsce na reklamę. Reklama ładuje się w zarezerwowane miejsce. Wkład w CLS: zero. Ładuj leniwie opinie użytkowników poniżej pierwszego ekranu. Nie wstrzykuj ich na pierwszym ekranie. Wkład w CLS: zero (przesunięcie dzieje się poza widokiem).
Nowy CLS: 0,05 (dobry).
Interaction to Next Paint (INP) w szczegółach
Co mierzy INP
INP mierzy czas reakcji. Użytkownik klika przycisk. System przetwarza kliknięcie. Aktualizuje stan. Renderuje zmianę. Wyświetla ją na ekranie. INP to czas od kliknięcia do pierwszego wyświetlenia widocznej zmiany.
Prawdziwy przykład
Użytkownik klika przycisk Dodaj do koszyka. System sprawdza stan magazynowy. Aktualizuje licznik koszyka. Wyświetla nową liczbę na ekranie. Jeśli INP wynosi 100 milisekund, użytkownik widzi aktualizację licznika natychmiast. Jeśli 1 sekundę, licznik aktualizuje się sekundę później. Strona nie sprawia wrażenia, że reaguje.
Pomiar
INP mierzy się w milisekundach. Cel poniżej 200 milisekund jest dobry.
Optymalizacja INP
Strategia pierwsza: skróć czas wykonywania JavaScriptu
Długi JavaScript blokuje renderowanie. Podziel długie zadanie na mniejsze. Użyj async, defer lub Web Workers do ciężkich obliczeń.
Strategia druga: zoptymalizuj obsługę zdarzeń
Obsługa zdarzeń powinna robić minimum pracy. Ciężką pracę przenieś w tło.
Strategia trzecia: zoptymalizuj CSS
Ciężki CSS może opóźniać wyświetlanie. Użyj CSS containment, by powiedzieć przeglądarce: ten element jest samodzielny, nie przeliczaj stylów całej strony, gdy się zmieni.
Strategia czwarta: użyj szybszej techniki renderowania
Zmiany w CSS są szybsze niż aktualizacje DOM w JavaScripcie. Używaj transformacji CSS zamiast pozycjonowania left/top. Używaj przezroczystości CSS zamiast zmian widoczności.
Prawdziwy przykład: szybkość reakcji formularza
Wyjściowy INP: 400 milisekund (słaby).
Analiza
Formularz ma walidację w JavaScripcie. Użytkownik pisze w polu. Walidacja się uruchamia. Jest synchroniczna. Blokuje aktualizację pola. Pole nie aktualizuje się, dopóki walidacja się nie skończy. Formularz nie sprawia wrażenia, że reaguje.
Optymalizacja
Przenieś walidację w tło (Web Worker lub setTimeout). Pole aktualizuje się od razu. Walidacja dzieje się w tle. Użyj CSS containment w formularzu. Powiedz przeglądarce: formularz jest samodzielny, nie przeliczaj stylów całej strony. Do animacji użyj transformacji CSS zamiast pozycjonowania w JavaScripcie.
Nowy INP: 150 milisekund (dobry).
CLS i INP razem
CLS sprawia, że strona wydaje się niestabilna. INP sprawia, że wydaje się nieresponsywna. Razem wpływają na to, jak użytkownik ocenia jakość.
Strona z dobrym LCP, ale słabym CLS (szybka, ale skacząca) jest irytująca. Użytkownik obwinia wolne działanie, choć problemem jest stabilność.
Strona z dobrym LCP i CLS, ale słabym INP (szybka i stabilna, ale wolno reaguje) sprawia wrażenie zepsutej. Przyciski nie reagują na kliknięcia.
Wszystkie trzy Core Web Vitals są ważne dla dobrego doświadczenia użytkownika.
Najczęstsze pytania
Jak wykryć problemy z CLS?
Użyj Chrome DevTools. Kliknij stronę prawym przyciskiem myszy. Wybierz Zbadaj. Otwórz kartę Performance. Nagraj ładowanie strony. DevTools pokaże przesunięcia układu podczas ładowania. Sprawdź też PageSpeed Insights. Lighthouse wskazuje problemy z CLS. Zajrzyj również do raportu Core Web Vitals w Search Console. Pokazuje strony ze słabym CLS. Dzięki kreatorowi stron WEMASY możesz to ustawić bezpośrednio na swojej stronie.
Czy rezerwować miejsce na wszystkie reklamy, czy tylko na kluczowe?
Rezerwuj miejsce na reklamy na pierwszym ekranie (ładujące się od razu). Nie rezerwuj miejsca na reklamy poniżej pierwszego ekranu (ładujące się po przewinięciu). Mogą one przesuwać treść poniżej, ale użytkownik nie widzi tego przesunięcia.
Jak zoptymalizować INP w złożonych aplikacjach z dużą ilością JavaScriptu?
Przenieś ciężkie obliczenia do Web Workers. Web Worker działa w osobnym wątku. Nie blokuje głównego wątku. Główny wątek nadal reaguje na działania użytkownika. Użyj też React Suspense lub podobnych frameworków, które odkładają ciężkie obliczenia na później, aż obsłużą interakcję.
Czy CLS jest tak samo ważny na telefonach i komputerach?
Ważniejszy na telefonach. Ekran telefonu jest mniejszy. Przesunięcia układu są bardziej widoczne. Użytkownik mobilny chętniej je zauważy i się zirytuje. Optymalizację CLS zacznij od wersji mobilnej.
Czy dobry CLS i INP mogą zrekompensować słaby LCP?
Nie. Jeśli strona ładuje się 5 sekund, użytkownik jest już zirytowany, zanim CLS i INP zaczną mieć znaczenie. Odchodzi, zanim cokolwiek kliknie. Szybkie ładowanie (dobry LCP) to warunek dobrego doświadczenia. Dobry CLS i INP poprawiają doświadczenie na szybkiej stronie, nie na wolnej.
Jak mierzyć i śledzić poprawę CLS i INP?
Punkt wyjścia: zmierz przed optymalizacją. Wdróż optymalizację. Nowy pomiar: zmierz po niej. Użyj biblioteki Web Vitals (biblioteki JavaScript mierzącej Core Web Vitals), by śledzić dane prawdziwych użytkowników. Ustaw alerty: jeśli CLS lub INP się pogorszy, alert powiadomi zespół.