← Powrót do funkcji
Pro

Core Web Vitals

Core Web Vitals pokazuje trzy wskaźniki, według których Google zajmuje pozycję – LCP, CLS i INP – mierzone na żywo na przeglądanej stronie, oceniane w oparciu o progi Google i powiązane z dokładnym elementem stojącym za każdą liczbą.

Core Web Vitals decyduje o części rankingu Twoich stron, ale zwykłe sposoby ich pomiaru są niewygodne. Narzędzia laboratoryjne oceniają obciążenie syntetyczne, którego nikt nie doświadcza. Search Console raportuje rzeczywistych użytkowników, z czterotygodniowym opóźnieniem, pogrupowanych w segmenty adresów URL. Żadne z nich nie informuje, który element na stronie przed tobą stanowi problem.

To narzędzie mierzy stronę, na którą faktycznie patrzysz, podczas jej używania. LCP, CLS i INP otrzymują kafelek ze swoją wartością, oceną Dobra, Wymaga pracy lub Słaba w stosunku do progów opublikowanych przez Google, a także pasek pokazujący, gdzie siedzisz. FCP i TTFB znajdują się obok nich ze względu na kontekst, ponieważ powolny LCP spowodowany powolnym serwerem to inny problem niż ten spowodowany ciężkim obrazem.

Definicje odpowiadają temu, co Chrome raportuje do CrUX, co ma znaczenie, jeśli zamierzasz porównywać liczby w Search Console. CLS wykorzystuje okna sesji — okno kończy się po jednosekundowej przerwie lub po pięciu sekundach, a najgorsze okno wygrywa — zamiast naiwnie sumować każdą zmianę. INP to 98. percentyl opóźnienia interakcji, który w przypadku normalnej wizyty jest po prostu najwolniejszą interakcją. LCP przestaje się zmieniać przy pierwszej interakcji, dokładnie tak, jak robi to Chrome.

Najbardziej przydatne jest przypisanie każdej liczby. Panel wymienia największy element pomalowany, elementy, które się przesunęły i najwolniejsze interakcje, a przycisk Pokaż umożliwia przewinięcie do dowolnego z nich i obrysowanie go na stronie. Zamiast wiedzieć, że CLS wynosi 0,31, widzisz baner, który spycha Twoją treść w dół. Kopiuj raport, który przekazuje Ci całość jako tekst biletu.

Podgląd na żywo
example.com/products
Core Web Vitals Pomiar na żywo
LCPDobry
1.84 s
CLSSłaby
0.312
INPPotrzebuje pracy
248 ms
FCP 1.12 s
TTFB 410 ms
Największy element
1.84 s section.hero > img.banner Pokazywać
Największe zmiany w układzie
0.241 div.promo-banner Pokazywać
0.071 ul.product-grid > li:nth-of-type(3) Pokazywać
Kluczowe funkcje

Na żywo LCP, CLS i INP

Trzy wskaźniki rankingowe aktualizują się w miarę korzystania ze strony: przewijanie powoduje przesunięcie CLS, kliknięcie i wpisanie przesunięcie INP. Każdy z nich ma ocenę Dobra, Wymaga pracy lub Słaba w stosunku do progów Google.

Mówi ci, który element

Nazywa największy element farby, elementy, które się przesunęły i najwolniejsze interakcje. Naciśnij Pokaż, aby przewinąć do dowolnego z nich i obrysować go bezpośrednio na stronie.

Własne definicje Chrome

CLS wykorzystuje okna sesji z przerwą 1 s i ograniczeniem do 5 s, INP to 98. percentyl opóźnień interakcji, a LCP zawiesza się przy pierwszej interakcji, więc Twoje liczby zgadzają się z Search Console.

FCP i TTFB dla kontekstu

First Contentful Paint i Time To First Byte znajdują się obok wielkiej trójki, dzięki czemu możesz odróżnić powolny serwer od ciężkiego obrazu bohatera, zanim zaczniesz optymalizować niewłaściwą rzecz.

Podział interakcji

Wyświetla listę najwolniejszych interakcji z typem zdarzenia i związanym z nim elementem, dzięki czemu można znaleźć powolne menu rozwijane lub filtr, zamiast zgadywać.

Raport do kopiowania

Jedno kliknięcie kopiuje wszystkie dane, oceny i selektory naruszające zasady w postaci zwykłego tekstu — gotowego do wklejenia w zgłoszeniu, żądaniu ściągnięcia lub wiadomości e-mail klienta.

Typowe zastosowania

Sprawdzanie strony przed wysyłką

Upewnij się, że LCP, CLS i INP są gotowe do pracy nad nowym szablonem, zanim zostanie on opublikowany, a nie dowiemy się o tym w Search Console miesiąc później.

Próbuję znaleźć ostrzeżenie w Search Console

Search Console informuje, że grupa adresów URL nie spełnia wymagań CLS; otwórz jeden z nich za pomocą tego narzędzia i zobacz dokładnie, który element powoduje przesunięcie.

Znalezienie elementu, który skacze

Przewiń stronę i zobacz, jak CLS wspina się, a następnie naciśnij Pokaż, aby zarysować spóźnioną reklamę, baner lub czcionkę internetową, która przenosi Twoją treść.

Diagnozowanie powolnego interfejsu

Klikaj filtry, menu i moduły, a następnie zapoznaj się z listą najwolniejszych interakcji, aby dowiedzieć się, które sterowanie kosztuje setki milisekund.

Udowodnienie, że optymalizacja zadziałała

Zapisz liczby, zastosuj poprawkę, a następnie ponownie zmierz tę samą stronę i porównaj dwa raporty obok siebie.

Jak używać
1

Otwórz Core Web Vitals

Kliknij ikonę Core Web Vitals w doku DevSuite Pro. Kafelki metryczne pojawiają się od razu przy użyciu tego, co strona już zarejestrowała.

2

Załaduj ponownie, aby uzyskać czysty LCP

LCP ma sens tylko od początku ładowania strony, więc załaduj ponownie przy otwartym panelu, gdy chcesz uzyskać odczyt, któremu możesz zaufać.

3

Korzystaj ze strony normalnie

Przewiń całą stronę, aby wykonać CLS, a następnie kliknij, dotknij i wpisz, aby wygenerować pomiary INP. Płytki aktualizują się w miarę upływu czasu.

4

Znajdź winowajcę

Naciśnij Pokaż obok elementu LCP, źródła zmiany układu lub powolnej interakcji. Strona przewinie się do niego i obrysuje go, więc nie ma wątpliwości, który element jest za to odpowiedzialny.

5

Skopiuj raport

Kliknij opcję Kopiuj raport, aby wyświetlić podsumowanie wszystkich danych, ocen i selektorów w postaci zwykłego tekstu. Naciśnij Reset, aby ponownie uruchomić CLS i INP od zera.

Gotowy do wypróbowania?

Zainstaluj DevSuite Pro za darmo i odblokuj ponad 71 narzędzi programistycznych dla swojej przeglądarki.

Dodaj do Chrome Dodaj do Edge Dodaj do FireFox