You are about to tap a button when an ad loads above it, the text jumps down and you tap the wrong link. That annoying movement is layout shift, and Google measures it with Cumulative Layout Shift, or CLS.
A good CLS score is 0.1 or lower. Anything above 0.25 is rated poor. Unlike LCP and INP, CLS is not about time. It is about how much of the screen moves and how far it moves. The good news is that CLS is usually the easiest Core Web Vital to fix on WordPress once you know what is causing it.
What Causes Layout Shifts
A layout shift happens when something that is already visible changes its position because other content loads in or changes size. The usual suspects are:
- Images and videos without set dimensions.
- Ads, embeds and iframes that load late.
- Web fonts that swap in and change the size of the text.
- Banners, cookie notices and popups that push content down.
- Content injected above existing content, such as a notification bar loaded by a script.
- Animations that move elements by changing their top or margin instead of using transforms.
Step 1: Find What Is Shifting
Open PageSpeed Insights and scroll to the diagnostics section named Avoid large layout shifts. It lists the elements that moved the most. For a visual view, open Chrome DevTools, go to the Performance panel, record a page load and look at the Layout Shifts track. Each shift is highlighted so you can see exactly what moved.
Remember to test on mobile. Many shifts only happen at narrow widths, where stacked layouts and late-loading images push content around.
Step 2: Set Width and Height on Images
When the browser knows an image’s dimensions, it reserves the right amount of space before the file arrives. WordPress adds width and height attributes to images in your content automatically, but themes, page builders and custom code sometimes strip them. Check your hero images, logos and any images added through CSS or custom HTML. If your layout is responsive, pair the attributes with a CSS rule such as max-width: 100% and height: auto, or use the aspect-ratio property.
Step 3: Reserve Space for Embeds and Ads
A YouTube embed, a map or an ad slot has no height until it loads. Give its container a fixed height or an aspect ratio so the page has room waiting. For ads of varying size, reserve the space of the most common size and accept a little empty space in exchange for stability. Better still, replace heavy video embeds with a click-to-load preview image.
Step 4: Handle Fonts Carefully
When a custom font loads after the fallback font is displayed, the text can change size and push everything around it. To reduce that:
- Host fonts on your own domain instead of loading them from a third party.
- Preload the one or two font files used above the fold.
- Use font-display: swap so text is visible immediately.
- Pick a fallback font with similar proportions, and adjust it with size-adjust and related descriptors if needed.
- Use fewer weights and styles.
Step 5: Tame Banners, Popups and Notices
Cookie notices, promo bars and newsletter popups are a leading cause of shifts. Do not insert them into the normal page flow after load. Instead, show them as overlays that sit on top of the content, fixed at the bottom or in a corner, so nothing underneath moves. If a top bar is essential, render it on the server so it is present from the first paint, with reserved height.
Step 6: Animate with Transforms
Animations that change top, left, margin or height force the browser to recalculate the layout and can register as shifts. Use transform and opacity instead, which are handled without moving surrounding elements. Shifts that happen within 500 milliseconds of a tap or click are excluded because they are expected, but that exclusion does not cover animations that run on their own.
Step 7: Watch Page Builder Behavior
Some builders load their layout CSS late or rely on JavaScript to size sections, which causes visible jumps. Keep above-the-fold sections simple, avoid sliders and carousels at the top of the page and make sure critical styles load in the head. Lean block-based layouts are usually more stable than layouts that depend on scripts to finish drawing.
Common Mistakes to Avoid
- Fixing the homepage only. CLS is measured per page group, so check templates such as blog posts and product pages too.
- Relying on one lab test. Shifts can depend on ads, cookies and screen size, so confirm with field data.
- Lazy-loading everything. Images below the fold are fine, but the lazy-loading script itself must not change layout.
Check the Result
After you make changes, retest in PageSpeed Insights and watch the Core Web Vitals report in Search Console. The field data uses a 28-day rolling window, so improvements show up gradually.
Still seeing movement you cannot trace? Send me the URL and I will find the element responsible. For the bigger picture, start with my plain-English Core Web Vitals guide.
