Core Web Vitals jsou tři klíčové ukazatele, které Google používá k hodnocení uživatelské zkušenosti na webových stránkách. Tyto ukazatele jsou:

• Largest Contentful Paint (LCP) - týká se doby, za kterou se na stránce zobrazí největší obsahový prvek. Ideálně by měl být menší než 2,5 sekundy.
• First Input Delay (FID) - měří, jak rychle uživatel může interagovat se stránkou po načtení. Ideálně by měl být menší než 100 milisekund.
• Cumulative Layout Shift (CLS) - měří, jak moc se prvky na stránce pohybují, a jak to ovlivňuje uživatelskou zkušenost. Ideálně by měl být menší než 0,1.

Tyto ukazatele jsou důležité pro zlepšení uživatelské zkušenosti na webových stránkách a mají značný vliv na SEO a na pozici stránky ve výsledcích vyhledávání Google. Google se proto snaží motivovat vývojáře, aby se na tyto ukazatele zaměřovali a zlepšovali je.

Jak zlepšit metriky Core Web Vitals?

Společnost Google sdílí aktualizovanou sadu doporučení pro optimalizaci Core Web Vitals, která vám pomohou rozhodnout, čemu dát přednost, když máte málo času a prostředků V takovém případě je důležité se rozhodnout, na co se zaměřit nejdříve.

Core Web Vitals jsou tři metriky měřící dobu načítání, interaktivitu a vizuální stabilitu. Google považuje tyto metriky za zásadní pro poskytování pozitivního zážitku a používá je k hodnocení webových stránek ve výsledcích vyhledávání.

V průběhu let společnost Google sice poskytla řadu návrhů na zlepšení hodnocení Core Web Vitals, ale pro majitele menší firmy či e-shopu může být složité je provést všechny. Ačkoli každé z doporučení společnosti Google stojí za realizaci, společnost si uvědomuje, že je nereálné očekávat, že to někdo udělá všechno.

Pokud ovšem nemáte s optimalizací výkonu webových stránek mnoho zkušeností, může být náročné zjistit, co bude mít nejvýznamnější dopad na úspěšné SEO a na co byste se tedy měli zaměřit nejdříve.

Možná nebudete vědět, kde začít, pokud máte pouze omezený čas či finanční prostředky, které můžete na zlepšení Core Web Vitals věnovat. A právě zde přichází na řadu revidovaný seznam doporučení společnosti Google, který vám pomůže určit priority.

Tým Google Chrome sestavil seznam doporučení, která jsou reálná pro většinu vývojářů, použitelná pro většinu webových stránek a mají smysluplný reálný dopad.

Optimalizace největšího obsahu (LCP)

Metrika LCP (Largest Contentful Paint) měří dobu, za kterou se primární obsah stránky stane viditelným pro uživatele. Společnost Google uvádí, že doporučenou hranici LCP splňuje jen asi polovina všech webových stránek.

Toto jsou hlavní doporučení společnosti Google pro zlepšení LCP.

Ujistěte se, že je zdroj LCP snadno k nalezení ve zdroji HTML. LCP (Largest Contentful Paint) je jedním z klíčových ukazatelů výkonu webových stránek, který odráží rychlost načítání největšího obsahu na stránce. Společnost Google doporučuje následující kroky pro zlepšení LCP:

• Optimalizace serverového a webového hostingu - zajistěte, aby vaše webové stránky byly hostovány na spolehlivém a rychlém serveru s nízkou odezvou.
• Optimalizace obrázků a videí - zmenšujte velikost obrázků a videí tak, aby byly co nejmenší, ale stále poskytovaly dostatečnou kvalitu pro zobrazení na vašich stránkách.
• Použití rychlého a efektivního CSS a JavaScript - minimalizujte použití externích knihoven a kódů, které mohou zpomalit načítání stránky.
• Prediktivní načítání obsahu - používejte techniky jako je lazy loading, které umožňují načítat obsah až když je potřeba, místo aby se načetl celý obsah najednou.
• Optimalizace prvků rozložení stránky - zajistěte, aby se nejdůležitější prvky, jako jsou titulky, texty a obrázky, načetly co nejdříve.

Tyto kroky pomohou zlepšit rychlost načítání vašich webových stránek a snížit čas, který trvá na načtení největšího obsahu na vašich stránkách, což by mělo vést k lepšímu skóre LCP a celkovému výkonu vašich webových stránek.

Použijte síť pro doručování obsahu (CDN) ke snížení Time To First Bite (TTFB)

Prohlížeč musí před načtením dalších zdrojů obdržet první bajt odpovědi počátečního dokumentu HTML. Tato doba se nazývá Time to First Byte (TTFB) a čím rychleji na stane, tím dříve mohou začít další procesy. Chcete-li TTFB minimalizovat, doručujte obsah z místa blízkého uživatelům a pro často požadovaný obsah používejte mezipaměť. Podle společnosti Google je nejlepším způsobem, jak obojího dosáhnout, použití sítě pro doručování obsahu (CDN).

Optimalizace kumulativního posunu rozložení (CLS)

Kumulativní posun rozložení (CLS) je metrika používaná k hodnocení toho, jak stabilní je vizuální rozložení webu. Podle společnosti Google přibližně 25 % webových stránek nesplňuje doporučenou normu pro tuto metriku. Toto jsou hlavní doporučení společnosti Google pro zlepšení CLS.

Nastavení explicitních velikostí pro obsah na stránce

K posunům rozvržení může dojít, když obsah na webové stránce změní svou pozici po dokončení načítání. Aby k tomu nedocházelo, je důležité co nejvíce prostoru rezervovat předem. Jednou z častých příčin posunů rozvržení jsou obrázky s nedostatečnou velikostí, což lze řešit explicitním nastavením atributů šířky a výšky nebo ekvivalentních vlastností CSS.

Obrázky nejsou jediným faktorem, který může způsobit posun rozvržení webových stránek. Ke vzniku CLS může přispět i jiný obsah, například reklamy třetích stran nebo vložená videa, která se načítají později. Jedním ze způsobů, jak tento problém řešit, je použití vlastnosti aspect-ratio v CSS. Tato vlastnost je poměrně nová a umožňuje vývojářům nastavit poměr stran pro obrázky a neobrázkové prvky.

Poskytnutí této informace umožňuje prohlížeči automaticky vypočítat vhodnou výšku, když šířka vychází z velikosti obrazovky, podobně jako je tomu u obrázků

Vyhněte se animacím/přechodům

Častou příčinou posunů rozvržení je animace prvků na webu, jako jsou bannery, cookie lišty nebo jiné oznamovací bannery, které se posouvají shora nebo zdola.

Tyto animace mohou vytlačit ostatní obsah a ovlivnit tak systém CLS. I když se tak neděje, jejich animace může mít vliv na systém CLS. Podle společnosti Google mají stránky, které animují jakoukoli vlastnost CSS, jež by mohla ovlivnit rozvržení, o 15 % nižší pravděpodobnost "dobrého" CLS.

Chcete-li tento problém zmírnit, je nejlepší vyhnout se animaci nebo přechodu jakékoli vlastnosti CSS, která vyžaduje, aby prohlížeč aktualizoval rozvržení, pokud to není reakce na vstup uživatele, například klepnutí nebo stisknutí klávesy.

Pro přechody a animace se doporučuje používat vlastnost CSS transform, pokud je to možné.

Optimalizace zpoždění prvního vstupu (FID)

First Input Delay (FID) je metrika, která měří, jak rychle webové stránky reagují na interakce uživatele.

Ačkoli většina webových stránek dosahuje v této oblasti dobrých výsledků, podle společnosti Google je zde prostor pro zlepšení.

Nová metrika společnosti Google, Interaction to Next Paint (INP), je potenciální náhradou za FID a níže uvedená doporučení se týkají jak FID, tak INP.

Vyhněte se dlouhým úlohám nebo je rozdělte

Úlohy jsou všechny samostatné práce, které prohlížeč provádí, včetně vykreslování, rozvržení, parsování a kompilace nebo spouštění skriptů.

Pokud úlohy trvají dlouho, déle než 50 milisekund, blokují hlavní vlákno a ztěžují prohlížeči rychlou reakci na vstupy uživatele.

Abyste tomu předešli, je užitečné rozdělit dlouhé úlohy na menší tím, že hlavnímu vláknu poskytnete více příležitostí ke zpracování kritické práce viditelné pro uživatele.

Toho lze dosáhnout častým ustupováním hlavnímu vláknu, aby aktualizace vykreslování a další interakce s uživatelem mohly probíhat rychleji.

Vyhněte se zbytečným JavaScriptům

Webové stránky s velkým množstvím JavaScriptu mohou vést k tomu, že úlohy budou soupeřit o pozornost hlavního vlákna, což může negativně ovlivnit odezvu webu.

K identifikaci a odstranění nepotřebného kódu ze zdrojů webu můžete použít nástroj pro pokrytí v nástroji Chrome DevTools.

Snížením velikosti zdrojů potřebných během načítání stráví web méně času analyzováním a kompilací kódu, což povede k plynulejšímu uživatelskému prostředí.

Vyhněte se velkým aktualizacím vykreslování

JavaScript není jediná věc, která může ovlivnit odezvu webových stránek. Také vykreslování může být nákladné a narušovat schopnost webu reagovat na uživatelské vstupy.

Optimalizace práce s vykreslováním může být složitá a závisí na konkrétním cíli. Existují však některé způsoby, jak zajistit, aby aktualizace vykreslování byly zvládnutelné a neproměnily se v dlouhé úkoly.

Společnost Google doporučuje následující postupy:

• Vyhněte se používání funkce requestAnimationFrame() pro provádění jakékoli nevizuální práce.
• Udržujte malou velikost DOM.
• Používejte omezující prvky CSS.

Závěr

Core Web Vitals jsou důležitou metrikou pro poskytování pozitivního uživatelského zážitku a umístění ve výsledcích vyhledávání Google.

Ačkoli všechna doporučení společnosti Google stojí za implementaci, tento zkrácený seznam je realistický, použitelný pro většinu webových stránek a může mít smysluplný dopad.

Patří sem používání sítě CDN pro snížení TTFB, nastavení explicitních velikostí obsahu na stránce pro zlepšení CLS, zajištění způsobilosti stránek pro bfcache a vyhýbání se zbytečným JavaScriptům a animacím/přechodům pro FID. Dodržováním těchto doporučení můžete lépe využít svůj čas a vytěžit ze svých webových stránek maximum.

Zdroj: marketingland.com, facebook.com, cpcstrategy.com

Autor: Vlastimil Malík

Foto zdroj: pixabay.com