LLM Best Practices

Layout Shift

2 min read

View markdown source

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

<!-- Bad: no reserved space -->
<img src="hero.jpg" alt="Hero" />
 
<!-- Good: aspect ratio reserved -->
<img src="hero.jpg" alt="Hero" width="1200" height="600" />
.ad-banner { min-height: 90px; } /* Reserve ad slot space */
.slide-in { transform: translateY(0); transition: transform 300ms; }
  • cls - the CLS metric that aggregates layout shift scores.
  • core-web-vitals - CLS is one of the three Core Web Vitals.
  • box-model - size changes to the box model are a primary source of layout shifts.
  • viewport - shift fractions are calculated relative to viewport dimensions.
  • technical - CLS affects Google Search ranking via Core Web Vitals.

Citing this term

See Layout Shift (llmbestpractices.com/glossary/layout-shift).

Graph View

Backlinks