---
title: "Layout Shift"
slug: "layout-shift"
category: "glossary"
tags: ["glossary", "css", "core-web-vitals", "cls", "layout", "performance", "frontend"]
status: "stable"
last_updated: 2026-08-14
summary: "A layout shift is a visual instability event where a rendered element moves unexpectedly, measured by the Cumulative Layout Shift (CLS) Core Web Vital."
related:
  [
    "[[glossary/cls]]",
    "[[glossary/core-web-vitals]]",
    "[[glossary/box-model]]",
    "[[glossary/container-query]]",
    "[[glossary/viewport]]",
    "[[seo/technical]]",
  ]
---

## Overview

This page is the atomic definition. The Core Web Vitals deep-dive lives at [[seo/technical]]. A layout shift is a visible element moving between frames without user interaction; the browser scores each shift and sums the worst burst into the Cumulative Layout Shift (CLS) metric.

## Definition

A layout shift occurs when a visible element changes its start position between two animation frames without user interaction. The Layout Instability API records each shift as an event with an impact fraction (how much of the viewport moved) multiplied by a distance fraction (how far it moved), producing a shift score. Cumulative Layout Shift (CLS) sums shift scores for the session's largest burst of shifts; a CLS below 0.1 is Good.

Common causes:
- Images and videos without explicit `width` and `height` attributes (browser cannot reserve space before the resource loads).
- Web fonts that swap after render (FOUT or FOIT).
- Dynamically injected banners, cookie notices, or ads above existing content.
- Late-loading JavaScript that rewrites layout.
- Animations that change `top`, `left`, `width`, or `height` (use `transform` instead).

The web browser does not count layout shifts caused by user interaction (click, tap, key press) within 500ms; those are expected and not penalized.

## When it applies

Reserve space for every media element. Set `width` and `height` on `<img>` and `<video>`; the browser uses them to compute the aspect ratio before the resource loads. Use `aspect-ratio` in CSS when dimensions are not known statically. Preload critical fonts and use `font-display: optional` or `font-display: swap` with `size-adjust`. Inject dynamic UI below the fold or reserve explicit height above the fold.

## Example

```html
<!-- Bad: no reserved space -->
<img src="hero.jpg" alt="Hero" />

<!-- Good: aspect ratio reserved -->
<img src="hero.jpg" alt="Hero" width="1200" height="600" />
```

```css
.ad-banner { min-height: 90px; } /* Reserve ad slot space */
.slide-in { transform: translateY(0); transition: transform 300ms; }
```

## Related concepts

- [[glossary/cls]] - the CLS metric that aggregates layout shift scores.
- [[glossary/core-web-vitals]] - CLS is one of the three Core Web Vitals.
- [[glossary/box-model]] - size changes to the box model are a primary source of layout shifts.
- [[glossary/viewport]] - shift fractions are calculated relative to viewport dimensions.
- [[seo/technical]] - CLS affects Google Search ranking via Core Web Vitals.

## Citing this term

> See [[glossary/layout-shift|Layout Shift]] (llmbestpractices.com/glossary/layout-shift).

## Related

- [[glossary/cls]]
- [[glossary/core-web-vitals]]
- [[glossary/box-model]]
- [[glossary/container-query]]
- [[seo/technical]]