Cumulative Layout Shift (CLS) Audit & Fix Checklist

CLS OPTIMIZATION AUDIT CHECKLIST

Set explicit width & height on all <img> tags Prevents image layout collapse before asset download.

Reserve DOM container height for dynamic Ads & Banners Use CSS min-height or aspect-ratio on ad slots.

Preload key custom web fonts & use font-display: optional Eliminates Flash of Unstyled Text (FOUT) font reflows.

Use CSS transform instead of top/left/height animations GPU compositor animations do not trigger layout recalculation.

CLS HEALTH SCORE & AUDIT RATING

Estimated CLS Score

0.03

Good (Passed Core Web Vitals) ✓

Google PageSpeed Target: ≤ 0.10 CLS

Checklist Items Passed: 3 / 4 Rules

Core Web Vitals Cumulative Layout Shift (CLS) Guide

Optimizing CLS ensures stable visual page rendering, preventing accidental user clicks on moving UI elements and boosting Google Search Page Experience rankings.

Recommended CSS Rules

img {
  aspect-ratio: attr(width) / attr(height);
  height: auto;
  max-width: 100%;
}

Related SEO & Performance Tools

Audit SERP snippets with the SERP Preview Simulator, analyze metadata with the Meta Tag Analyzer, or test canonical URLs with the Canonical Link Auditor.

Frequently Asked Questions

Common questions about this tool.

What is Cumulative Layout Shift (CLS)? ▼

CLS is a Core Web Vitals metric measuring unexpected visual layout shifts that occur while a page loads (target score is 0.1 or lower).

What causes high CLS scores on web pages? ▼

Images without explicit `width` and `height` attributes, dynamically injected ads or banners, FOIT web fonts, and CSS animations mutating width/height.

How do explicit width and height attributes prevent CLS? ▼

Setting `width` and `height` attributes on HTML `<img>` elements allows modern browsers to calculate aspect ratio and reserve layout space before images load.

What is the CSS `font-display: swap` impact on CLS? ▼

Custom web fonts loaded dynamically cause text layout shifts when fallback system fonts swap to custom fonts. `font-display: optional` eliminates FOIT shifts.

Is my web audit data stored remotely? ▼

100% private. All checklist selections and score calculations run locally in your browser.