Hunting Cumulative Layout Shift: Finding What Moves and Why
A method for tracking down layout shift: reproducing it, reading DevTools shift records, the usual suspects from fonts to widgets, and the fix for each.
Writing
3 write-ups from production, newest first. Each one is a problem hit on a real project and how it was diagnosed and fixed.
A method for tracking down layout shift: reproducing it, reading DevTools shift records, the usual suspects from fonts to widgets, and the fix for each.
CLS spiking on iOS Safari only in CrUX? Here is why aspect-ratio falls back to auto on older Safari builds and the width/height pattern that holds layout.
Trustpilot widget pushing CLS over 0.1 on product pages? Here is the reserved-space pattern and lazy load fix that stops the layout shift on mobile devices.