What is a CLS test and how is Cumulative Layout Shift measured?

A CLS test evaluates Cumulative Layout Shift, a Google Core Web Vital that measures the visual stability of a web page. It calculates the impact fraction and distance fraction of unexpected layout movements during page load.

How to fix CLS caused by web font swaps and FOUT?

To fix font-related CLS, match the fallback font metrics to your web font using CSS @font-face descriptors: size-adjust, ascent-override, and descent-override. This eliminates Flash of Unstyled Text (FOUT) shifts.

How to fix CLS from fluid responsive units and images?

Always set explicit width, height, or aspect-ratio attributes on images and videos. For fluid typography using rem or clamp(), use min-height bounds on containers to prevent dynamic reflow shifts.

Web Speed Insights & Typography Reflow Analyzer

Evaluate Core Web Vitals with real-world CrUX & Lighthouse audits. Pinpoint subtle Cumulative Layout Shift (CLS) causes beyond fixed pixelsâ€”including font fallback metric mismatches, relative unit scaling (rem, em, vw, clamp()), and dynamic line wraps.

Auditing Web Performance

Contacting Google PageSpeed Insights API...

Mobile https://example.com

Performance Good

Accessibility Good

Best Practices Good

SEO Good

0â€“49 Poor

50â€“89 Needs Improvement

90â€“100 Good

Lighthouse Simulated Lab Metrics

Standardized 4G / Throttled CPU Environment. Useful for debugging and reproducible diagnostic benchmarking.

Pictures & Visual Page Load Progression

Step-by-step visual snapshot frames captured during the audit. Observe precisely when layout shifts or font swaps disrupt the content flow.

Cumulative Layout Shift Root-Cause Analysis

Layout shifts occur when elements change their start position between frames. Below is an exhaustive breakdown of every culprit on this pageâ€”classifying font swaps, fallback metric discrepancies, relative unit recalculations (rem, em, vw, clamp), and unsized DOM media.

Total CLS Score 0.000

Rating Good

Shift Culprits 0

Speed Optimization Opportunities

Diagnostics & Technical Audits

Interactive Typography Shift & Metric Sandbox

Experiment with how web fonts, fallback font advance widths, and relative sizing units (rem vs clamp()) trigger or prevent unexpected layout shifts.

Target Web Font

Typography Sizing Unit

Fallback size-adjust: 100%

OS / Browser Font Scale: 100% (Normal)

PRO Diagnostic Insight: System Font Scaling (Scaling UP or DOWN)
Users' device settings (e.g. iOS Dynamic Type, Android Font Sizer, Windows 125%/150% Display Scaling, or browser text-size-adjust) scale text sizes up or down dynamically. If containers use fixed heights (e.g. height: 48px) rather than elastic bounds (min-height: max-content), scaled typography overflows, triggering severe unexpected layout shifts on mobile.

The Modern Web Performance & Semantic Vault

Downstream Content: Watch how this content box moves up or down when the heading above reflows or wraps to multiple lines during font swap!

Simulated Layout Shift Score: 0.0000 (No shift)