Cumulative Layout Shift (CLS) measures a page's visual stability: how much elements unexpectedly move around while content loads. A high CLS score means buttons, text, and images "jump" out of place, causing users to click on the wrong thing or lose their reading position.
CLS is one of the three Core Web Vitals that Google uses as a ranking signal, alongside LCP and INP. A high CLS score hurts both your users and your search rankings.
How Is CLS Measured?
CLS is not measured in seconds or milliseconds — it's a dimensionless score that combines two factors for each layout shift:
- Impact fraction: what percentage of the viewport the element occupied before and after the shift.
- Distance fraction: how far the element moved relative to the viewport size.
The formula is: layout shift score = impact fraction × distance fraction. The page's CLS is the sum of all these scores during the loading session.
Google's Thresholds
| CLS Score | Rating |
|---|---|
| 0.1 or less | Good |
| Between 0.1 and 0.25 | Needs improvement |
| More than 0.25 | Poor |
The goal is to keep CLS at 0.1 or below for Google to consider your page "good" on this metric.
What Causes a High CLS?
Most CLS problems have specific, well-known causes. Identifying them is the first step toward fixing them.
Images and Videos Without Declared Dimensions
When the browser doesn't know an image's size before it loads, it reserves zero space. The moment the image arrives, it pushes all content below it downward. Declaring width and height in HTML (or using the CSS aspect-ratio property) eliminates this problem at the source.
Ads, Embeds, and Dynamically Sized Iframes
Ad blocks typically load late and at a different size than their surrounding container. Always reserve the minimum space with a fixed-height container or a min-height property before the ad appears.
Web Fonts That Cause FOUT or FOIT
When a custom font takes time to arrive, the browser first uses a system font. When it swaps, text can change size and shift other elements. Using font-display: optional or preloading critical fonts with <link rel="preload"> reduces this effect.
Dynamically Injected Content
Cookie banners, notice bars, and support chats that appear above existing content are a frequent source of CLS. If dynamic content must appear at the top, reserve its space in the initial HTML.
How to Diagnose Your CLS
Before fixing, you need to measure. These tools give you real or lab data:
- PageSpeed Insights — combines field data (CrUX) and lab data. Shows the real CLS your users experience.
- Chrome DevTools → Performance — record a session and you'll see each Layout Shift marked on the timeline with its individual score.
- Web Vitals Extension — Chrome's official extension that shows CLS in real time as you browse.
- Search Console → Core Web Vitals — groups your URLs by status (good/needs improvement/poor) using real user data.
Field data (real users) is always more reliable than lab data for CLS, because shifts can depend on connection speed, browser extensions, or user behavior.
How to Improve CLS Step by Step
Once you've identified the source of the problem, these are the most effective fixes:
- Add dimensions to all images and videos. Always include
widthandheightin HTML. Modern browsers automatically calculate the aspect ratio from these values. - Reserve space for ads. Define a container with a
min-heightequal to the expected minimum ad size. - Preload critical fonts. Use
<link rel="preload" as="font">for fonts that appear in the first viewport. - Avoid inserting content over existing elements. If a banner or notification must appear, do it outside the document flow (fixed or absolute position) or reserve its space from the start.
- Use CSS
transformfor animations. Animations that changetop,left,width, orheighttrigger reflows. Usetransform: translate()instead — it doesn't generate layout shifts.
If your site runs on WordPress or another CMS, a web performance specialist can audit and fix these issues systematically without disrupting your current design.
You can also explore more speed guides in our web performance section.
CLS and Its Impact on SEO
Google incorporated Core Web Vitals as a ranking signal in 2021. CLS is part of the "page experience" evaluation alongside LCP and INP. A poor CLS score won't directly tank your rankings, but in competitive niches it can be the tiebreaker when two pages have equivalent content.
Beyond SEO, the real impact is on conversion: a user who clicks the wrong button because the page shifted won't complete a purchase, won't fill out a form, and is unlikely to come back.
Key Takeaways
- CLS measures a page's visual stability during loading; the target is 0.1 or less.
- The most common causes are images without dimensions, dynamically sized ads, web fonts, and late-injected content.
- Use PageSpeed Insights, Chrome DevTools, or Search Console with real user data to diagnose it.
- The highest-impact fix is usually declaring
widthandheighton all images. - A high CLS hurts both user experience and search engine rankings.
Does your site have a CLS score that needs work? Reach out to elenlace.com and we'll run a Core Web Vitals audit to identify and fix every unnecessary shift.
FAQ
Does CLS only affect the initial page load?
Not exactly. Google measures CLS throughout the user's session, though it gives more weight to shifts that occur within the first 5 seconds of loading. Shifts triggered by user interactions (like expanding an accordion) don't count negatively.
Is a CLS of 0 possible and desirable?
Yes, it's possible and it's the ideal. Many well-built static pages have a CLS of 0. The realistic goal for pages with ads or dynamic content is to stay at 0.1 or below.
Do CSS background images also cause CLS?
CSS background images generally don't cause CLS because the container's space is already defined by its content or CSS properties. The problem is with <img> tags without declared dimensions.
How do I know if my CLS actually improves after making changes?
Field data in PageSpeed Insights and Search Console has a 28-day delay (CrUX data window). To verify improvements immediately, use Chrome DevTools in performance recording mode or the Web Vitals extension — they give you real-time feedback.
Useful resources
Other providers and guides worth comparing:
