Skip to main content
SlapMyWeb
Slap a site

Performance fix

How to Fix a High Cumulative Layout Shift

Stop the page jumping around while it loads by reserving space up front.

Difficulty
Medium
Impact
High
Time
1-2 hours

Before

<img src="/photo.jpg" alt="…">
<!-- no dimensions: everything below jumps when it loads -->

After

<img src="/photo.jpg" width="1200" height="800" alt="…" style="height:auto;max-width:100%">
Before and after code for: How to Fix a High Cumulative Layout Shift

Cumulative Layout Shift measures how much content moves while the page loads. A good score is 0.1 or less. Nearly all shift comes from three things: images and iframes without declared dimensions, content injected above existing content, and web fonts swapping in at a different size to the fallback.

Why it matters

Layout shift is the failure people actually notice: the tap that lands on the wrong thing because a banner appeared. It is a Core Web Vital measured on real visits, not in a lab.

How to fix it

  1. Declare dimensions on every image and iframe

    Width and height attributes let the browser reserve the right space before the file arrives. CSS can still size it responsively.

  2. Reserve space for injected content

    Banners, ads and consent notices that appear after load should occupy a container sized from the start rather than pushing content down.

  3. Match the fallback font's metrics

    Use font-display: swap with size-adjust, or a fallback chosen so the swap does not change line count.

  4. Measure on a phone

    CLS is worst on narrow viewports, where a single unsized image can move everything below it.

The code

Beforehtml
<img src="/photo.jpg" alt="…">
<!-- no dimensions: everything below jumps when it loads -->
Afterhtml
<img src="/photo.jpg" width="1200" height="800" alt="…" style="height:auto;max-width:100%">

On your platform

WordPress

WordPress adds dimensions to images inserted through the editor; images added by hand in a template usually lack them.

Next.js

next/image requires width and height (or fill with a sized parent), which is why it prevents most image-driven shift by default.

Sources

More fixes

Performance

How to Minify Your CSS

Strip comments and whitespace from stylesheets to cut their size by 30-50%.

Performance

How to Minify Your JavaScript

Compress JS by removing comments, whitespace and shortening names: often a 40-60% reduction.

Performance

How to Lazy-Load Off-Screen Images

Defer images below the fold so they don't compete with the initial render.

Fixed that one.
Now find the rest.

A free audit ranks every issue on your site by the score points it costs, and links each one straight to its guide.

Run a free audit
Free foreverNo signupLive scan progress