Core Web Vitals ukazuje tři metriky, podle kterých Google hodnotí – LCP, CLS a INP – měřené živě na stránce, kterou si prohlížíte, hodnocené podle prahových hodnot Google a vysledované zpět k přesnému prvku za každým číslem.
Core Web Vitals rozhoduje částečně o hodnocení vašich stránek, ale obvyklé způsoby jejich měření jsou nepříjemné. Laboratorní nástroje dosahují syntetické zátěže, kterou nikdo nezažije. Search Console hlásí skutečné uživatele se čtyřtýdenním zpožděním seskupené do skupin adres URL. Ani jedno vám neřekne, který prvek na stránce před vámi je problém.
Tento nástroj měří stránku, na kterou se skutečně díváte, když ji používáte. LCP, CLS a INP obdrží dlaždici se svou hodnotou, hodnocením Dobrý, Potřebuje práci nebo Špatné vzhledem k prahovým hodnotám zveřejněným společností Google a pruh ukazující, kde sedíte. FCP a TTFB sedí vedle nich z hlediska kontextu, protože pomalé LCP způsobené pomalým serverem je jiný problém než problém způsobený těžkým obrazem.
Definice odpovídají tomu, co Chrome hlásí CrUX, což je důležité, pokud máte v úmyslu porovnávat čísla se Search Console. CLS používá okna relací – okno končí po jednosekundové prodlevě nebo po pěti sekundách a vyhrává nejhorší okno – spíše než naivně sčítat každou směnu. INP je 98. percentil vašich interakčních latencí, což je pro běžnou návštěvu prostě nejpomalejší interakce. LCP se přestane měnit při vaší první interakci, přesně jako to dělá Chrome.
Nejužitečnější je, že každé číslo je přiřazeno. Panel pojmenuje největší prvek malby, prvky, které se posunuly, a nejpomalejší interakce, a tlačítko Zobrazit přejde na kterýkoli z nich a označí jej na stránce. Místo toho, abyste věděli, že CLS je 0,31, vidíte banner, který tlačí váš obsah dolů. Copy report vám celou věc předá jako text pro tiket.
Při používání stránky se aktualizují tři hodnotící metriky: posouvání přesouvá CLS, klikání a psaní move INP. Každá z nich má hodnocení Dobrá, Vyžaduje práci nebo Špatná vzhledem k prahovým hodnotám společnosti Google.
Pojmenuje prvek s největší barvou, prvky, které se posunuly, a nejpomalejší interakce. Stisknutím Ukázat přejděte na kteroukoli z nich a zvýrazněte ji přímo na stránce.
CLS používá okna relací s 1s mezerou a 5s limitem, INP je 98. percentil interakčních latencí a LCP zamrzne při první interakci – takže vaše čísla odpovídají Search Console.
First Contentful Paint a Time To First Byte sedí vedle velké trojky, takže můžete rozeznat pomalý server od těžkého obrazu hrdiny, než začnete optimalizovat špatnou věc.
Uvádí vaše nejpomalejší interakce s typem události a zahrnutým prvkem, takže místo uhodnutí lze najít pomalý rozevírací seznam nebo filtr.
Jedno kliknutí zkopíruje každou metriku, hodnocení a problematický selektor jako prostý text – připravený k vložení do tiketu, požadavku na stažení nebo e-mailu klienta.
Ověřte si, že LCP, CLS a INP jsou na nové šabloně v zeleném stavu, než bude zveřejněna, místo abyste to zjišťovali ze Search Console o měsíc později.
Search Console vám sdělí, že skupina adres URL selhala v CLS; otevřete jeden z nich pomocí tohoto nástroje a přesně uvidíte, který prvek posunuje.
Posouvejte stránku a sledujte, jak CLS stoupá, a poté stiskněte Zobrazit, abyste nastínili reklamu, banner nebo webové písmo, které se načítá pozdě a které přesouvá váš obsah.
Proklikejte se filtry, nabídkami a modály a poté si přečtěte seznam nejpomalejších interakcí, abyste zjistili, který ovládací prvek stojí stovky milisekund.
Zaznamenejte čísla, nasaďte opravu, poté znovu změřte stejnou stránku a porovnejte obě zprávy vedle sebe.
Klikněte na ikonu Core Web Vitals v doku DevSuite Pro. Metrické dlaždice se zobrazí okamžitě pomocí čehokoli, co již stránka zaznamenala.
LCP má smysl pouze od začátku načítání stránky, takže znovu načtěte s otevřeným panelem, když chcete čtení, kterému můžete věřit.
Procházejte celou stránku a procvičte CLS a kliknutím, klepnutím a zadáním vygenerujte měření INP. Dlaždice se průběžně aktualizují.
Stiskněte Zobrazit vedle prvku LCP, zdroje pro změnu rozložení nebo pomalé interakce. Stránka se k ní posune a načrtne ji, takže neexistuje žádná nejednoznačnost ohledně toho, který prvek je zodpovědný.
Kliknutím na možnost Kopírovat přehled zobrazíte souhrn všech metrik, hodnocení a selektoru v prostém textu. Stisknutím tlačítka Reset spustíte CLS a INP znovu od začátku.
Nainstalujte si DevSuite Pro zdarma a odemkněte 71+ vývojářských nástrojů pro svůj prohlížeč.
