CLS (Cumulative Layout Shift) je metrika, ktorá meria, ako veľmi sa obsah stránky počas načítania neočakávane posúva, takže návštevník omylom klikne inam. Je jednou z metrík Core Web Vitals. Dobrá hodnota je najviac 0,1.
Aké hodnoty CLS sú dobré?
| Hodnotenie | Hodnota CLS |
|---|---|
| Dobré | najviac 0,1 |
| Vyžaduje zlepšenie | od 0,1 do 0,25 |
| Slabé | nad 0,25 |
Čo spôsobuje posun obsahu?
- Obrázky a videá bez určených rozmerov.
- Písma, ktoré sa po načítaní zmenia a prepíšu rozloženie textu.
- Reklamy a vkladané prvky, pre ktoré nie je vyhradené miesto.
- Obsah, ktorý sa dynamicky vkladá nad už zobrazený obsah.
Ako posuny obsahu odstránime?
Vyhradíme miesto pred načítaním. Obrázkom a vloženým prvkom určíme rozmery pomocou atribútov width a height alebo pomerom strán v CSS. Animácie robíme cez vlastnosť transform, ktorá nespôsobuje posun okolitého obsahu. Pri obrázkoch s lazy loadingom rozmery platia rovnako.
Čo si zapamätať o pojme CLS?
CLS ukazuje, či je stránka počas načítania stabilná. Väčšinou stačí vyhradiť miesto pre obrázky, vložené prvky a reklamy, aby sa obsah nepresúval.
Ako to rieši webstrankanamieru.sk: Rýchlosť sa rieši už pri stavbe webu a následne pri technickom SEO. Praktický postup nájdete v článku Ako zvládnuť Core Web Vitals a ako web vzniká, popisuje Proces tvorby webstránky. Máte otázku k svojmu webu? Kontaktujte nás.
Súvisiace pojmy: Core Web Vitals, LCP, INP, Lazy loading, Rýchlosť stránky, CSS, Laboratórne a terénne dáta, Optimalizácia obrázkov
Často kladené otázky o pojme CLS
Čo je CLS?
Čo znamená skratka CLS?
Aké je dobré CLS?
Prečo mi stránka skáča?
Je CLS súčasťou Core Web Vitals?
Zdroje
- web.dev: Cumulative Layout Shift (CLS)Definícia CLS, príčiny posunov a hraničné hodnoty.
- web.dev: Lazy load images and iframe elementsRozmery obrázkov pri lenivom načítaní.
- Google Search Central: Understanding Core Web Vitals and Google search resultsCore Web Vitals a vyhľadávanie Google.