pictuary
CompressResizeSocial Media
BlogSize GuideGlossary

← Glossary

web performance and seo

CLS (Cumulative Layout Shift)

CLS (Cumulative Layout Shift) measures how much webpage content unexpectedly moves during loading, damaging user experience.

What is CLS (Cumulative Layout Shift)?

CLS (Cumulative Layout Shift) is a Core Web Vitals metric that measures the visual stability of a webpage by quantifying how much visible content unexpectedly shifts while loading. Google considers CLS scores of 0.1 or below as "Good," 0.1–0.25 as "Needs Improvement," and above 0.25 as "Poor." The score is calculated by multiplying the impact fraction (viewport area affected) by the distance fraction (how far elements move).

Importance of CLS (Cumulative Layout Shift)

Poor CLS scores directly harm user trust and conversion rates when visitors experience jarring layout jumps — text suddenly moving down the page or buttons shifting just as users try to click them. For websites using images, missing width and height attributes on img elements are the leading cause of layout shift globally, making proper image dimensions critical for maintaining good Core Web Vitals scores.

CLS (Cumulative Layout Shift) in Practice

When an e-commerce site loads a product image without declared dimensions, the browser initially allocates zero space for the 800×600 pixel image. Once the 150KB JPEG downloads, the image suddenly appears and pushes all content below it down by 600 pixels, creating a jarring layout shift. According to 2026 Web Almanac data, 62% of mobile pages globally contain at least one unsized image, making this the single most common CLS issue.

CLS (Cumulative Layout Shift) Best Practices

  • → Declare width and height attributes on every img element matching the image's actual pixel dimensions.
  • → Optimize images to consistent aspect ratios before uploading to minimize layout space requirements.
  • → Use CSS aspect-ratio property as a backup to maintain proper spacing if images fail to load.

Example of CLS (Cumulative Layout Shift)

A blog post loads a hero image without width and height attributes. The 1200×800 pixel image file is 200KB, taking 2.3 seconds to download on a 3G connection. During those 2.3 seconds, the browser reserves zero space for the image, then suddenly shifts all article text down by 800 pixels when the image appears — creating a CLS score of 0.34, which Google rates as "Poor."

Related Terms

Core Web VitalsLCP (Largest Contentful Paint)Above the foldHero imageLazy loadingPixel dimensionsfetchpriorityImage optimization

Frequently Asked Questions

What is CLS cumulative layout shift?

CLS (Cumulative Layout Shift) is a Google Core Web Vitals metric that measures how much visible webpage content unexpectedly moves or shifts during page loading. It's calculated as a unitless score where 0.1 or below is considered good, 0.1–0.25 needs improvement, and above 0.25 is poor. High CLS scores indicate a jarring user experience with elements jumping around the page.

What causes layout shift in images?

Images cause layout shift when img elements lack width and height attributes, forcing browsers to allocate zero space initially then suddenly expand when the image loads. This pushes all content below the image down the page, creating a jarring visual jump. According to web performance data, 62% of mobile pages globally have unsized images, making this the most common CLS issue.

How does cumulative layout shift affect website performance?

Poor CLS scores directly harm user experience and conversion rates by causing text to jump while users read and buttons to shift when they try to click them. Google uses CLS as a Core Web Vital ranking factor, so high layout shift can negatively impact search rankings. Studies show that reducing CLS improves user engagement metrics and reduces bounce rates significantly.