Cumulative Layout Shift Resources

A complete library of CLS guides — from understanding the metric and reading your score, to fixing specific causes, improving CLS on WordPress or Shopify, and understanding how CLS fits into Google's Core Web Vitals framework.

Understanding CLS

Foundation

What Is Cumulative Layout Shift?

The complete definition of CLS: how the Layout Instability API detects shifts, how the score is calculated from impact fraction and distance fraction, what session windows are, and why CLS matters for user experience and SEO.

Read the guide →
Score & Thresholds

CLS Score and Thresholds Explained

What the CLS score actually represents, how the 0.1 (Good) and 0.25 (Poor) thresholds were determined, why lab and field scores often differ, and what CLS scores look like across different site types.

Read the guide →
Core Web Vitals

CLS and Core Web Vitals

How CLS fits into Google's Core Web Vitals framework alongside LCP and INP, how the 75th-percentile assessment works in Search Console, the history of the metric, and how to prioritize CLS within a broader performance program.

Read the guide →
SEO

CLS and SEO

How CLS functions as a Google ranking signal, why field data — not lab data — is what Google measures, the indirect SEO effects of poor visual stability on bounce rate and conversions, and how to report CLS improvements to clients.

Read the guide →

Measuring & Fixing CLS

Measurement

How to Measure CLS

Seven methods for measuring CLS — PageSpeed Insights, Google Search Console, Chrome DevTools, Lighthouse CLI, the web-vitals JavaScript library, and the CrUX API and BigQuery dataset — with guidance on when to use each.

Read the guide →
Fixes

How to Fix CLS

Specific remediation techniques for every common cause of layout shift: image dimensions, ad space reservation, web font loading, dynamic content injection, CSS animation best practices, sliders, and third-party scripts.

Read the guide →

Platform-Specific Guides

WordPress

CLS in WordPress

WordPress-specific CLS causes and fixes: images without dimensions, page builders (Elementor, Divi, WPBakery), plugins (GDPR banners, ad management, sliders), WP Rocket configuration, web font optimization, and verification steps.

Read the guide →
Shopify

CLS in Shopify

Shopify-specific CLS causes and fixes: product images in Liquid templates, app-injected elements (cookie bars, chat widgets, upsell panels), hero slider configuration, and the CLS improvements in Online Store 2.0 themes.

Read the guide →

Test Your CLS Score — Free

Enter any URL to get your Cumulative Layout Shift score, field data from real Chrome users, and a breakdown of the specific elements causing shifts. No sign-up required.

Run the Free CLS Test