SEO
Cumulative Layout Shift
Cumulative Layout Shift measures how much a webpage's visible elements unexpectedly move around on the screen while the page is loading.
also called: CLS
// definition
Layout stability indicator: an evaluation of how frequently and severely visible page components change position during rendering. The calculation multiplies the fraction of the screen frame that shifts by the distance the affected elements travel. Lower decimal scores indicate a stable layout.
This metric differs from speed measures like First Contentful Paint. While render speed tracks timing, layout metrics evaluate visual movement. Fast pages still score poorly when late-rendered images push text. Search engines include this measurement in Core Web Vitals to assess ranking and organic traffic.
// how it works
A visitor opens the home page of a regional credit union to check account options. The main text renders immediately, allowing the visitor to start reading right away. Shortly after, an un-dimensioned promotional banner loads near the top of the browser screen.
As the banner expands downward, it forces the body text down the screen. The distance text moves and the total screen area affected are measured together. That movement generates a decimal score reflecting layout shift, causing accidental taps.
// common mistakes
One frequent error is publishing images or video elements without explicit width and height attributes. Without set dimensions, the browser cannot reserve space before loading media, causing content below to jump downward unexpectedly when rendering completes.
Another mistake involves inserting dynamic banner advertisements above body text without predefined containers. These late-loading ads push paragraphs downward, forcing visitors to lose their reading place or tap incorrect buttons, increasing site abandonment.
// related terms
Core Web Vitals include Cumulative Layout Shift alongside Largest Contentful Paint and Interaction to Next Paint. While layout shift evaluates visual movement, Largest Contentful Paint measures loading speed, and Interaction to Next Paint tracks responsiveness.
Meanwhile, Time to First Byte measures initial server response speed before rendering starts. Together, these metrics summarize page performance.
Questions and Answers
- How does Cumulative Layout Shift affect search rankings?
- Search engines include visual stability metrics directly in their ranking algorithms through Core Web Vitals. Pages with high layout shift scores deliver a poor viewing experience, which negatively impacts search engine visibility and ultimately leads to reduced organic traffic over time.
- Why does a fast page still get a poor score?
- A webpage can load quickly yet still score poorly if dynamic elements shift existing content. Speed metrics like First Contentful Paint measure rendering time, whereas visual stability metrics track whether late-loaded images or advertisements move text after it appears on screen.
- What causes unexpected movement on a webpage?
- Unexpected movement usually happens when media files lack explicit dimensions or when dynamic banner advertisements load late above body text. Without designated height and width attributes, the browser cannot reserve layout space, causing content to jump downward once those late-rendered elements finish loading.
- How do layout shifts harm the user experience?
- Layout shifts frustrate visitors by pushing content away while they are reading or navigating. This sudden movement often causes people to lose their place on the screen or accidentally tap the wrong link, leading to lower site engagement and higher page abandonment rates.