Improve CLS: fix visual instability on your site

Images, fonts, injected content: the three main causes of poor CLS, with the highest-impact fixes and a method to measure your progress on WordPress and every CMS.

You are presenting an audit report to a client, the PageSpeed score shows 91, and yet Search Console flags a red CLS on mobile. The contact button jumps 200 pixels during load, the client saw it, and your report loses all credibility. This scenario is one freelancers and web agencies live through every week.

Improving CLS on a site requires neither a rebuild nor a massive budget. This guide covers how the metric works, the technical causes to investigate, the fixes ranked by impact and the method to measure your progress. Every recommendation applies to WordPress as to other CMSs, and the blocking scripts that slow down loading are among the points to check in parallel.

What CLS is and why it matters for your SEO

CLS within the Core Web Vitals

Cumulative Layout Shift, or CLS, quantifies the visual instability of a web page. Unlike LCP (Largest Contentful Paint) which measures load speed, or INP (Interaction to Next Paint, which replaced FID in March 2024) which evaluates interaction responsiveness, CLS focuses on what the user sees move without having asked for it.

Every unexpected movement of a visible element in the viewport generates a shift score. That score is calculated by multiplying the impact fraction (the share of screen affected) by the distance fraction (the amplitude of the movement). Google aggregates shifts into session windows, each capped at five seconds maximum with less than one second between shifts. The final CLS score corresponds to the highest session window, not the sum of every shift on the page.

Google thresholds and what they imply for SEO

Google considers a CLS below 0.1 to be good. Between 0.1 and 0.25, the page needs improvement. Above 0.25, the score is judged poor. These thresholds apply to the 75th percentile of real visits, measured via the Chrome User Experience Report.

Core Web Vitals have been a Google ranking signal since May 2021. According to Web Almanac 2025 data, 81% of mobile pages achieve a good CLS, compared to only 72% on desktop (HTTP Archive, July 2025). For WordPress sites the picture is often more mixed: themes with many dynamic elements generate uncontrolled shifts that lab tests do not always detect.

The main causes of a poor CLS

Images and media without explicit dimensions

This is the most common cause. When an image is inserted in HTML without width and height attributes, the browser cannot reserve the necessary space before load. The image appears, pushes content down and generates a layout shift. The same problem happens with embedded videos, YouTube iframes and social media embeds.

On WordPress, the Gutenberg editor normally adds dimensions to images uploaded via the media library. But images inserted through page builders (Elementor, Divi, WPBakery) or through custom code in a child theme often lose these attributes. CSS background images are not concerned by CLS since they do not displace adjacent elements, but images in img tags without dimensions remain a common trap.

Web fonts and swap effects

Loading custom fonts triggers two visible phenomena. FOUT (Flash of Unstyled Text) first displays the fallback font, then switches to the final font, which changes character sizes and displaces every element below. FOIT (Flash of Invisible Text) hides the text until the font loads, then displays it suddenly with the same effect.

A site using three or four Google Fonts families without a preload strategy multiplies the risks. In audits run with Orilyt, we regularly observe that sites using more than two custom fonts without preloading consistently present a mobile CLS above 0.15. The fix goes through preloading and a fallback dimensionally close to the final font.

Dynamically injected content

Cookie consent banners, notification bars, chat widgets and ad slots often insert themselves into the DOM after the initial render. If these elements appear above visible content, they push the rest down. Ads are particularly problematic because their final size depends on the real-time auction, making it impossible to reserve a fixed space.

Content loaded through poorly configured lazy loading also causes shifts. A carousel of images that resizes when each slide loads, a form that appears after an AJAX request, or a product recommendation block inserted in the middle of an article: every late injection without reserved space feeds CLS.

Diagnose CLS precisely

Field data vs lab data

CLS diagnosis always starts with field data. Google Search Console shows the Core Web Vitals report, which groups pages by status (good, needs improvement, poor) based on CrUX data from the last 28 days. If Search Console flags a CLS problem, your users are actually experiencing it.

PageSpeed Insights combines field data (CrUX) and lab data (Lighthouse). Field data shows real CLS at the 75th percentile, while Lighthouse only measures CLS at initial load. The gap between the two often reveals post-load shifts invisible in lab tests. It is a fundamental distinction that many professionals overlook, and a single score is never enough to qualify a site's health.

Locate the responsible elements in the browser

In Chrome DevTools, the Performance tab lets you record a full session. The Layout Shifts track displays every shift with a purple marker. Clicking a marker details the displaced element and the amplitude of the move in the Summary panel. Warning: the flagged element is often the victim of the shift (the paragraph that moves), not the cause (the image that inserts above).

The Chrome Web Vitals Debugger extension visually overlays shift zones in real time during navigation. An Orilyt audit automatically identifies images without dimensions, unpreloaded fonts and blocking resources that contribute to CLS. The technical report details every alert with the recommended fix, which significantly speeds up diagnosis for agencies managing multiple sites.

Fix CLS: high-impact interventions

Reserve space for images and media

The most effective fix is to systematically declare width and height attributes on every img tag. The browser then computes the aspect ratio before load and reserves the corresponding space. In CSS, the aspect-ratio property combined with width: 100% and height: auto produces responsive behavior without shift.

On WordPress, the WP Rocket plugin offers an "Add missing image dimensions" option that automatically injects the absent attributes. For iframes and embeds (YouTube, Vimeo, Google Maps), wrap them in a container with aspect-ratio: 16/9 and overflow: hidden. The same technique works for ad slots if you know the slot size.

Optimize font loading

Preload critical font files with a link rel="preload" tag in the head, specifying as="font" and crossorigin. Limit yourself to two WOFF2 files maximum for above-the-fold content. In your @font-face declaration, use font-display: swap to immediately show text in the fallback font, or font-display: optional if you prefer to avoid any visible swap.

Choose a system fallback font whose dimensions approximate your custom font. Arial is a good fallback for sans-serif fonts, Georgia for serif fonts. For sites that want to optimize every millisecond of load time, self-hosting fonts (rather than Google Fonts) removes a DNS request and a third-party network call.

Stabilize dynamic content

For cookie consent banners, use an implementation that overlays content (position fixed or sticky) rather than an insertion that pushes content down. Notification bars at the top of the page must have a fixed height reserved in CSS, even before loading.

For chat widgets, pop-ups and elements injected by JavaScript, two strategies work. Either reserve an empty container at the final dimensions (placeholder), or position the element with position: fixed so it does not disturb document flow. Animations must use the CSS transform property rather than changing top, left, width or height, because CSS transforms do not trigger a layout shift.

Three concrete scenarios for agencies and freelancers

The SMB showcase site with a CLS of 0.32

A WordPress freelancer inherits an 8-page showcase site with a CLS of 0.32 on mobile. The audit reveals three causes: the homepage slider injects images without dimensions, the Montserrat font is loaded from Google Fonts without preloading, and the Calendly appointment widget inserts itself in the footer without reserved space.

By adding width/height attributes to the slider, preloading Montserrat as self-hosted WOFF2, and reserving a 400 px container for Calendly, CLS drops to 0.04 in two hours of work. This kind of fix, documented in a readable, professional client report, justifies a 300 to 500 euro bill and opens the conversation on a maintenance contract.

The WordPress blog with scroll shifts

An agency manages a 200-article blog whose CLS is good at initial load but explodes on scroll. The diagnosis shows that WordPress native lazy loading loads images without a placeholder, causing successive shifts as the reader scrolls down. YouTube embeds in articles lack a dimensioned container.

The fix adds aspect-ratio to every lazy-loaded image and wraps YouTube iframes in a responsive container. Across the 200 articles, a database search-and-replace script handles the problem in a single intervention. Field CLS, measured in Search Console 28 days later, drops from 0.18 to 0.06. The agency bills the work as a performance audit with monthly follow-up.

The e-commerce site with unstable ads

A consultant audits a PrestaShop site whose product pages show a CLS of 0.41. Google AdSense ad slots resize dynamically based on the winning auction. The header contains a promotional bar that appears 2 seconds after load and pushes all content down.

The fix pins ad slots to a minimum size (for example 300x250 for a medium rectangle) and integrates the promotional bar in sticky position with a height reserved in CSS from the first render. CLS drops to 0.09, just below the "good" threshold. For e-commerce, this improvement has a direct impact on conversion rate, because accidental clicks on ads decrease and the shopping experience becomes smooth.

Measure progress and keep CLS good over time

Put continuous monitoring in place

CLS is not a metric you fix once and forget. Every theme update, every new plugin, every added third-party widget can reintroduce shifts. Monthly monitoring via Search Console lets you catch regressions before they affect ranking in search results.

For agencies managing multiple client sites, multi-page monitoring and white-label reports let you track performance metrics continuously and alert as soon as a threshold is crossed. This proactive monitoring turns a one-off engagement into a recurring maintenance contract. Check the Orilyt documentation to include this monitoring in your offer.

Bake CLS into a complete audit workflow

CLS should not be handled in isolation. It fits into the overall evaluation of Core Web Vitals, alongside LCP and INP. A site can have an excellent CLS but a catastrophic LCP which cancels the user experience benefits. A single score is never enough to qualify a site's health.

Include CLS verification in every initial audit, but also in your QA processes after every production release. A Lighthouse test before and after deployment, combined with 28-day CrUX monitoring, is the minimum to verify that your interventions do not introduce unexpected regressions. This rigor of monitoring is what separates a one-shot provider from a technical partner you can trust.

Fixing a site's CLS comes down to eliminating frictions your clients endure without necessarily naming them. A button that jumps, text that moves, a click that lands on the wrong link: these micro-frustrations have a measurable cost in bounce rate and lost conversions. The fixes are often simple, fast and easy to document in a professional report.

For a freelancer or an agency, mastering CLS is a concrete commercial argument. You show the client a visible problem, you fix it in a few hours, and you offer monthly monitoring to prevent regressions. That is exactly the type of intervention that justifies a recurring maintenance contract and builds a durable relationship.

Frequently asked questions

Sources and references

• Google web.dev, Cumulative Layout Shift (CLS) — official documentation of the CLS metric, its calculation and thresholds
• Google web.dev, Optimize Cumulative Layout Shift — official CLS optimization guide with detailed fixes
• HTTP Archive, Web Almanac 2025, Performance chapter — CLS statistics by device and page type (July 2025)
• MDN Web Docs, CSS aspect-ratio — technical reference on the aspect-ratio property for space reservation