How to Fix a High Cumulative Layout Shift
Stop the page jumping around while it loads by reserving space up front.
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
Declare dimensions on every image and iframe
Reserve space for injected content
Match the fallback font's metrics
Measure on a phone
Code Fix
html<img src="/photo.jpg" alt="…">
<!-- no dimensions: everything below jumps when it loads --><img src="/photo.jpg" width="1200" height="800" alt="…" style="height:auto;max-width:100%">Platform-Specific Instructions
WordPress adds dimensions to images inserted through the editor; images added by hand in a template usually lack them.
next/image requires width and height (or fill with a sized parent), which is why it prevents most image-driven shift by default.
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