Co mierzą LCP, INP i CLS, progi dobrych i słabych wyników, dane terenowe a laboratoryjne, miernik na żywo dla tej strony i 25 przepisów na poprawki z kodem, pogrupowanych według przyczyny, oraz uwagi dla platform.
Core Web Vitals to trzy pomiary prawdziwych wizyt: Largest Contentful Paint (ładowanie, dobry wynik to 2.5 sekundy lub mniej), Interaction to Next Paint (responsywność, dobry wynik to 200 milisekund lub mniej) i Cumulative Layout Shift (stabilność, dobry wynik to 0.1 lub mniej). Strona zalicza test, gdy co najmniej 75% wizyt spełnia wszystkie trzy.
Dobre wyniki
Poniższy miernik mierzy tę stronę w Twojej przeglądarce, gdy z niej korzystasz. Następnie znajdź wskaźnik, którego nie zaliczasz, i przejdź przez przepisy dla niego; każdy wskazuje przyczynę, którą naprawia, i podaje kod.
Interaction to Next Paint zastąpił First Input Delay jako Core Web Vital w marcu 2024. INP uwzględnia wszystkie interakcje na stronie, nie tylko pierwszą, i obejmuje czas potrzebny na wyrenderowanie wyniku.
Lighthouse to jeden test na jednym symulowanym urządzeniu. Core Web Vitals opierają się na prawdziwych odwiedzających z 28 dni, na wolniejszych telefonach i sieciach, i obejmują INP, którego Lighthouse nie potrafi zmierzyć.
Są częścią sygnałów page experience w Google. Google opisuje trafność i jakość treści jako znacznie ważniejsze, więc dobre wskaźniki pomagają najbardziej wtedy, gdy strony są poza tym podobne.
Dane terenowe obejmują poprzednie 28 dni, więc poprawa pojawia się stopniowo przez około cztery tygodnie od wdrożenia.
Progi (oceniane na 75. percentylu prawdziwych wizyt)
Dane terenowe a dane laboratoryjne
fetchpriority="high" mówi przeglądarce, że ten obraz jest najważniejszy. Nigdy nie stosuj lazy loadingu dla obrazu LCP.
Obrazy tła są wykrywane późno, po załadowaniu CSS. Preload w head od razu rozpoczyna pobieranie.
srcset i sizes pozwalają telefonowi pobrać mały plik zamiast wersji na komputer.
AVIF i WebP są zwykle znacznie mniejsze niż JPEG przy tej samej jakości. picture pozwala starszym przeglądarkom użyć wersji zapasowej.
font-display: swap od razu pokazuje tekst fontem zapasowym, więc nagłówek będący elementem LCP nie czeka na pobranie fontu.
preconnect wykonuje z wyprzedzeniem DNS, TCP i uzgadnianie TLS dla zewnętrznego źródła, którego będziesz potrzebować.
Skrypty w head bez defer lub async blokują renderowanie. defer zachowuje kolejność, ale czeka, aż HTML zostanie sparsowany.
Jeśli element LCP tworzy JavaScript, nic nie może się wyrenderować, dopóki paczka się nie pobierze i nie uruchomi. Renderowanie po stronie serwera lub prerendering umieszcza go w pierwszej odpowiedzi. Możliwości opisujemy w naszym przewodniku SEO dla aplikacji single page.
Wolna odpowiedź serwera opóźnia wszystko. Cache'uj statyczne strony w CDN i ustaw rozsądny Cache-Control.
Zadanie dłuższe niż 50 ms blokuje wprowadzanie danych. Oddawaj sterowanie wątkowi głównemu między fragmentami, by kliknięcie mogło zostać obsłużone pomiędzy nimi. scheduler.yield jest nowszy; wersja zapasowa z setTimeout działa wszędzie.
Od razu zaktualizuj przycisk, a ciężką pracę wykonaj, gdy przeglądarka zdąży wyrenderować zmianę.
Filtrowanie długiej listy przy każdym naciśnięciu klawisza sprawia, że pisanie się opóźnia. Poczekaj na krótką przerwę.
startTransition pozwala Reactowi zachować responsywność pola i wyrenderować kosztowny wynik, gdy będzie to możliwe.
Widżety czatu i menedżery tagów często uruchamiają ciężki kod przy ładowaniu. Ładuj je, gdy strona jest bezczynna, lub przy pierwszej interakcji.
Ogromne strony spowalniają każdą aktualizację stylów i układu. content-visibility pomija renderowanie sekcji poza ekranem, dopóki nie znajdą się blisko.
Odczyt offsetHeight po każdej zmianie stylu za każdym razem wymusza przeliczenie układu. Najpierw odczytaj wszystko, potem zapisuj.
Parsowanie dużego pliku lub sortowanie tysięcy wierszy może działać w workerze, nie blokując kliknięć.
width i height pozwalają przeglądarce zarezerwować miejsce, zanim plik dotrze. CSS nadal może uczynić je responsywnymi.
Mapy, filmy i iframe'y często ładują się późno. aspect-ratio utrzymuje ich pole otwarte.
Treść wstawiona nad tym, co czytają ludzie, przesuwa ją w dół. Nadaj miejscu z wyprzedzeniem minimalną wysokość.
Gdy podmienia się font webowy, tekst może się inaczej zawijać. size-adjust na lokalnym foncie zapasowym zbliża szerokość obu.
Przesuwanie elementów za pomocą transform nie przesuwa innych elementów, więc nie liczy się jako przesunięcie układu.
Pasek przypięty do dołu ekranu nie przesuwa strony; pasek wstawiony na górze tak.
Placeholder ładowania powinien zajmować tyle samo miejsca, co to, co go zastąpi.
Strony przywracane z back/forward cache pojawiają się natychmiast, bez nowych przesunięć. Handler unload to uniemożliwia; zamiast niego używaj pagehide.
Uwagi dla platform
Najczęstszym winowajcą LCP są obrazy; zmniejsz je za pomocą narzędzia
Miernik na żywo dla tej strony
Mierzy LCP, CLS i INP dla tej strony w Twojej przeglądarce, jeśli są obsługiwane.
Dobry
Wymaga poprawy
Słaby
Nieobsługiwane w tej przeglądarce
INP (najwolniejszy do tej pory)
Czekam na największe wyrenderowanie
Kliknij lub pisz w dowolnym miejscu, by zmierzyć
Zacznij za darmo · Bez karty kredytowej