CLS (Cumulative Layout Shift)

CLS (Cumulative Layout Shift) is a unitless score that adds up unexpected movements of visible elements while a page is open. Each shift is scored as impact fraction multiplied by distance fraction, and the reported value is the worst burst of shifts (a window of up to 5 seconds).

Why it matters

Layout shifts make people tap the wrong button or lose their reading position. Google's "good" threshold is 0.1 or less at the 75th percentile. Shifts that happen within 500 ms of a user input, such as opening a menu, are excluded because the user expected them.

Example

An article loads text first, then an ad slot injects 250 px of content above it, pushing the paragraph down. Reserving space prevents this:

<img src="photo.jpg" width="800" height="450" alt="">
<div style="min-height:250px"><!-- ad loads here --></div>

With width and height set, the browser reserves the aspect ratio before the file arrives.

Common mistakes

• Omitting image and iframe dimensions.
• Injecting banners or cookie notices above existing content instead of overlaying them.
• Font swaps that change text size; match fallback metrics or use size-adjust.
• Animating top or margin instead of using transform.

Related

• Core Web Vitals
• Font loading (FOIT and FOUT)
• Above the fold
• Third-party script

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.