🎉 Special Offer: 50% OFF Everything! This banner loaded late and pushed content down.

CLS Test Page

This page demonstrates poor Cumulative Layout Shift (CLS) with content that shifts as it loads.

Expected CLS: > 0.25 (Poor)

Products That Shift

Watch as these product images load without dimensions, causing layout shifts.

Laptop

Premium Laptop

High-performance laptop for professionals

$1,299

Smartphone

Latest flagship with amazing camera

$999

Headphones

Wireless Headphones

Premium sound quality and comfort

$299

Important Information

This content will be pushed down when dynamic elements load above it, causing significant layout shift.

Feature 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Feature 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Customer Reviews

Reviews are loading...

Understanding CLS Issues

Cumulative Layout Shift (CLS) measures visual stability. Pages should maintain a CLS of 0.1 or less.

Common causes of poor CLS:

  • Images without dimensions
  • Ads, embeds, and iframes without dimensions
  • Dynamically injected content
  • Web fonts causing FOIT/FOUT
  • Actions waiting for a network response before updating DOM

This page demonstrates:

  • Images loading without specified dimensions
  • Dynamic content insertion pushing existing content
  • Late-loading banner at the top
  • Font changes causing text reflow
  • Dynamic ads appearing after initial render