Reserve Space With aspect-ratio to Kill CLS

Reserve Space With aspect-ratio to Kill CLS

Sometimes you can't know an image's exact pixel size, especially with responsive layouts. The CSS aspect-ratio property still reserves the right shape so nothing jumps. CLS — Cumulative Layout Shift — drops when space is held in advance. Think of it as drawing a chalk outline before the furniture arrives.

Here's the playbook:
—
1. Find a container that loads content late — an image, video, or ad slot.
—
2. In your CSS, add aspect-ratio: 16 / 9; using the content's real shape.
—
3. For a square photo use 1 / 1; for a typical photo use 4 / 3.
—
4. Reload and watch the gap hold steady before content fills it.
—
5. Re-check CLS in your report.

This is perfect for embeds and ads where you can't set fixed pixels.

Try this: Add an aspect-ratio to one embedded video and watch the jump disappear.