Co to jest CLS (Cumulative Layout Shift)?
Szybka definicja
CLS mierzy łączną ilość nieoczekiwanych przesunięć układu strony podczas całego cyklu jej życia, określając, jak bardzo widoczna treść się przesuwa.
Cumulative Layout Shift (CLS) is a Core Web Vital that measures visual stability. It quantifies how much the content on a page moves around unexpectedly as it loads. A layout shift occurs when a visible element changes its position from one rendered frame to the next without user interaction.
A good CLS score is under 0.1. Between 0.1 and 0.25 needs improvement, and above 0.25 is poor. The score is calculated by multiplying the impact fraction (how much of the viewport was affected) by the distance fraction (how far elements moved).
Common causes of layout shift include images and videos without dimensions (the browser doesn't know how much space to reserve until they load), ads or embeds that load dynamically and push content down, web fonts that cause text to resize when they load (Flash of Unstyled Text), and content that's dynamically injected above existing content.
Fixing CLS typically involves always including width and height attributes on images and videos, reserving space for ads and dynamic content, using font-display: swap or optional for web fonts with preloading, and avoiding inserting content above existing content. CSS properties like aspect-ratio and min-height can also help reserve space.
Dlaczego jest ważne
Layout shifts are one of the most frustrating user experiences on the web. You're about to click a link, and suddenly the content jumps because an ad loaded. You're reading an article, and the text shifts because an image rendered. These unexpected movements cause misclicks, lost reading position, and user frustration.
As a Core Web Vital, CLS affects your Google rankings. But beyond SEO, fixing CLS directly reduces user frustration and can prevent costly misclicks, especially on mobile where ad-related layout shifts might cause accidental ad clicks.
Przykłady z życia
A news website reduced their CLS from 0.42 to 0.05 by reserving space for ad slots and adding dimensions to all images, resulting in 30% longer average reading sessions
An e-commerce product page had a CLS of 0.35 because customer review stars loaded late and pushed the "Add to Cart" button down, causing misclicks; fixing this improved the add-to-cart rate by 8%
A blog fixed their CLS issue caused by web fonts loading late by preloading the font file and using font-display: optional, eliminating text layout shifts entirely
A landing page reserved fixed dimensions for a video embed that was causing content below it to jump, bringing CLS from 0.28 to 0.02
Powiązane pojęcia
Core Web Vitals
Core Web Vitals to trzy konkretne metryki Google mierzące rzeczywiste doświadczenia użytkowników: wydajność ładowania (LCP), interaktywność (INP) i stabilność wizualną (CLS).
LCP (Largest Contentful Paint)
LCP mierzy czas potrzebny do wyrenderowania największego widocznego elementu treści na stronie, takiego jak obraz główny lub nagłówek.
Lazy Loading
Lazy loading to technika opóźniająca ładowanie niekrytycznych zasobów, takich jak obrazy poniżej fold, do momentu, gdy są naprawdę potrzebne.
Responsive Design
Responsywny design to podejście do tworzenia stron, które pozwala witrynom dostosowywać się do każdego rozmiaru ekranu — od monitorów po smartfony.
Potrzebujesz pomocy z cls (cumulative layout shift)?
Nasz zespół może pomóc Ci zastosować to pojęcie w praktyce. Uzyskaj bezpłatną konsultację, aby omówić swój projekt.