Core Web Vitals

Příklady z praxe

1. 01

   Hero obrázek brzdí první dojem

   E-shop měl na homepage velký hero obrázek načítaný až po několika skriptech, takže LCP vycházel špatně hlavně na mobilech. Vývojář zmenšil obrázek, převedl jej do moderního formátu, doplnil rozměry a nastavil vyšší prioritu načtení. Největší obsah se začal zobrazovat dříve a zároveň přestal posouvat zbytek stránky.

   <img
     src="/images/hero.webp"
     width="1280"
     height="720"
     alt="Nová kolekce běžeckých bot"
     fetchpriority="high"
   />

2. 02

   Těžký JavaScript po kliknutí

   Rezervační formulář reagoval po kliknutí na datum se znatelným zpožděním, protože stejná akce přepočítávala celý kalendář a ceník. Tým změřil dlouhé interakce přes PerformanceObserver, část výpočtů přesunul mimo okamžitou reakci a omezil zbytečné renderování komponent. INP se zlepšilo hlavně na slabších telefonech.

   const observer = new PerformanceObserver((list) => {
     for (const entry of list.getEntries()) {
       console.log(entry.name, entry.duration);
     }
   });
   
   observer.observe({ type: 'event', buffered: true });

Časté omyly

MýtusCore Web Vitals jsou jen SEO metriky pro Google.

Ve skutečnostiCore Web Vitals používá Google ve vyhledávání, ale metriky popisují reálné problémy uživatelské zkušenosti. Pomalý hlavní obsah, zaseknuté kliknutí nebo poskakující tlačítko vadí uživateli bez ohledu na vyhledávač.

MýtusStačí zrychlit server a Core Web Vitals budou v pořádku.

Ve skutečnostiRychlá odpověď serveru pomáhá hlavně LCP, ale Core Web Vitals ovlivňuje také renderování v prohlížeči, velikost assetů, práce JavaScriptu a stabilita layoutu. Web s rychlým backendem může mít pořád špatné INP nebo CLS.

MýtusCore Web Vitals se měří jen na úvodní stránce.

Ve skutečnostiCore Web Vitals se vztahují na konkrétní URL nebo skupiny podobných stránek. Kategorie produktu, detail článku, košík a formulář mohou mít odlišné problémy, takže ladění pouze homepage často zakryje nejdůležitější slabiny.

Časté dotazy

Proč má Core Web Vitals jiné výsledky na mobilu a desktopu?

Core Web Vitals se na mobilu a desktopu liší, protože návštěvníci používají jiné procesory, displeje, síťové podmínky i vzorce chování. Mobilní zařízení častěji trpí pomalejším hlavním vláknem, větší latencí a menší pamětí. Stejná stránka proto může mít na desktopu dobré LCP i INP, ale na mobilu propadnout kvůli velkému JavaScriptu nebo obrázkům nevhodně připraveným pro malé obrazovky.

Stačí pro Core Web Vitals zelené skóre v Lighthouse?

Zelené skóre v Lighthouse nestačí, protože Lighthouse je laboratorní simulace konkrétního běhu. Core Web Vitals pro vyhledávání a produktové rozhodování dávají větší smysl v kombinaci s reálnými daty uživatelů. Lighthouse je velmi užitečný pro diagnostiku příčin, například blokující CSS nebo dlouhé úlohy v JavaScriptu, ale terénní měření ukazuje, zda problém skutečně dopadá na publikum webu.

Která změna zlepší Core Web Vitals nejrychleji?

Nejrychlejší zlepšení Core Web Vitals záleží na nejslabší metrice. Pro LCP často pomůže optimalizace hlavního obrázku, serverové cachování a odstranění blokujícího CSS. Pro INP bývá účinné zkrácení dlouhých JavaScriptových úloh a omezení zbytečných re-renderů. Pro CLS mívá rychlý efekt vyhrazení rozměrů pro obrázky, reklamy, embedované prvky a bannery.

Jak rychle se oprava Core Web Vitals ukáže v Google Search Console?

Core Web Vitals v Google Search Console se neprojeví okamžitě, protože report vychází z agregovaných terénních dat. Stránka musí nasbírat dost návštěv a změna se projeví až po tom, co ji zažije významná část reálných uživatelů. Pro rychlou kontrolu po nasazení je vhodnější laboratorní test, vlastní RUM měření nebo PageSpeed Insights s dostupnými daty z Chrome UX Reportu.

Zdroje

1. Understanding Core Web Vitals and Google search results(otevře se v novém okně)Google Search Central
2. Understanding page experience in Google Search results(otevře se v novém okně)Google Search Central
3. Paint Timing(otevře se v novém okně)W3C
4. Event Timing API(otevře se v novém okně)W3C

Související pojmy

• HydrationHydration je proces, při kterém JavaScript v prohlížeči oživí už hotové HTML vykreslené na serveru: připojí k existujícím DOM uzlům obsluhu událostí, stav a komponentový strom, aniž by značky znovu vytvářel. Uživatel díky tomu vidí obsah okamžitě, ale interaktivní se stránka stane až po stažení a spuštění klientského balíčku.
• Largest Contentful PaintLargest Contentful Paint je metrika webového výkonu, která měří dobu od začátku načítání stránky do okamžiku, kdy se v okně prohlížeče vykreslí největší obrázkový nebo textový blok. Patří mezi Core Web Vitals od Googlu a hodnotí se jako dobrá do 2,5 sekundy měřeno na 75. percentilu reálných návštěv.
• Cumulative Layout ShiftCumulative Layout Shift je metrika ze sady Core Web Vitals, která měří, jak moc se viditelný obsah stránky během načítání a používání samovolně posune. Hodnota vzniká součtem jednotlivých posunů, kde každý se počítá jako podíl zasažené plochy viewportu vynásobený vzdáleností posunu. Za dobrou se považuje hodnota do 0,1.
• Responzivní designResponzivní design je způsob navrhování a kódování webového rozhraní, které se přizpůsobuje velikosti obrazovky, hustotě pixelů, způsobu ovládání i možnostem prohlížeče. Místo samostatných verzí webu používá pružné rozvržení, CSS pravidla, responzivní média a testování na různých šířkách viewportu bez ztráty použitelnosti.
• LatenceLatence je doba, která uplyne mezi vysláním požadavku a příchodem odpovědi. Měří se v milisekundách nebo mikrosekundách a skládá se z času na přenos signálu, zpracování na serveru, čekání ve frontách a serializace dat. Latence je nezávislá na propustnosti: rychlá linka může mít vysoké zpoždění a naopak.
• Landing pageLanding page je samostatná webová stránka postavená kolem jediné akce, na kterou návštěvník přichází z konkrétní kampaně, reklamy nebo e-mailu. Na rozdíl od běžné podstránky webu nenabízí rozptýlení v podobě rozsáhlé navigace: obsah, důkazy i formulář vedou k jedné konverzi, jejíž úspěšnost se měří.
• Technické SEOTechnické SEO je část optimalizace pro vyhledávače, která řeší, zda robot web vůbec najde, stáhne, vykreslí a zaindexuje. Patří do ní struktura URL, sitemapy, robots.txt, stavové kódy, kanonizace, rychlost načítání, mobilní zobrazení, strukturovaná data a hreflang. Obsah ani odkazy technické SEO neřeší, jen jim otevírá cestu k indexu.
• Code splittingCode splitting je technika, při které se JavaScriptový balík aplikace rozdělí na menší soubory (chunky), jež prohlížeč stahuje až ve chvíli, kdy jsou skutečně potřeba. Místo jednoho velkého bundlu se při prvním načtení přenese jen kód nutný pro zobrazenou stránku, zbytek dorazí později na vyžádání.