Core Web Vitals: tři čísla, kterými Google měří váš web

Core Web Vitals jsou tři čísla, kterými Google měří, jestli se na vaší stránce dá pohodlně být. Každé z nich popisuje jednu obyčejnou věc, kterou návštěvník zažije:

• LCP odpovídá na otázku „jak dlouho koukám na prázdno, než se objeví hlavní obsah“. Dobré je do 2,5 vteřiny.
• INP odpovídá na otázku „klepl jsem a jak dlouho se nic nedělo“. Dobré je do 200 milisekund, tedy do dvou desetin vteřiny.
• CLS odpovídá na otázku „uskočil mi obsah pod prstem“. Dobré je do 0,1.

Změřit se dají zdarma a bez instalace čehokoliv. Napíšete adresu do nástroje pagespeed.web.dev od Googlu a čísla máte za pár vteřin. Druhé místo je Search Console, kde je pro ověřený web samostatná sestava.

Jedna věc na úvod, protože kvůli ní jsou dnes návody po internetu zastaralé: metrika FID už neplatí. Google ji v březnu 2024 nahradil metrikou INP. Když v článku o Core Web Vitals čtete o FID, čtete text, který nikdo dva roky nesáhl, a měřili byste podle něj něco, co se do hodnocení nepočítá.

LCP měří okamžik, kdy se na obrazovce objeví největší prvek. Na běžné stránce je to velká fotka nahoře, obrázek v hlavičce nebo hlavní nadpis s odstavcem pod ním. Google tenhle prvek bere jako zástupce toho, kvůli čemu člověk přišel: dokud ho nevidí, stránka pro něj není načtená, i kdyby na pozadí běželo cokoliv.

Hranice: do 2,5 vteřiny je dobré, mezi 2,5 a 4 vteřinami je to ke zlepšení, nad 4 vteřiny je to špatné.

Čím bývá LCP vysoké

• Pomalý server. Do LCP se počítá i čekání na první data. Když server odpovídá dvě vteřiny, dvě vteřiny už jsou pryč a ještě se nezačalo kreslit.
• Velká fotka nahoře. Titulní obrázek přes celou šířku, který má dva megabajty, je nejčastější příčina vůbec.
• Skripty a styly, které drží vykreslení. Prohlížeč je musí stáhnout a projít dřív, než ukáže první řádek textu.
• Písmo z cizího serveru. Když se text vykreslí až po stažení písma, čeká se na cizí server kvůli tvaru písmenek.

První tři body jsou přesně to, co rozebírám v článku o tom, proč se web načítá pomalu. LCP není samostatná nemoc, je to teploměr. Když ho chcete srazit, opravujete server, obrázky a skripty, ne LCP.

INP je nejmladší z trojice a měří to, co lidi na mobilu štve nejvíc: klepnete na tlačítko a chvíli se nic neděje. Menu se nerozbalí, položka se nepřidá do košíku, formulář nezareaguje. Člověk klepne podruhé, pak potřetí, a když se to nakonec provede třikrát, je zle.

Prohlížeč v ten okamžik nezahálí, ale je zaneprázdněný počítáním skriptů. Dokud je nedopočítá, nemá čím na klepnutí odpovědět. Telefon je na tohle mnohem citlivější než počítač, protože má slabší procesor.

Hranice: do 200 milisekund je dobré, mezi 200 a 500 je to ke zlepšení, nad 500 milisekund je to špatné. Půl vteřiny zní jako nic, ale u klepnutí je to hranice, za kterou má člověk pocit, že se web zasekl.

Proč tady někde čtete o FID

Do března 2024 měřil Google odezvu metrikou FID a ta se dívala jen na první interakci na stránce a jen na to, jak rychle ji prohlížeč začal zpracovávat. Skoro každý web v ní vycházel dobře, protože první klepnutí obvykle přijde ve chvíli, kdy už je stránka klidná.

INP je poctivější. Sleduje všechny interakce za celou návštěvu a měří celou dobu od klepnutí po chvíli, kdy se na obrazovce něco změní. Weby, které měly ve FID zelenou, proto po přechodu na INP často spadly do žluté. Nezhoršily se, jen se konečně měří to, co člověk zažívá.

Co s vysokým INP: tohle je jediná ze tří metrik, kterou si majitel webu obvykle sám nespraví. Příčinou bývá těžká stavebnice stránek nebo hromada cizích služeb na stránce. První krok, který uděláte sami, je vyhodit cizí skripty, které nic nepřinášejí: chat, do kterého za rok nikdo nenapsal, nebo druhé měření návštěvnosti, do kterého se nikdo nedívá.

CLS měří, jak moc se obsah stránky během načítání posouvá. Znáte to: začnete číst, naskočí obrázek nad textem a odstavec vám ujede dolů. Nebo miřte na odkaz, v tu chvíli doskočí lišta se souhlasy a klepnete na něco úplně jiného.

Hranice: do 0,1 je dobré, mezi 0,1 a 0,25 ke zlepšení, nad 0,25 špatné. Číslo nemá jednotku, je to podíl plochy obrazovky, který uskočil, násobený tím, jak daleko uskočil.

CLS je z celé trojice nejlevnější na opravu, protože příčiny jsou skoro vždycky tři a všechny jsou jednoduché:

• Obrázky bez uvedených rozměrů. Když má obrázek v kódu napsanou šířku a výšku, prohlížeč mu nechá místo předem a nic neuskočí. Bez rozměrů si místo udělá až ve chvíli, kdy obrázek dorazí. Tuhle jednu věc kontrola u obrázků měří a hlásí.
• Reklama nebo widget vložený doprostřed textu. Řešení je nechat mu v rozvržení pevně vysoké místo, i když je zrovna prázdné.
• Písmo, které se po načtení vymění. Text se nejdřív vykreslí náhradním písmem, pak se přehodí na to správné a přeskládá se. Pomáhá vybrat náhradní písmo podobně široké.

Na rozdíl od LCP a INP se CLS netýká jen rychlosti. Poskakující stránka je nepříjemná i na rychlém připojení a na e-shopu vás může stát objednávku, protože člověk klepne na jiné tlačítko, než chtěl.

Tohle plete nejvíc lidí. Otevřete měření od Googlu a nahoře máte jedno LCP, dole druhé, a každé je jinde. Není to chyba. Jsou to dvě různá měření.

Laboratorní měření je jedno spuštění právě teď. Google si vaši stránku načte na simulovaném telefonu s uměle zpomaleným připojením a s prázdnou pamětí prohlížeče. Výhoda: ukáže se hned, i u webu spuštěného včera. Nevýhoda: mezi dvěma spuštěními kolísá a nikdo takový návštěvník ve skutečnosti neexistuje.

Data od skutečných návštěvníků Google sbírá z prohlížeče Chrome za posledních 28 dní. Různé telefony, různé připojení, různá denní doba. Tohle je to, co Google používá při hodnocení webu, a jen tohle se počítá. Nevýhoda: u malého webu se nesejde dost návštěv a políčko zůstane prázdné.

Prázdná terénní data nejsou vada vašeho webu. Znamenají, že na něj nechodí dost lidí na to, aby se dal statisticky vyhodnotit. V takovém případě se řiďte laboratorním číslem a hlavně tím, co se dá na stránce najít a spravit.

Míň, než se po internetu píše. Core Web Vitals jsou jedním ze signálů, které Google při řazení bere v úvahu, a mezi dvěma podobně dobrými stránkami rozhodnou ve prospěch té příjemnější. Nepřetáhnou ale stránku, která na dotaz neodpovídá, z třetí strany na první.

Pořadí, ve kterém se tomu vyplatí věnovat čas, je jednoduché. Nejdřív zjistěte, jestli vás Google vůbec vidí a na co. Když se web zobrazuje na pěti frázích, které nikdo nehledá, nespraví to ani LCP jedna vteřina. K tomu je SEO audit, který projde techniku i viditelnost ve vyhledávání naráz.

Kde Core Web Vitals rozhodují doopravdy, je chvíle po kliknutí. Člověk z výsledků dorazí, čeká, nic se neděje a vrátí se zpátky. Kolik lidí vám tím propadne mezi prsty, se dá zhruba odhadnout: píšu o tom v článku rychlost webu a odcházející zákazníci.

Co změří kontrola a co ne

Ať je to poctivé: zdejší kontrola Core Web Vitals nepočítá. Stáhne kód stránky a rozebere ho, ale nespouští skripty a nevykresluje stránku jako prohlížeč, takže LCP ani INP naměřit nemůže. Co změří, jsou jejich nejčastější příčiny: odezvu serveru, velikost kódu, kompresi, počet skriptů, které drží vykreslení, a u obrázků formát, odložené načítání a chybějící rozměry. To poslední je přímo hlavní příčina špatného CLS.

Prakticky to znamená: čísla si vezměte od Googlu, seznam věcí k opravě odsud.