1. Home
2. web
3. Preventing Cumulative Layout Shift with CSS aspect-ratio

Understanding Cumulative Layout Shift

Cumulative Layout Shift (CLS) is one of Google’s Core Web Vitals metrics that measures visual stability. It quantifies how often users experience unexpected layout shifts. A high CLS score harms user experience and SEO rankings. The primary cause? Media elements (images, videos, iframes) loading without reserved space.

How CSS aspect-ratio Works

The aspect-ratio CSS property lets you declare the ratio of width to height for any element. The browser reserves space accordingly, preventing the layout from jumping when content loads.

/* Reserve a 16:9 aspect ratio */
.responsive-video {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

The syntax is intuitive: aspect-ratio: <width> / <height>. You can also use a decimal value, where aspect-ratio: 2 is equivalent to 2 / 1.

Preventing Layout Shifts for Images

Before aspect-ratio, developers used the padding-bottom hack to reserve space. Now it’s much simpler:

/* Traditional padding-bottom hack (old way) */
.image-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
}

/* Modern aspect-ratio (new way) */
.image-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}

For responsive images, combine aspect-ratio with max-width:

img {
  max-width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

This last approach uses the image’s native dimensions — if an <img> has width="800" and height="600", the browser calculates aspect-ratio: 800 / 600 automatically.

Videos and Iframes

Embedded content from YouTube, Vimeo, or other platforms is especially prone to causing CLS. The aspect-ratio property handles these cleanly:

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.video-container iframe {
  width: 100%;
  height: 100%;
}

Combining with max-width for Responsive Sizing

A common pattern is a fixed aspect ratio with responsive width constraints:

.card-image {
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: cover;
}

The object-fit: cover ensures the image fills the container without distortion.

Performance Impact on Core Web Vitals

Proper aspect-ratio usage directly improves CLS scores:

Browser Support

The aspect-ratio property is supported in all modern browsers:

For older browsers, the property degrades gracefully — the element renders without the reserved space, which is functionally identical to the pre-aspect-ratio behavior.

Best Practices Summary

1. Always set width and height attributes on <img> tags — the browser uses these to derive the aspect ratio even before CSS loads
2. Use CSS aspect-ratio as a backup for derived ratios or complex layouts
3. Test with Lighthouse — the CLS section identifies elements causing layout shifts
4. Combine with object-fit for consistent image cropping across viewports

Conclusion

CSS aspect-ratio is one of the most impactful modern CSS features for improving Core Web Vitals. By reserving space for dynamic content before it loads, you eliminate layout shifts without hacks or JavaScript. Every developer should adopt this property as a standard part of responsive image and media handling.