Summary
CLS sums unexpected layout shift scores — images without dimensions, dynamic injects, web fonts FOIT/FOUT. Reserve space with aspect-ratio, skeleton sizes, font-display: swap + metric override. User-initiated shifts (within 500ms) discounted differently. Target < 0.1 good.
Code example
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (!entry.hadRecentInput) {
console.log('CLS shift:', entry.value);
}
}
}).observe({ type: 'layout-shift', buffered: true });
Key points
- CLS sums unexpected layout shift scores — images without dimensions, dynamic injects, web fonts FOIT/FOUT.
- Reserve space with aspect-ratio, skeleton sizes,
font-display: swap+ metric override. - User-initiated shifts (within 500ms) discounted differently.