Entendiendo Cumulative Layout Shift
CLS es una métrica de Core Web Vitals que mide la estabilidad visual. Un CLS alto daña la experiencia de usuario y el SEO. La causa principal son elementos multimedia que cargan sin espacio reservado.
Cómo funciona aspect-ratio
aspect-ratio declara la proporción ancho/alto de un elemento. El navegador reserva espacio, evitando saltos de layout.
.responsive-video { aspect-ratio: 16 / 9; width: 100%; height: auto; }
Uso con imágenes
Reemplaza el viejo truco de padding-bottom. Combina con max-width y object-fit para resultados óptimos.
Impacto en rendimiento
| Escenario | CLS | Valoración |
|---|---|---|
| Sin ratio | 0.25 | Malo |
| aspect-ratio CSS | 0.02 | Excelente |
| aspect-ratio + atributos | 0.01 | Perfecto |
Soporte
Compatible con todos los navegadores modernos (Chrome 88+, Firefox 87+, Safari 15+, Edge 88+).
Mejores prácticas
- Siempre pon atributos width/height en
<img>2. Usa aspect-ratio como respaldo 3. Prueba con Lighthouse 4. Combina con object-fit.