cls-dimension-anchorlisted

# CLS Dimension Anchor A page that jumps while it loads is a page the user can't trust: the link they were about to tap moves, the paragraph they were reading slides off, the footer lurches down as a chart appears. Every one of those movements has the same cause — something arrived and took space it hadn't been given. The browser lays out what it knows; an image with no dimensions is a 0×0 box until the bytes land, a data region with `height: auto` is nothing until the fetch resolves, a headline in a fallback font is a different width until the web font swaps. Layout shift isn't a performance problem to tune later; it's the absence of a reservation, and reservations are made in markup and CSS before any request goes out. Treat every non-text module as a box that must have a size *before* its content exists. ## Reserve media with intrinsic dimensions `<img>` gets `width` and `height` attributes — the browser derives the aspect ratio from them and reserves the box on first layout, before the request starts. Then CSS makes it responsive without breaking the ratio: ```html <div class="media-aspect-enforcer"> <img src="remote-asset.jpg" alt="Editorial context description" width="800" height="450" class="shielded-image" loading="lazy"> </div> ``` ```css .media-aspect-enforcer { width: 100%; aspect-ratio: 16 / 9; background: var(--rule); overflow: hidden; } .shielded-image { width: 100%; height: 100%; object-fit: cover; display: block; } ``` Belt and braces on purpose