Poor CLS (Cumulative Layout Shift) Test Page

This page dynamically inserts content without reserved space to trigger the poor_cls issue.

CLS measures visual stability. Good CLS is 0.1 or less. Layout shifts occur when visible elements change position unexpectedly.

What's wrong?

• Content inserted dynamically without reserved space
• No height/width attributes on dynamic elements
• Content appears above existing content, pushing it down
• CLS score likely exceeds 0.1 threshold

Expected Detection:

Severity: Warning

Threshold: > 0.1

Code location: apps/worker/src/performance/web-vitals.ts:43-58

How to Fix:

• Set explicit width and height on images and videos
• Reserve space for ad slots and dynamic content
• Avoid inserting content above existing content
• Use CSS aspect-ratio for responsive elements
• Preload web fonts to avoid font swap shifts

CLS Thresholds:

• Good: ≤ 0.1
• Needs Improvement: 0.1-0.25
• Poor: > 0.25