Jak zlepšit skóre Core Web Vitals

Co jsou Core Web Vitals

Core Web Vitals jsou sada metrik, které Google používá k měření uživatelského zážitku na webových stránkách. Od roku 2021 jsou tyto metriky ranking faktorem ve vyhledávání Google, což znamená, že web s lepšími Core Web Vitals má ve výsledcích vyhledávání výhodu oproti webu s horším skóre. Google tímto krokem dal jasně najevo, že uživatelský zážitek není jen otázkou designu, ale měřitelným technickým parametrem, který ovlivňuje viditelnost ve vyhledávání.

Tři hlavní metriky jsou Largest Contentful Paint měřící rychlost načítání, Interaction to Next Paint měřící odezvu na akce uživatele a Cumulative Layout Shift měřící vizuální stabilitu stránky. Každá metrika má definované prahy pro dobré, vyžadující zlepšení a špatné skóre. Cílem je, aby 75 procent návštěv stránky mělo dobré skóre u všech tří metrik. Pochopení každé metriky a technik pro optimalizaci je klíčem k dosažení vysokých hodnot.

Largest Contentful Paint (LCP)

Co LCP měří

LCP měří čas potřebný k načtení největšího viditelného prvku stránky ve viewportu. Tímto prvkem je obvykle hero obrázek, velký nadpis nebo poster videa. Dobré skóre je LCP pod 2,5 sekundy, mezi 2,5 a 4 sekundami vyžaduje zlepšení a nad 4 sekundy je špatné skóre. LCP je nejdůležitější metrikou pro vnímání rychlosti, protože uživatelé považují stránku za načtenou, když uvidí hlavní obsah, bez ohledu na to, zda se dokončily všechny prvky.

Optimalizace obrázků

Obrázky jsou nejčastější příčinou špatného LCP, protože jsou obvykle největším prvkem na stránce. Používejte moderní formáty jako WebP nebo AVIF, které poskytují stejnou kvalitu obrazu s o 25 až 50 procent menší velikostí souboru ve srovnání s JPEG. Nastavte rozměry obrázku přesně na zobrazovanou velikost místo odesílání obrázku o šířce 4000 pixelů pro zobrazení v 800 pixelech. Responzivní obrázky s atributem srcset umožňují prohlížeči zvolit optimální velikost pro každé zařízení.

Preload hint pro LCP obrázek říká prohlížeči, aby začal obrázek stahovat co nejdříve, aniž by čekal, až parser dorazí k tagu img. Přidejte link rel preload as image href cesta-k-obrazku do sekce head stránky. U hero obrázků nad ohybem stránky použijte atribut fetchpriority high, který stahování přidělí prioritu před ostatními zdroji. U LCP obrázku se vyhněte lazy loadingu, protože jeho načítání zpožďuje.

Doba odezvy serveru

Time to First Byte přímo ovlivňuje LCP, protože obsah se nemůže začít načítat, dokud server neodpoví. TTFB pod 200 milisekund je cílem pro optimální výkon. Použijte CDN pro distribuci obsahu ze serveru geograficky nejbližšího návštěvníkovi. Cachování na straně serveru s Redis nebo Memcached eliminuje potřebu regenerovat stránku při každém požadavku. V BeoHosting naše servery s SSD disky a optimalizovanou konfigurací poskytují nízké TTFB po celé České republice.

Interaction to Next Paint (INP)

Co INP měří

INP v březnu 2024 nahradil First Input Delay jako metriku odezvy. Zatímco FID měřil pouze zpoždění prvního kliknutí, INP měří odezvu všech interakcí během celé návštěvy stránky a zohledňuje nejhorší interakci. Dobré skóre je INP pod 200 milisekund. INP měří čas od akce uživatele, jako je kliknutí, klepnutí nebo stisk klávesy, do dalšího vizuálního obnovení obrazovky, což zahrnuje zpracování event handleru, výpočet rozložení a vykreslení.

Optimalizace JavaScriptu

Dlouhé JavaScriptové úlohy blokují hlavní vlákno a brání prohlížeči reagovat na interakce uživatele. Rozdělte dlouhé úlohy na menší části pomocí technik jako yielding se scheduler.yield nebo setTimeout. Code splitting s dynamickým importem načítá pouze JavaScript potřebný pro aktuální stránku místo celého bundle. Tree shaking eliminuje nepoužitý kód z finálního bundle, čímž snižuje velikost a dobu parsování.

Skripty třetích stran, jako jsou analytika, chatovací widgety a reklamní kód, jsou častou příčinou špatného INP, protože se vykonávají na hlavním vlákně a blokují interakce uživatele. Načítejte je asynchronně s atributy async nebo defer a odložte jejich inicializaci, dokud uživatel se stránkou nezačne interagovat. Web Workers umožňují provádět výpočetně náročné operace mimo hlavní vlákno a uvolnit ho pro interakce uživatele.

Debouncing a throttling

Event handlery, které se spouštějí při každém stisku klávesy, pohybu myší nebo scrollu, mohou výrazně zhoršit INP. Debouncing odkládá vykonání funkce, dokud uživatel akci nezastaví, například 300 milisekund po posledním znaku ve vyhledávacím poli. Throttling omezuje frekvenci vykonání, například jednou za 100 milisekund u scroll handleru. Obě techniky snižují počet vykonání event handlerů a uvolňují hlavní vlákno pro zpracování interakcí uživatele.

Cumulative Layout Shift (CLS)

Co CLS měří

CLS měří vizuální stabilitu stránky tím, že kvantifikuje, jak moc se prvky během načítání neočekávaně posouvají. Dobré skóre je CLS pod 0,1. K posunu rozložení dochází, když viditelný prvek změní svou pozici z jednoho vykresleného snímku do druhého bez akce uživatele. Typickými příčinami jsou obrázky bez definovaných rozměrů, fonty načítané pozdě, dynamicky vkládaný obsah nad viditelnou oblastí a reklamy načítané se zpožděním.

Rozměry pro obrázky a video

Vždy definujte atributy width a height u prvků img a video. To umožňuje prohlížeči rezervovat místo ještě před načtením zdroje a zabraňuje posunu obsahu níže. CSS vlastnost aspect-ratio je moderní alternativou, která automaticky vypočítá rozměry na základě definovaného poměru. U responzivních obrázků použijte CSS max-width 100 procent a height auto spolu s definovanými HTML atributy width a height, které zajistí přesný poměr stran.

Strategie načítání fontů

Webové fonty, které se načítají pozdě, mohou způsobit efekty FOIT nebo FOUT, jež posouvají obsah. Font-display swap zobrazí náhradní font okamžitě a nahradí ho webovým fontem po načtení, ale toto nahrazení může způsobit posun rozložení, pokud se fonty výrazně liší v rozměrech. Preload hint pro kritické fonty zrychluje jejich načítání. Deskriptor size-adjust v deklaraci font-face sladí rozměry náhradního fontu s webovým fontem a minimalizuje posun při nahrazení.

Dynamický obsah

Reklamy, cookie lišty, oznámení a dynamicky vkládaný obsah jsou častou příčinou CLS, protože zabírají místo, které posune zbytek stránky. Rezervujte místo pro reklamy pomocí CSS vlastnosti min-height ještě před načtením reklamního kódu. Umístěte cookie lištu nahoru nebo dolů na obrazovku s fixní pozicí, aby neposouvala obsah níže. U asynchronně načítaného obsahu, jako jsou slidery nebo nekonečné scrollování, použijte skeleton placeholdery, které zaberou stejné místo jako finální obsah.

Nástroje pro měření

Laboratorní data

Google Lighthouse v Chrome DevTools poskytuje laboratorní měření Core Web Vitals na vašem počítači. PageSpeed Insights kombinuje laboratorní a terénní data a dává konkrétní doporučení pro optimalizaci. WebPageTest poskytuje hlubší vhled s waterfall diagramy, zobrazením načítání ve formě filmového pásu a možností testovat z různých lokalit a zařízení. Lighthouse CI umožňuje automatické měření výkonu při každém nasazení jako součást CI/CD pipeline.

Terénní data

Chrome User Experience Report poskytuje reálná data o Core Web Vitals od skutečných uživatelů prohlížeče Chrome. Google Search Console zobrazuje report Core Web Vitals pro váš web s identifikací URL adres, které vyžadují zlepšení. JavaScriptová knihovna Web Vitals od Googlu umožňuje sbírat metriky od vašich návštěvníků a odesílat je do analytického systému. Terénní data jsou důležitější než laboratorní, protože odrážejí reálný uživatelský zážitek na různých zařízeních a sítích.

Vliv hostingu na Core Web Vitals

Výkon serveru

Kvalita hostingu přímo ovlivňuje TTFB a v důsledku i LCP. Sdílený hosting s přetíženými servery může vést k TTFB přes jednu sekundu, což prakticky znemožňuje dosažení dobrého LCP. SSD disky, dostatek RAM a optimalizovaná konfigurace serveru jsou minimem pro dobrý výkon. PHP verze 8.2 nebo novější s OPcache výrazně zrychluje vykonávání PHP kódu ve srovnání se staršími verzemi.

V BeoHosting jsou naše optimalizované hostingové balíčky vyladěné pro Core Web Vitals s NVMe SSD disky, podporou HTTP/2 a HTTP/3, kompresí Brotli a cachováním na úrovni serveru. Webový server LiteSpeed, který používáme, poskytuje vynikající výkon ve srovnání s Apache, zejména u webů WordPress s pluginem LiteSpeed Cache. Naše infrastruktura v České republice zajišťuje nízkou latenci pro místní návštěvníky, čímž přímo zlepšuje metriky TTFB a LCP.

Závěr

Optimalizace Core Web Vitals vyžaduje systematický přístup se zaměřením na obrázky a server u LCP, optimalizaci JavaScriptu u INP a vizuální stabilitu u CLS. Pomocí nástrojů pro měření identifikujte problematické stránky a sledujte pokrok po každé optimalizaci. Kombinace kvalitního hostingu, optimalizovaného kódu a správně nakonfigurovaného cachování dokáže výrazně zlepšit všechny tři metriky a zajistit lepší pozice ve vyhledávání Google.