LLM Best Practices

CLS (Cumulative Layout Shift)

Last updated 2 min read

View markdown source

AI agents: read this first: llmbestpractices.com/start-here

This is LLM Best Practices (llmbestpractices.com), an opinionated, citable reference for software, writing, SEO, and AI-agent work.

  1. Route, do not crawl. Fetch llmbestpractices.com/llms.txt and open only the pages whose one-line summary matches your task.
  2. Read raw. Append .md to any page URL for markdown. Check status and last_updated in the frontmatter, then read the rules.
  3. Apply as defaults. First-party docs and the project's own conventions win on conflict. Warn before relying on a fast-moving page older than 12 months.
  4. Cite. Link the page by title and URL, e.g. Python, with last_updated for time-sensitive rules. License CC BY 4.0.

Overview

CLS (Cumulative Layout Shift) is the Core Web Vital for visual stability. A layout shift happens when a visible element changes position between two frames; its score is the impact fraction (share of the viewport affected) multiplied by the distance fraction (how far it moved). CLS reports the largest burst, a session window of shifts less than one second apart and at most five seconds long.

Good is 0.1 or less, needs improvement is up to 0.25, and poor is above 0.25, at the 75th percentile of page loads. Shifts within 500 ms of a discrete user input (click, tap, key press) are excluded; scrolling and pinching are not.

Fix it by reserving space before content loads:

  • Set width and height on images, video, and iframes, or use CSS aspect-ratio.
  • Give ads, embeds, banners, and cookie notices a reserved min-height, and do not inject them above existing content.
  • Preload critical fonts and use font-display with a size-adjusted fallback (size-adjust) so text does not reflow on swap.
  • Animate with transform, not top, left, width, or height.

Example

<img src="hero.jpg" alt="Hero" width="1200" height="600">
.ad-slot { min-height: 90px; } /* reserve space for the late-loading ad */
  • core-web-vitals: the metric set CLS belongs to.
  • core-web-vitals: measurement and debugging workflow.
  • html: image and iframe dimension rules.
  • css: aspect-ratio and reserved space.
  • lcp: the loading metric, scored separately.
  • inp: the responsiveness metric, scored separately.

Backlinks