Core Web Vitals zobrazuje tri metriky, podľa ktorých Google hodnotí – LCP, CLS a INP – merané naživo na stránke, ktorú si prezeráte, hodnotené podľa prahových hodnôt Google a spätne vysledované k presnému prvku za každým číslom.
Core Web Vitals rozhoduje o časti hodnotenia vašich stránok, ale bežné spôsoby ich merania sú nepríjemné. Laboratórne nástroje dosahujú syntetickú záťaž, ktorú nikto nezažije. Search Console hlási skutočných používateľov so štvortýždňovým oneskorením, ktorí sú zoskupení do skupín adries URL. Ani jedno vám nepovie, ktorý prvok na stránke pred vami je problém.
Tento nástroj meria stránku, na ktorú sa práve pozeráte, keď ju používate. Každý z LCP, CLS a INP dostane dlaždicu so svojou hodnotou, hodnotenie Dobrý, Vyžaduje prácu alebo Zlé v porovnaní s prahovými hodnotami zverejnenými spoločnosťou Google a stĺpec zobrazujúci, kde sedíte. FCP a TTFB sú z hľadiska kontextu vedľa nich, pretože pomalé LCP spôsobené pomalým serverom je odlišný problém od problému spôsobeného ťažkým obrázkom.
Definície zodpovedajú tomu, čo Chrome hlási CrUX, čo je dôležité, ak chcete porovnávať čísla so službou Search Console. CLS používa okná relácií – okno sa skončí po sekundovej prestávke alebo po piatich sekundách a vyhrá najhoršie okno – namiesto naivného sčítavania každej zmeny. INP je 98. percentil vašich interakčných latencií, čo je pri bežnej návšteve jednoducho najpomalšia interakcia. LCP sa prestane meniť pri vašej prvej interakcii, presne tak, ako to robí Chrome.
Najužitočnejšie je, že každé číslo je priradené. Panel pomenuje najväčší prvok farby, prvky, ktoré sa posunuli a najpomalšie interakcie, a tlačidlo Zobraziť roluje na ktorýkoľvek z nich a načrtne ho na stránke. Namiesto toho, aby ste vedeli, že CLS je 0,31, vidíte banner, ktorý posúva váš obsah nadol. Copy report vám celú vec odovzdá ako text na tiket.
Počas používania stránky sa aktualizujú tri hodnotiace metriky: posúvanie posúva CLS, klikanie a písanie move INP. Každá z nich má hodnotenie Dobrá, Vyžaduje prácu alebo Slabá v porovnaní s prahovými hodnotami spoločnosti Google.
Pomenuje najväčší prvok farby, prvky, ktoré sa posunuli, a najpomalšie interakcie. Stlačením tlačidla Ukázať prejdite na ktorúkoľvek z nich a zvýraznite ju priamo na stránke.
CLS používa obdobia relácií s intervalom 1 s a limitom 5 s, INP je 98. percentil latencie interakcie a LCP zamrzne pri prvej interakcii – takže vaše čísla sú v súlade so službou Search Console.
First Contentful Paint a Time To First Byte sú vedľa veľkej trojky, takže pomalý server môžete odlíšiť od ťažkého hrdinského obrazu skôr, ako začnete optimalizovať nesprávnu vec.
Uvádza vaše najpomalšie interakcie s typom udalosti a príslušným prvkom, takže namiesto hádania môžete nájsť pomalú rozbaľovaciu ponuku alebo filter.
Jedno kliknutie skopíruje každú metriku, hodnotenie a problematický selektor ako obyčajný text – pripravený na vloženie do tiketu, žiadosti o stiahnutie alebo e-mailu klienta.
Pred uvedením novej šablóny sa uistite, že LCP, CLS a INP majú zelenú hodnotu, než aby ste to zisťovali zo služby Search Console o mesiac neskôr.
Search Console vám oznámi, že skupina adries URL zlyhala v CLS; otvorte jeden z nich pomocou tohto nástroja a uvidíte, ktorý prvok presne posúva.
Posúvajte stránku a sledujte, ako CLS stúpa, potom stlačte Zobraziť, aby ste načrtli reklamu, banner alebo webové písmo, ktoré sa načítava neskoro, ktoré presúva váš obsah.
Preklikajte sa cez filtre, ponuky a modály a potom si prečítajte zoznam najpomalších interakcií, aby ste zistili, ktorý ovládací prvok stojí stovky milisekúnd.
Zaznamenajte čísla, nasaďte opravu, potom znova zmerajte rovnakú stránku a porovnajte tieto dve správy vedľa seba.
Kliknite na ikonu Core Web Vitals v doku DevSuite Pro. Metrické dlaždice sa zobrazia okamžite pomocou toho, čo už stránka zaznamenala.
LCP má zmysel iba od začiatku načítania stránky, takže znova načítajte s otvoreným panelom, keď chcete čítanie, ktorému môžete dôverovať.
Prechádzajte cez celú stránku a cvičte CLS a kliknutím, ťuknutím a zadaním generujte merania INP. Dlaždice sa priebežne aktualizujú.
Stlačte Zobraziť vedľa prvku LCP, zdroja zmeny rozloženia alebo pomalej interakcie. Stránka sa k nej posunie a načrtne ju, takže neexistujú žiadne nejasnosti o tom, ktorý prvok je zodpovedný.
Kliknutím na položku Kopírovať prehľad zobrazíte súhrn všetkých metrík, hodnotení a selektorov vo forme čistého textu. Stlačením Reset spustíte CLS a INP znova od začiatku.
Nainštalujte si DevSuite Pro zadarmo a odomknite viac ako 71 vývojárskych nástools pre váš prehliadač.
