Q30: How does the aspect-ratio property prevent Cumulative Layout Shift (CLS)?
The aspect-ratio property defines desired width-to-height ratio dimensions (e.g., 16 / 9) for layout boxes. Reserving container dimensions before media assets finish loading prevents sudden layout shifts, directly lowering Cumulative Layout Shift (CLS).
Reserving Box Aspect Ratios
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
background-color: #f0f0f0;
}💡 The container maintains a 16:9 proportion automatically relative to width adjustments, reserving screen layout space.
Key Takeaways
- Reserves explicit layout box proportions prior to media asset loading.
- Prevents Cumulative Layout Shift (CLS) layout disruptions.
Knowledge Check
Which Core Web Vital metric is improved by setting CSS aspect-ratio on responsive media wrappers?