---
title: "Zero-Layout-Shift Rendering"
category: studio-standards
status: required
url: https://webspecification.com/spec/studio-standards/zero-layout-shift/
source_repo: undefined
licence: CC-BY-4.0
---

# Zero-Layout-Shift Rendering

> Strict engineering rules for reserving exact DOM space for images to guarantee a 0.0 CLS.

## What is it?

An engineering mandate ensuring that the Cumulative Layout Shift (CLS) core web vital metric remains exactly 0.0 across the entire lifecycle of a page load. 

## Why does it matter?

Layout shift occurs when an element dynamically changes size or is injected into the DOM, pushing existing content down. This destroys user trust (e.g., clicking the wrong button because the page jumped) and is heavily penalized by Google's search algorithms. A non-zero CLS is considered an unacceptable engineering failure in modern web development.

## How to implement it

### 1. Explicit Image Dimensions
Every single `<img>`, `<video>`, and `<iframe>` must have explicit `width` and `height` attributes in the HTML. The browser uses this ratio to reserve space before the asset downloads.

```html
<!-- Incorrect -->
<img src="hero.jpg" class="w-full h-auto" alt="Hero">

<!-- Correct -->
<img src="hero.jpg" width="1200" height="800" class="w-full h-auto" alt="Hero">
```

### 2. Aspect Ratio for Dynamic Containers
For containers loading dynamic content (like ads or client-side rendered widgets), use the CSS `aspect-ratio` property or a min-height to reserve the exact layout space.

```css
.ad-slot {
  aspect-ratio: 16 / 9;
  background-color: #f3f4f6; /* Placeholder skeleton */
}
```

## Verification

- Run Chrome DevTools -> Performance tab and enable "Web Vitals". Record a page load (with slow 3G throttling) and ensure the "Layout Shifts" track is completely empty.