How Cumulative Layout Shift Destroys Conversion Rates
You have felt this even if you have never heard the technical name for it. You go to tap a button on your phone, and right as your thumb lands, the page jumps and you have tapped an ad or a completely different link instead. That is cumulative layout shift, and it is quietly costing sites real enquiries.
What is actually happening on the page
Cumulative layout shift, usually shortened to CLS, is one of Google’s Core Web Vitals, and it measures how much visible content moves around after the page has started rendering.
It typically happens because something loads in after the surrounding layout, such as an image without a defined size, an ad slot filling in late, or a font swap that changes text height. Whatever is below that element gets pushed down to make room for it.
If someone was reading or about to tap something in that space when it happened, the thing they land on is whatever is now sitting where their target used to be.
Why this is a conversion problem, not just a technical score
It is easy to treat CLS as a number in a Core Web Vitals report that only matters for rankings. The part that gets missed is what it actually feels like from the visitor’s side.
A genuine enquiry button tap that lands on the wrong element does not usually get corrected. Most people do not scroll back up, notice what happened, and try again carefully. They either land somewhere unintended and get confused, or they get frustrated at the site feeling glitchy and leave.
Either way, that is a lost enquiry that would have shown up as a legitimate click if the page had simply held still.
How to actually find it on your own site
Google’s PageSpeed Insights, the same tool worth running before any speed work, reports a CLS score directly alongside your speed numbers. Anything above 0.1 is worth investigating, and anything above 0.25 is a real problem Google treats as a poor experience.
The score alone will not show you which element is moving though. For that, open Chrome’s developer tools, go to the Performance tab, record a page load, and look for the layout shift entries it flags directly on the timeline.
Clicking into one of those entries shows you exactly which element moved and by how much, rather than leaving you guessing at what to fix.
The usual culprits on WordPress sites
Images without width and height attributes set in the HTML are the most common cause I find. The browser does not know how much space to reserve for the image until it has finished downloading, so everything shifts once it arrives.
The fix is straightforward. Most modern WordPress image handling sets these automatically, but older content, especially images uploaded years ago before your theme or plugin handled this properly, can be missing them entirely.
Web fonts are the second common cause, where a page renders first in a fallback system font, then swaps to your actual brand font once it has downloaded. This swap changes how much space the text takes up. Setting font-display to swap or optional in your font loading, or preloading the font file so it is available sooner, reduces how late that shift happens.
The third, and the one that catches people off guard, is anything injected in dynamically after the initial page load, such as a cookie consent banner, a chat widget, or an ad. If that element does not have space reserved for it in advance, it pushes the whole page down the moment it appears, often right as someone has finished reading the first screen and is about to act on it.
Confirming the fix actually worked
Once you have made a change, do not just trust that it looks better. Rerun PageSpeed Insights and check the CLS score directly, then record another performance trace in developer tools to confirm the specific shift you were chasing is actually gone rather than just smaller.
It is also worth checking this on an actual phone rather than only a desktop browser resized smaller, since mobile connections and mobile rendering can expose layout shifts that do not show up the same way on a fast desktop connection.
Where this fits
This is one half of the layout mechanics side of the structural conversion architecture I work through with clients, sitting alongside the thumb zone and button placement piece that follows it. If you would rather check my current availability or join the waitlist to have your own forms and layout paths structurally reviewed, you can find those details over on the enquiry page.