Core Web Vitals jsou tři metriky, kterými Google měří zážitek ze stránky. LCP měří rychlost načítání. CLS měří vizuální stabilitu. INP měří odezvu.
Každá metrika měří jinou stránku výkonu. Dohromady dávají obrázek o zážitku návštěvníka.
Largest Contentful Paint (LCP)
LCP měří čas, než se načte hlavní obsah. Hlavním obsahem je největší obrázek nebo textový blok na stránce. U úvodní stránky je LCP hlavní obrázek. U článku je LCP nadpis článku a hlavní obrázek.
LCP se měří od chvíle, kdy návštěvník klikne na odkaz, do chvíle, kdy se hlavní obsah objeví na obrazovce. Pokud je LCP jedna sekunda, návštěvník vidí hlavní obsah sekundu po kliknutí. Pokud je LCP tři sekundy, čeká tři sekundy.
Cíl: LCP pod dvě a půl sekundy je dobré. LCP mezi dvěma a půl a čtyřmi sekundami potřebuje zlepšit. LCP nad čtyři sekundy je špatné.
Příklad: hlavní obrázek úvodní stránky má pět megabajtů. Stahuje se tři sekundy. LCP jsou tři sekundy. Cílem je dvě a půl sekundy. Výkon je potřeba zlepšit.
Cumulative Layout Shift (CLS)
CLS měří vizuální stabilitu. K posunu rozvržení dojde, když se obsah po načtení stránky pohne. Příklad: návštěvník začne číst článek. Načte se reklama. Článek sjede dolů. Návštěvník ztratí místo, kde četl. Je to frustrující.
CLS vyjadřuje celkový posun rozvržení. Pokud se obsah posune dolů o dvě stě pixelů, CLS vzroste. Pokud se obsah posune vícekrát, CLS se sčítá.
Cíl: CLS pod nulu celá jedna je dobré. CLS mezi nulou celá jedna a nulou celá dvacet pět potřebuje zlepšit. CLS nad nulu celá dvacet pět je špatné.
Příklad: reklama se načte po načtení stránky. Zabere tři sta pixelů výšky. Obsah pod reklamou se posune dolů. CLS je nula celá patnáct. Potřebuje zlepšit.
Interaction to Next Paint (INP)
INP měří odezvu. Návštěvník klikne na tlačítko. Systém klik zpracuje. Aktualizuje stránku. Změnu vykreslí na obrazovce. INP je čas od kliknutí po vizuální aktualizaci.
INP je důležitá pro interaktivní stránky (formuláře, tlačítka, nabídky). Méně důležitá je pro statické stránky (články, blogy).
Cíl: INP pod dvě stě milisekund je dobré. INP mezi dvěma sty a pěti sty milisekundami potřebuje zlepšit. INP nad pět set milisekund je špatné.
Příklad: návštěvník klikne na tlačítko Přidat do košíku. Systém zpracuje požadavek. Aktualizuje počítadlo košíku. INP je tři sta milisekund. Potřebuje zlepšit.
Proč tři metriky místo jedné
Jedna metrika nezachytí zážitek návštěvníka. Záleží na rychlosti načítání (LCP). Záleží na vizuální stabilitě (CLS). Záleží na odezvě (INP). Stránka se může načíst rychle, ale být nestabilní (vysoké CLS). Nebo být rychlá a stabilní, ale bez odezvy (vysoké INP). Teprve tři metriky dohromady měří kvalitu zážitku.
Reálný příklad: Core Web Vitals e-shopu
Výchozí stav
Výchozí stav stránky produktu v e-shopu:
LCP: dvě celé osm sekundy (nad cílem dvě a půl). CLS: nula celá dvanáct (nad cílem nula celá jedna). INP: dvě stě dvacet milisekund (nad cílem dvě stě).
Všechny tři metriky je potřeba zlepšit.
Optimalizace
LCP: optimalizovat hlavní obrázek, obsah pod okrajem obrazovky načítat líně. Výsledek: jedna celá osm sekundy.
CLS: vyhradit místo pro reklamy, nekritický obsah načítat líně. Výsledek: nula celá nula pět.
INP: omezit JavaScript, optimalizovat obsluhu událostí. Výsledek: sto osmdesát milisekund.
Všechny tři metriky teď splňují standardy Googlu.
Jak Core Web Vitals souvisejí se zážitkem návštěvníka
Dobré LCP: návštěvník vidí obsah rychle. Stránka působí svižně.
Špatné LCP: návštěvník čeká na obsah. Stránka působí pomalu.
Dobré CLS: rozvržení je stabilní. Návštěvník čte, aniž by mu obsah poskakoval. Je to pohodlné.
Špatné CLS: rozvržení se posouvá. Návštěvník ztrácí místo. Je to frustrující.
Dobré INP: návštěvník klikne na tlačítko a hned vidí odezvu. Stránka působí interaktivně.
Špatné INP: návštěvník klikne na tlačítko a čeká na odezvu. Stránka nereaguje.
Dobré Core Web Vitals vytvářejí dobrý zážitek. Špatné Core Web Vitals vytvářejí špatný zážitek.
Měření Core Web Vitals
Google měří Core Web Vitals u skutečných návštěvníků (real user monitoring). Laboratorní nástroje jako Lighthouse Core Web Vitals jen odhadují a nemusí odpovídat skutečnému zážitku (podmínky sítě se liší).
Core Web Vitals zkontrolujte v Google Search Console. Google shromažďuje data od skutečných návštěvníků a ukazuje, zda web splňuje standardy (dobré, potřebuje zlepšit, špatné).
Zkontrolujte je také v PageSpeed Insights. Najdete tam skóre z Lighthouse i data skutečných návštěvníků z databáze Googlu.
Často kladené otázky
Která z metrik Core Web Vitals je nejdůležitější?
Záleží na všech třech. Obvykle ale nejvíc ovlivňují LCP a CLS. Pokud se stránka načte rychle, ale rozvržení neustále skáče, zážitek je špatný. Pokud je stránka stabilní, ale bez odezvy, frustrace je menší. LCP a CLS jsou většinou priorita jedna a dva. INP je důležitá pro interaktivní stránky, u statického obsahu méně. S WEMASY Tvůrcem webů to nastavíte přímo na svém webu.
Čím se Core Web Vitals liší od ostatních metrik výkonu?
Core Web Vitals jsou metriky zaměřené na zážitek návštěvníka. Měří, co návštěvníci vnímají. Ostatní metriky (TTFB, FCP) jsou technické. Jsou předpokladem dobrých Core Web Vitals, ale zážitek přímo neměří. Zlepšujte je jako základ, ale až Core Web Vitals řeknou, zda se základ promítá do dobrého zážitku.
Můžeme mít dobré metriky výkonu, ale špatné Core Web Vitals?
Ano. Stránka může mít rychlé TTFB, ale špatné LCP. Může mít rychlé FCP, ale špatné CLS. Technické metriky jsou pro dobré Core Web Vitals nutné, ale nestačí.
Máme optimalizovat všechny tři Core Web Vitals stejně?
Ne. Určujte priority podle dopadu. Změřte současný stav. Pokud je LCP čtyři sekundy, ale CLS nula celá jedna, začněte zlepšením LCP. Největší mezery mají největší dopad na návštěvníky.
Jsou Core Web Vitals jediné metriky, které Google zajímají?
Ne. Google měří také vhodnost pro mobily, HTTPS, bezpečné procházení a překrývající okna. Core Web Vitals jsou nejviditelnější a nejsnáze se mění. Celkový zážitek ze stránky ale zahrnuje i další faktory. Core Web Vitals optimalizujte, ale ostatní faktory hodnocení neignorujte.
Jak často se v Google Search Console aktualizují Core Web Vitals od skutečných návštěvníků?
Denně. Google data od skutečných návštěvníků shromažďuje průběžně. Core Web Vitals v Search Console se aktualizují denně. Laboratorní nástroje ukazují měření v jednom okamžiku. Průběžný výkon sledujte v datech skutečných návštěvníků v Search Console.