Cumulative Layout Shift (CLS): Kompletní průvodce optimalizací

Cumulative Layout Shift (CLS) je metrika Core Web Vitals, která měří vizuální stabilitu stránky během jejího načítání. CLS hodnotí, jak moc se prvky na stránce neočekávaně posouvají, což může negativně ovlivnit uživatelskou zkušenost.

Google doporučuje následující hodnoty CLS:

• Dobrý CLS: < 0,1

• Potřebuje zlepšení: 0,1 – 0,25

• Špatný CLS: > 0,25

Proč je CLS důležitý?

CLS ovlivňuje uživatelskou spokojenost a celkové vnímání kvality webu. Neočekávané změny layoutu mohou způsobit:

• Kliknutí na nesprávný prvek (např. uživatel klikne na tlačítko, které se posune těsně před interakcí).

• Frustraci uživatelů a vyšší míru odchodu (bounce rate).

• Negativní dopad na SEO, protože Google penalizuje weby s vysokým CLS.

Jak se CLS měří?

CLS se počítá na základě posunu viditelných prvků na stránce. Výsledek je součtem jednotlivých layout shift hodnot během celého načítání stránky.

1. Měření pomocí Google PageSpeed Insights

Google PageSpeed Insights poskytuje CLS skóre v sekci Field Data (reálná uživatelská data) a Lab Data (simulované testy).

2. Google Search Console

V sekci Core Web Vitals lze sledovat, které stránky mají problémy s CLS.

3. Chrome DevTools

V Chrome DevTools lze v záložce Performance sledovat posuny layoutu a identifikovat problematické prvky.

4. Web Vitals JavaScript API

Pro měření CLS přímo na webu můžete použít web-vitals.js:

import {getCLS} from 'web-vitals'; getCLS((metric) => { console.log(metric.value); });

Hlavní příčiny vysokého CLS

1. Načítání obrázků bez definovaných rozměrů

   • Obrázky bez width a height způsobují posuny layoutu.

2. Reklamy a vložený obsah (iframe, widgety, bannery)

   • Reklamy se mohou načítat asynchronně, což způsobuje posuny.

3. Dynamický obsah

   • AJAX volání nebo změna obsahu může způsobit posuny layoutu.

4. Nesprávné načítání webfontů

   • Flash of Unstyled Text (FOUT) nebo Flash of Invisible Text (FOIT) mohou způsobit vizuální posuny.

5. Pozdní aplikace CSS stylů

   • Styly aplikované později mohou změnit velikost prvků.

Jak zlepšit CLS?

1. Definování rozměrů médií

• Přidejte pevné rozměry pro obrázky a videa:

<img src="image.jpg" width="600" height="400" alt="Optimalizovaný obrázek">

• Používejte CSS aspect-ratio pro flexibilní velikosti:

img { aspect-ratio: 16/9; }

2. Optimalizace načítání reklam a iframe obsahu

• Rezervujte pevné místo pro reklamy pomocí CSS:

.ad-slot { width: 300px; height: 250px; }

• Používejte lazy loading:

<iframe src="ad.html" loading="lazy"></iframe>

3. Zamezení posunů způsobených webovými fonty

• Používejte font-display: swap; pro rychlé načtení náhradního fontu:

@font-face { font-family: 'CustomFont'; src: url('custom-font.woff2') format('woff2'); font-display: swap; }

4. Použití Skeleton Loaders pro dynamický obsah

• Místo prázdných míst vykreslujte placeholdery:

<div class="skeleton"></div>.skeleton { background-color: #eee; height: 200px; width: 100%; }

5. Minimalizace JavaScriptového reflow

• Používejte transform místo top/left pro animace:

.bad { position: absolute; top: 50px; } .good { transform: translateY(50px); }

Případové studie: Jak snížení CLS pomohlo webům

1. E-commerce web: Snížení CLS o 75 % a zvýšení konverzí

Problém: Produkty na stránce se při načítání pohybovaly kvůli dynamicky načítaným obrázkům.

Řešení:

• Přidání pevné velikosti obrázků

• Zavedení lazy loadingu

• Použití skeleton loaders

Výsledek:

• CLS se snížilo z 0,32 na 0,08

• Konverzní poměr se zvýšil o 25 %

2. Zpravodajský web: Snížení odchodu uživatelů o 20 %

Problém: Reklamy a vložený obsah způsobovaly nečekané posuny stránky.

Řešení:

• Rezervace prostoru pro reklamy

• Optimalizace lazy loadingu widgetů

Výsledek:

• CLS kleslo z 0,40 na 0,09

• Bounce rate se snížil o 20 %

Cumulative Layout Shift je důležitou metrikou pro uživatelskou zkušenost i SEO. Zaměřte se na pevné rozměry médií, správné načítání reklam, optimalizaci webfontů a minimalizaci dynamických změn layoutu.

🔍 Trápí vás vysoký CLS? 

Pomohu vám optimalizovat vizuální stabilitu vašeho webu a zlepšit uživatelskou zkušenost. Kontaktujte mě a prvních 15 minut konzultace máte zdarma!

Napiš mi a začněme vytvářet hodnoty ještě dnes!

Prvních 15 minut konzultace je na mě!