New: Cookbooks and AI ExplanationsStep-by-Step recipes to solve problems connected to Roadmaps and Cheat Sheets. Need more details? Use AI buttons for structured and simple explanations with concrete examples throughout the whole platform.Take a look
A photo loads. The page jumps.
What you'll have at the end
Every image and iframe on the page carries width, height or aspect-ratio, with the layout shift number written down before and after.
You need
A live page you can open in a Chromium browser with developer tools, carrying at least one image and one embedded widget that both load without a reserved width and height.
Not covered
A layout shift caused by a web font swapping in after it downloads; this only reserves space for images and embedded content.
Leans on
Fix a font swap that shifts headings
if the page still jumps after every image and embed is sized, a font swap is the next place to check
Wire web-vitals into your own analytics
once your own reload shows a clean CLS, wire up field measurement so a regression on a page you don't reload every day still gets caught
Checked 25 Aug 2026
Part of the Core Web Vitals and Performance Metrics cookbook