Find and fix layout shift (CLS)

Stop the page from jumping while it loads: find what moves, then reserve space for images and late content.

By Frontsiter · Published 11 Oct 2026 · 2 min read

The problem

The page jumps while it loads. You start reading, and the text moves down; you go to tap a button, and it moves away. This is layout shift, measured as Cumulative Layout Shift (CLS). Google counts it as one of the Core Web Vitals, and a good score is 0.1 or less.

Why not hide the page until everything has loaded?

It removes the jump, but visitors stare at a blank screen for longer, which is worse. The browser can show the page straight away and keep it still, as long as it knows how much space each part needs.

The fix

1. Find what moves. Run Lighthouse in your browser's developer tools. The "Avoid large layout shifts" section lists the elements that moved and how much each one added to the score.

2. Give images and videos their size. Add the file's real width and height, and the browser reserves the space before the file arrives. Without them, an image has no space at all, and a video starts as a small default box; both grow when the file loads:

html

<img src="/photo.jpg" alt="…" width="1200" height="800" />
<video src="/clip.mp4" controls width="960" height="540"></video>

This CSS keeps both from overflowing on small screens. They shrink to fit and keep their shape:

css

img, video { max-width: 100%; height: auto; }

3. Reserve space for content that arrives late. A banner, an ad, or an embed that appears after the text pushes everything below it down. Give its container the height it will have, at every screen width:

css

.banner-slot { min-height: 80px; }
@media (min-width: 768px) { .banner-slot { min-height: 52px; } }

4. Match the fallback font's size. Text jumps when a web font replaces the fallback font. See Self-host web fonts without layout shift.

Check that it works

Lighthouse: Cumulative Layout Shift is 0.1 or less, ideally 0, on mobile and desktop.
On a slow connection: load the page with network throttling in the developer tools, and watch that nothing moves.

In our tests, adding width and height took the mobile score from 0.067 to 0 for an image and from 0.072 to 0 for a video, and reserving space for a late banner took it from 0.069 to 0. In Google PageSpeed Insights, Frontsiter's homepage scores 0.035 on mobile and 0 on desktop, well under the 0.1 limit.