Optimalizace metriky CLS
Zdravím všechny fanoušky rychlých webů! V průběhu prosince 2023 jsem na meetupu Frontendistů měl přednášku, která se týkala metriky CLS.
Ukazoval jsem zejména problémy s metrikou CLS, které se na webech našich klientů vyskytují nejčastěji, a které pomáháme z webů odstraňovat.
Pojďme se společně podívat, jak se problémům s CLS vyvarovat a také, jak je můžete odstranit, když už se stanou.
Čtěte dále nebo se prostě podívejte na záznam:
1. Aspect-ratio, rozměry, min-height
Každý prvek na stránce má nějakou svou velikost. Může se jednat o obrázek, video, iframe nebo o jinou webovou komponentu. Když dojde k načtení stránky prohlížeč ještě než tento prvek zobrazí, vytvoří pro něj prostor. Do něj pak prvek vykreslí.
Může se stát, že tento prvek není vykreslen ihned v prvním renderu stránky, ale jeho zobrazení je odloženo například pomocí lazyloadingu nebo je jeho obsah donačten pomocí asynchronního JavaScriptu. Typicky se může jednat o nějaký social plugin (Instagram, Facebook, TikTok, Google recenze nebo youtube video).
Těmto prvkům vždy přidejte parametry width
a height
pokud se jedná o obrázky nebo iframe
. Pokud jde o obsah donačtený pomocí JavaScriptu připravte pro prvek prostor pomocí aspect-ratio nebo min-height
v CSS. Zkontrolujte také zobrazení s nějakým „typickým příspěvkem“. Předejdete tak nechtěným posunům layoutu.