Cumulative Layout Shift (CLS)

What Is CLS and Why Does It Matter?

1. 1<strong>Optimise images and media</strong> — specify dimensions to allocate space before loading
2. 2<strong>Use stable fonts</strong> — use web-safe fonts or configure font-display settings to prevent text reflow
3. 3<strong>Lazy-load non-essentials</strong> — delay loading of non-critical content below the fold
4. 4<strong>Optimise CSS and JavaScript</strong> — ensure efficient code that does not cause late layout recalculations
5. 5<strong>Allocate space for ads</strong> — designate specific space for advertisements to prevent dynamic shifts

Using Lighthouse in Chrome

1. 1Right-click your page and select Inspect to open Developer Tools
2. 2Navigate to the Lighthouse tab and select the Performance category and device type
3. 3Click 'Generate report' to run the audit
4. 4Review results — a CLS score below 0.1 indicates good visual stability
5. 5Implement any recommendations and retest after changes