How to fix cwv cls on Elementor

Steps for Elementor

1. Open the Elementor editor for the affected page. For every Image widget, click the widget → go to the 'Style' tab → set explicit 'Width' and 'Height' values (in px or %) so the browser reserves exact space before the image loads. Avoid leaving both dimensions set to 'Auto'.
2. For Video widgets, select the widget → 'Style' tab → enable 'Aspect Ratio' (e.g. 16:9) under the widget's settings. Then in the 'Advanced' tab add a CSS class (e.g. 'video-wrapper') and add custom CSS in Elementor → Site Settings → Custom CSS: `.video-wrapper { aspect-ratio: 16/9; width: 100%; }` to lock in reserved space.
3. For any widget that loads dynamic content (Posts, Portfolio, WooCommerce Products grid, etc.), go to the widget's 'Layout' tab and set fixed 'Min Height' values for cards/items so the container does not collapse before content renders.
4. Eliminate font-swap layout shifts: navigate to Elementor → Site Settings → Typography, and for each Global Font set the 'Font Display' property to 'Swap' and, where possible, preload the primary font by adding a `<link rel='preload'>` tag via Elementor → Site Settings → Custom Code (Head).
5. Go to Elementor → Site Settings → Performance (or the active theme's settings if using Hello Elementor) and enable 'Optimized DOM Output'. This reduces extra wrapper `<div>`s that can shift surrounding content unexpectedly.
6. Use Elementor's Responsive Mode (the device icons in the bottom editor bar) to verify that every breakpoint (Desktop, Tablet, Mobile) also has explicit dimensions set — CLS often spikes on mobile where sizes are left 'Auto'. Adjust width/height or aspect-ratio CSS per breakpoint as needed, then click 'Update' to publish.

What is cwv cls?

Cumulative Layout Shift (CLS) measures how much page content unexpectedly moves around while a visitor is looking at it. Every time an image pops in and shoves text down, a banner slides in from a cookie notice, or a font swap causes a paragraph to reflow, that counts as a layout shift. Google adds all those shifts together into a single score; anything above 0.1 is considered "needs improvement," and above 0.25 is "poor." A score of 1.35 (like the example above) means the page is shifting dramatically — visitors are misclicking, losing their place, and bouncing before they buy.

CLS is one of Google's three Core Web Vitals and is a direct ranking signal in Google Search — a poor score actively suppresses your position in search results, reducing organic traffic and revenue. On mobile, where most ecommerce shopping happens, layout shifts are especially jarring: a customer tapping "Add to Cart" can accidentally tap a shifted link instead, killing the conversion. High CLS also signals a low-quality page experience, which increases bounce rate and reduces the trust visitors place in your store. Google's own data shows that sites meeting Core Web Vitals thresholds see measurably better business outcomes than those that don't.

See the complete Cwv cls guide for every platform and the full background.