Layout stability (CLS)

Contents

Overview

Layout stability refers to how visually stable a page remains while it loads and during user interaction. When elements on the page move unexpectedly during page load, this is known as a layout shift.

The metric used to measure this is Cumulative Layout Shift (CLS), one of Google's Core Web Vitals. CLS measures how much visible content shifts on the screen during page load and interaction. Unlike other performance metrics, CLS is not time-based; instead, it measures how much content moves and how far it moves.

Unexpected layout shifts create a frustrating user experience. For example, a user might try to click a link, but the page shifts and they accidentally click something else.

For users in low-resource environments, layout instability is even more noticeable because slow networks and delayed resource loading increase the likelihood of content shifting during rendering.

The goal of a layout stability strategy is to ensure that page structure remains predictable and stable while content loads.

Why this matters for LRO

Users in low-resource environments often experience slower connections, delayed resource loading, and partial page rendering.

When a website loads slowly, images, ads, fonts, and scripts often appear later in the loading process. If space has not been reserved for them, the browser must rearrange the layout when they arrive.

This leads to several problems:

  • Users accidentally click the wrong button or link
  • Text jumps while the user is reading
  • Interactive elements move unexpectedly
  • The page feels unstable and difficult to use

Layout shifts occurring above the fold (the visible part of the page) are particularly disruptive because they affect the content users interact with first.

Ensuring layout stability is therefore critical for creating reliable experiences for users with slow networks or low-end devices.

CLS Performance Benchmarks

Google defines CLS thresholds as follows:

CLS Score Performance Rating
0 – 0.1 Good
0.1 – 0.25 Needs improvement
> 0.25 Poor

A CLS score below 0.1 is considered good performance.

For low-resource optimisation frameworks, the goal should be:

  • Target CLS ≤ 0.1
  • Avoid shifts in the initial viewport
  • Minimise shifts caused by late-loading content

Example image showing layout shift during loading:

Cumulative layout shift example: a late-loading image inserts above the text without reserved space, pushing the content downward and causing an unexpected jump in the reader’s position.
When an image loads late, it pushes the content below it downwards — the kind of unexpected shift that CLS measures.

Explanation

  • Before image loads -> Text appears near the top
  • Image loads later ->Text suddenly moves down

The user reading the text experiences a sudden shift.

Common Causes of Layout Shifts

Several common development patterns cause layout instability.

Images without dimensions

When image width and height are not defined, the browser cannot allocate space for the image before it loads. Once the image finishes downloading, the layout changes and pushes content downward.

Ads and embedded content

Ads, embedded videos, maps, and iframes often load after the page content. If space is not reserved for them, they push existing content downward when they appear.

Dynamically injected content

Content added via JavaScript after page load can push existing content down. Examples include:

  • Notification banners
  • Cookie notices
  • Dynamic recommendations

Web fonts

Web fonts can cause layout shifts when the browser initially displays text in a fallback font and then replaces it with the final font. This can change the width or height of text blocks.

Animations that trigger layout recalculation

Animations that modify layout properties such as top, left, width, or height can cause layout shifts.

Design Principles for Layout Stability

Stable layouts follow a few key design principles:

  • Reserve space for content before it loads
  • Avoid dynamically inserting elements above existing content
  • Keep important content fixed in the layout
  • Ensure predictable loading behaviour

These principles help ensure that users see a stable page structure from the moment the page starts loading.

Implementation Guidance

Always define media dimensions

The most common fix for layout shifts is to define the dimensions of images and videos.

Example:

<img src="dataset.jpg" width="800" height="400" alt="Scientific dataset visualization">

Providing dimensions allows the browser to calculate the aspect ratio and reserve the correct space during layout.

Another approach is to use the CSS aspect-ratio property:

.image-container {
  aspect-ratio: 16 / 9;
}

Reserve space for ads and embeds

Ads and embedded content should always have reserved space.

Before-and-after view where the main content loads first, then a late-loading advertisement inserts above it without reserved space, pushing the content downward and interrupting reading or interaction.
When no space is reserved, an ad loading at the top pushes the existing content downwards, shifting the visible area.

Concept illustrated:

Without reserved space

  • HTML loads
  • Image loads later
  • ext shifts downward

With reserved space

  • HTML loads
  • Space reserved for image
  • Image loads inside the reserved space
  • No layout shift

Example CSS:

.ad-slot {
  min-height: 250px;
}

This ensures the layout does not shift when the ad loads. If exact dimensions are unknown, use placeholders or skeleton components.

Avoid inserting content above existing content

When dynamic content appears at the top of the page, it pushes everything downward.

Better strategies include:

  • Loading dynamic content below existing content
  • Showing notifications as overlays
  • Allowing users to trigger content updates manually

Use safe animation techniques

Animations should avoid properties that trigger layout recalculation.

Avoid:

  • Top, left, width, height

Instead use:

  • transform: translateY()
  • transform: scale()

Transform-based animations do not trigger layout recalculation and therefore do not cause layout shifts.

Optimise web fonts

Fonts can cause layout shifts when fallback fonts are replaced.

Solutions include:

  • Use font-display: swap
  • Choose fallback fonts similar to the final font
  • Preload critical fonts

Example:

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

Do / Don't

Do

  • Define width and height for images and videos
  • Reserve space for ads and embeds
  • Use CSS aspect ratio for responsive media
  • Use transform-based animations
  • Optimise web font loading

Don't

  • Insert content above existing elements after page load
  • Load media without reserved space
  • Use layout-triggering animations
  • Replace fonts without fallback strategies
  • Dynamically resize elements during loading

Checklist

Metrics and Tools

Tools that help detect layout shifts include:

  • Chrome DevTools performance panel
  • Lighthouse performance audits
  • PageSpeed Insights
  • WebPageTest filmstrip analysis

These tools help identify which elements are causing layout shifts during loading.

Real-user monitoring tools can also track CLS in real user environments and help prioritise the most impactful issues.

Use Cases for Scientific Websites

Scientific platforms often include dynamic visualisations, dataset tables, and embedded tools.

Potential CLS risks include:

  • Large figures loading after text
  • Embedded charts resizing dynamically
  • Dataset tables loading progressively

Recommended mitigation strategies include:

  • Reserving space for visualisations
  • Using skeleton placeholders
  • Lazy loading non-critical components

Further Reading


How can we improve this article?

Your feedback will help improve the framework and its documentation and will only be visible to the development team.

Back to top