You start reading a page, an image loads above the text, and everything jumps down. Or you go to tap “Book now” and a banner pushes it away at the last second, so you tap something else. That’s layout shift, and Google measures it as Cumulative Layout Shift, or CLS. I’ll show you how to fix Cumulative Layout Shift on a WordPress site: what the score means, how to see exactly which elements move, and the fix for each common cause.
What CLS measures and why it matters
CLS is a score, not a time. It measures how much visible content moves unexpectedly while someone is on the page, and how far it moves. A score of 0.1 or less is good, 0.1 to 0.25 needs improvement, and above 0.25 is poor, judged at the 75th percentile of real visits.
Two details matter. First, shifts that happen within half a second of a user’s tap or click don’t count, because the user caused them, for example by opening an accordion. Second, CLS is measured across the life of the page, not just the first load, so a banner that slides in after ten seconds still counts.
For a business, layout shift isn’t a cosmetic issue. It causes mis-taps, accidental clicks on the wrong link, and forms that move while people are filling them in. It makes a site feel cheap even when the design is good.
How to see what is shifting
You need to know which elements move before you fix anything.
- PageSpeed Insights: the diagnostics list the largest layout shifts and the elements involved, often with the likely culprit, such as an unsized image or a web font.
- Chrome DevTools: the Performance panel shows CLS live as you load and scroll the page, and highlights the shifted elements. In the Rendering tools you can also turn on layout shift regions, which flash every area that moves.
- Your own eyes on a slow connection: throttle the network in DevTools to a slow setting and reload. Shifts that are invisible on fast Wi-Fi become obvious.
Test on mobile width as well as desktop. Most CLS problems I find are worse on phones, where a shift of a few hundred pixels moves the entire screen.
How to fix Cumulative Layout Shift, cause by cause
Images and videos without dimensions
If the browser does not know an image’s width and height, it reserves no space for it, then pushes everything down when it loads. WordPress adds width and height to images inserted through the editor, but custom code, some sliders and some page builder widgets leave them out. Make sure every image has width and height attributes or a CSS aspect ratio. For video embeds, give the container a fixed aspect ratio such as 16:9.
Web fonts swapping in
With font-display: swap, text first appears in a fallback font, then switches to your web font. If the two fonts have different widths, lines rewrap and the page shifts. The fixes: host fonts locally and preload the main one so it arrives earlier, pick a fallback font with similar proportions, or use the CSS size-adjust descriptor to match the fallback to your font.
Banners, bars and popups injected at the top
Cookie notices, announcement bars, free shipping strips and promo banners that load after the page and push content down are among the most common causes I find. Either overlay them, fixed at the bottom of the screen, or reserve their space in the layout from the start.
Sliders and carousels
Many sliders load all their slides stacked on top of each other, then collapse into a carousel once their script runs. That collapse is a big shift. Give the slider a fixed height with CSS, or replace it with a static hero.
Embeds and ads
Review widgets, Instagram feeds, Google Maps, booking widgets and ad slots arrive late and often at an unknown size. Wrap each one in a container with a minimum height that matches what it usually renders.
Sticky headers that change size
A header that shrinks on scroll, or a sticky bar that appears and changes the page’s height, can shift content. Animate size changes with CSS transforms, which don’t affect layout, rather than changing height or padding directly.
Late content on WooCommerce pages
Product galleries that initialize after load, variation prices that replace the price range, and “you may also like” blocks inserted near the top all shift product pages. Reserve space for the gallery and keep dynamic blocks below the main content.
Content added by JavaScript after load
Currency switchers, “open now” badges, geolocation messages, live review counts and personalized offers are often added by a script once the page has rendered. If they appear above existing content, everything below them moves. Either render them on the server as part of the page, or place them where they can’t push anything, such as inside a box that already has its final size.
Mobile menus and headers that load late
Some themes render a basic header first and then rebuild it with JavaScript on mobile, adding a logo, a phone button or a search bar a moment later. Watch the first second of a page load on a phone. If the header changes height, set a fixed header height for mobile in CSS.
If you have tried all of this and the layout still jumps, the theme itself may be the problem. That’s the kind of issue I fix as part of WordPress speed optimization, and sometimes as part of a cleaner rebuild of the templates.
Checklist
- Run PageSpeed Insights on mobile and note the elements that shift.
- Turn on layout shift regions in DevTools and load the page on a slow connection.
- Add width and height or aspect ratios to every image, video and embed.
- Host and preload your main font, and match the fallback font’s size.
- Move cookie banners and promo bars to an overlay, or reserve their space.
- Give sliders, maps and widgets a fixed minimum height.
- Use transforms for any animation that changes size or position.
Related reading: how to fix Largest Contentful Paint on a WordPress site and a WordPress speed checklist that passes Core Web Vitals.
FAQ: layout shift
What is a good CLS score?
0.1 or less at the 75th percentile of real visits. Above 0.25 is poor.
Do Elementor entrance animations cause layout shift?
Usually not, because they animate opacity and transforms, which do not move other content. They can hurt LCP if used above the fold, which is a different problem.
Why is my CLS fine in lab data but poor in field data?
The lab test only measures the initial load. Real visitors scroll, wait and interact, so late banners, lazy-loaded embeds and shifts further down the page only show up in field data.
Can a plugin fix CLS automatically?
Some optimization plugins add missing image dimensions or preload fonts, which helps. Banners, sliders and embeds usually need a manual fix in the layout.
Ask for a free website review and I’ll send you a short list of the shifts and their causes.
