Performance
How to stop layout shift on a page
Set explicit width and height on every image and iframe, reserve space for anything injected after load, and never insert content above what the reader is already looking at. Layout shift is almost always unreserved space.
Before you start
- Access to the templates and CSS
The steps
-
Step 1: Record the shifts
DevTools → Performance → record a page load, then look at the Layout Shift entries in the timeline.
-
Step 2: Add dimensions to every image
width and height attributes, matching the intrinsic aspect ratio. The browser reserves the space before the file arrives.
-
Step 3: Do the same for iframes and video
Embedded maps and players are frequent offenders.
-
Step 4: Reserve space for injected content
Cookie banners, ad slots and notification bars need a container with a fixed height from the start.
-
Step 5: Fix font swap shift
Match the fallback font’s metrics with size-adjust and ascent-override, so the swap does not reflow the text.
-
Step 6: Never inject above the fold
Anything appearing at the top after load pushes everything down, which is the most jarring possible shift.
-
Step 7: Re-record and confirm
CLS should be under 0.1. Aim for zero — it is achievable on a well-built page.
Why this one is worth fixing first
It is the cheapest of the three Core Web Vitals to fix and the most annoying to experience. Everyone has tapped the wrong thing because a page moved under their thumb, and on a checkout that is a lost order.
The aspect-ratio shortcut
Modern CSS aspect-ratio reserves space without hardcoded pixel dimensions, which suits responsive images well. Set it on the container and the browser holds the space regardless of how the image scales.
The background behind this
Core Web Vitals, and the order that actually reduces them covers the reasoning in about 3 minutes — free, ungated, written from client work.
Who wrote this
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada, Ireland and Pakistan. These procedures are the ones I run on client work, written down rather than invented — including the ones where the honest answer is that the fix is not available on your current hosting.