Cumulative Layout Shift is the third of the three Core Web Vitals, alongside Largest Contentful Paint and Interaction to Next Paint, which we cover in their own posts. It’s also the one visitors notice most directly, because it’s the only one they can actually see happening in real time.
What Cumulative Layout Shift Actually Measures
CLS tracks how much visible content moves around unexpectedly while a page loads. You’ve felt this on other sites: you start reading a paragraph, an image above it suddenly loads in, and everything jumps down the page. Or you go to tap a button and an ad or banner loads in at that exact moment, so you end up tapping the wrong thing entirely. Google wants your CLS score under 0.1. Anything above 0.25 counts as poor.
Why This Is Especially Damaging on a Clinic Site
A layout shift at the wrong moment on your site doesn’t just annoy a visitor, it can actively cost you an enquiry. A patient reaching for your “Book Now” button just as a late-loading image pushes it down the page might tap the wrong link entirely, or simply give up out of frustration. This exact scenario is one of the more common, and more avoidable, causes of a bounced booking attempt.
The Most Common Cause: Images Without Dimensions
This is the single biggest source of layout shift on most clinic websites. When an image loads without width and height attributes specified in the code, the browser doesn’t know how much space to reserve for it. It renders the surrounding text and content first, then shoves everything down once the image finally arrives and claims its space.
The Fix: Always Specify Image Dimensions
Every image on your site should have explicit width and height values set, either in the image tag itself or through CSS. This tells the browser exactly how much space to reserve before the image loads, so nothing has to jump once it arrives. Most modern WordPress themes and page builders handle this automatically, but older content, especially images added directly through a classic editor, often lacks it.
Other Common Causes Worth Checking
- Web fonts that load after the page’s initial text renders, causing a visible shift as the browser swaps a fallback font for your actual brand font. We cover font-related speed issues in our fonts post, and the same loading behavior affects layout stability too.
- Ads, embeds, or third-party widgets that inject content after the page loads, such as a chat widget or review badge that appears a second or two late and pushes everything below it down the page.
- Dynamically injected banners or popups, like a cookie consent notice or promotional banner, that appear without space already reserved for them.
- Content that loads above existing content, rather than below it, which causes a more jarring and noticeable shift than content simply appearing further down the page.
How to Find Your Specific Layout Shift Culprits
PageSpeed Insights names the specific elements causing layout shift in its diagnostics section, usually ranked by how much each one contributes to your overall score. This is far more useful than guessing. Fix the highest-contributing element first, then re-test before moving to the next one.
Fixing Font-Related Shift Specifically
If web fonts are a contributor, using the font-display CSS property set to “swap” or preloading your key fonts, both covered in more depth in our font loading post, reduces the visible jump between a fallback font and your final brand font. This won’t eliminate layout shift entirely on its own, but it meaningfully reduces how jarring the swap feels.
Reserving Space for Dynamic Elements
For anything that loads in after the initial page render, chat widgets, cookie banners, promotional popups, reserve a fixed space for it in your page’s CSS ahead of time, even before the element itself has loaded. This way, when it does appear, it fills a space that was already waiting for it instead of pushing other content out of the way.
The Takeaway
Cumulative Layout Shift is one of the more visible speed problems a patient will actually notice while using your site, and it’s also one of the more fixable ones. Specifying image dimensions, handling font loading properly, and reserving space for dynamic elements resolve the vast majority of CLS issues on a typical aesthetic clinic website.
Want to know exactly what’s shifting on your site and why? [Book a free website audit] and we’ll pinpoint every contributing element.
