Nedávno Google prostřednictvím týmu Chrome DevRel sdílel některá doporučení pro optimalizaci výkonu Core Web Vitals v roce 2023.
Core Web Vitals shromažďuje hlavní faktory načítání stránky, když uživatel přistupuje k jejím prvkům a interaguje s nimi. Je to rychlost načítání, vizuální stabilita (kumulativní posun rozvržení nebo CLS) a interaktivita (zpoždění prvního vstupu nebo FID).
Tyto faktory mohou vést k řadě změn ke zlepšení výkonu webů. Které z nich však mají největší dopad a měly by být mezi možnostmi upřednostněny? To je to, co tým sdílel a můžete se na to podívat níže.
Rychlost načítání (LCP)
LCP je metrika, která měří, jak rychle webová stránka uživateli zcela načte svůj obsah.
LCP měří rychlost načítání podle doby vykreslování až do okamžiku, kdy se na obrazovce objeví jeho největší prvek. V současné době má polovina všech webových stránek problémy související s tímto faktorem.
Chcete-li zůstat v limitu zatížení, je nutné:
Ujistěte se, že prostředek LCP je zjistitelný ze zdroje HTML. Obecně platí, že největším prvkem na stránce je obrázek a je třeba jej nalézt ve standardních atributech HTML.
Ujistěte se, že načítání zdroje LCP má na stránce prioritu. Je možné použít atribut fetchpriority=”high” na tagu nebo , který načte váš obrázek LCP.
Použijte síť CDN (Content Delivery Network) k optimalizaci dokumentů a zdrojů Time to First Byte (TTFB), aby první odpověď na dokument dorazila co nejdříve.
Vizuální stabilita (CLS)
Kumulativní posun rozvržení (CLS) je metrika, která měří frekvenci a závažnost neočekávaných změn rozvržení na stránce, ke kterým dochází, když se prvek pohybuje, když s ním uživatel interaguje.
Níže jsou činnosti vizuální stability uvedené společností Google jako prioritní:
Explicitně definujte velikosti pro jakýkoli obsah načtený na stránce. To lze provést pomocí atributů width a height (nebo ekvivalentních vlastností CSS).
Ujistěte se, že vaše stránky jsou způsobilé pro zpětně dopřednou mezipaměť. Stránky, které začaly používat tento mechanismus, zaznamenaly velké zlepšení vizuální stability.
Vyhněte se animacím/přechodům, které používají vlastnosti CSS, které ovlivňují rozvržení. Kdykoli je to možné, upřednostňujte přechody a animace, které používají vlastnost transformace CSS.
Interaktivita (FID)
Zpoždění prvního vstupu (FID) je metrika, která měří rychlost odezvy na první interakci uživatele se stránkou, jako je kliknutí nebo ovládací prvek JavaScript. To je faktor, kterému už většina webů dominuje, ale vždy je co zlepšovat.
FID vyhodnocuje dobu od první interakce uživatele do okamžiku, kdy je web schopen zpracovat odpověď na tuto interakci, což se děje v milisekundách. Toto zpoždění může být způsobeno jinými procesy, jako je paralelní načítání velkého souboru JavaScript.
Toto jsou hlavní akce, které mohou zlepšit rychlost odezvy webu:
Vyhněte se nebo přerušte dlouhé úkoly tím, že je rozdělíte na menší úkoly, aby měl prohlížeč více příležitostí k úpravám.
Vyhněte se zbytečnému nebo nepoužívanému JavaScriptu, který najdete na kartě Pokrytí v části Zdroje v nástrojích Chrome DevTools.
Vyhněte se velkým aktualizacím vykreslování. Chcete-li to provést, můžete: vyhnout se použití requestAnimationFrame() pro jakoukoli nevizuální práci; udržujte svůj objektový model dokumentu (DOM) malý; použít CSS kontejner.
Prioritou zůstává uživatelská zkušenost
Kvalita zážitku na webové stránce závisí na řadě faktorů. Zaměření se na prvky sdílené v tomto článku by však mělo být prioritou mezi SEO analytiky a vývojáři, aby zlepšili použitelnost a dosáhli předních pozic ve výsledcích Google.
Stejně jako v předchozích letech vydal Google v roce 2022 desítky nových aktualizací. Veškerá práce v oblasti SEO však nakonec směřuje ke zlepšení uživatelského zážitku. Čím užitečnější obsah a lepší použitelnost webu, tím lepší výsledky pro značky.