Layout shift reservation (aspect-ratio, width/height)
Telling the browser how big something will be before it loads, so text stops jumping around when images, ads, and embeds arrive.
See it
What it is
Anything that arrives late and takes up space (images, iframes, ads, embeds, injected banners) pushes whatever is below it down. The fix is to describe the size before the content exists. On an img or video, plain width and height attributes are enough: modern browsers turn them into a default aspect-ratio, so even a fluid, responsive image holds the right shaped hole while it downloads.
For anything without intrinsic dimensions, use the CSS aspect-ratio property (16 / 9 for a video embed, 1 / 1 for an avatar) or a min-height on the slot. Ad and third-party widget containers deserve a hard min-height sized to the most common creative, even if it leaves whitespace sometimes. Skeleton screens work only if the skeleton is the same size as the real content, which is where most of them fail.
The trap with width and height attributes: they only do their job if your CSS keeps the ratio. The usual pattern of img { width: 100%; height: auto } works, but a blanket img { height: 100% } or a rule that sets both dimensions throws the reservation away. Also remember shifts you cause yourself: cookie bars, alert strips, and 'loaded' fonts with different metrics inserted above existing content all count against CLS.
Ask AI for it
Eliminate layout shift on this page. Add explicit width and height attributes to every img, video, and iframe matching the real intrinsic ratio, and pair them with CSS width: 100%; height: auto so responsive sizing still works. Give every embed, ad slot, and async widget a container with a CSS aspect-ratio or min-height sized to its typical content. Make skeleton placeholders exactly the dimensions of the content they replace, and never insert banners or notices above existing content after first paint. Report the CLS score before and after.