CLS: cómo mantener la altura de los elementos (imágenes, componentes JS, iframes...)

En este texto aprenderás por qué y cómo es necesario asegurarse de las dimensiones de los elementos que se insertan de forma asíncrona en la página, como elementos <img>, <iframe> o componentes de JavaScript, a nivel de HTML o CSS.

Preparar adecuadamente el espacio para estos elementos te ayudará a evitar desplazamientos indeseados en la página y, por ende, el deterioro de la métrica Cumulative Layout Shift (CLS), que es parte del conjunto Core Web Vitals.

¿Por qué es necesario controlar las dimensiones y proporciones?#

Cada elemento cargado de forma asíncrona en la página debería tener un tamaño definido. Puede tratarse de una imagen, un vídeo, un iframe o cualquier otro componente web.

Cuando la página se carga y se muestra el contenido por primera vez (evento FCP), el navegador, antes de mostrar este elemento, necesita tener definido un espacio para él.

Veamos soluciones detalladas para elementos específicos.

1. Imágenes, elementos IMG#

El problema más común con la métrica CLS es la falta de dimensiones en las imágenes. El navegador no sabe nada de una imagen hasta que está completamente descargada y mostrada. Si especificas los parámetros width y height en la etiqueta <img>, el navegador web creará el espacio necesario para la imagen.

<img src="image.webp" alt="…" width="1600" height="900" />

En los atributos width y height, es mejor indicar las dimensiones físicas de la imagen en píxeles.

A partir de estas dimensiones, el navegador puede calcular también la proporción, lo que también funciona en imágenes insertadas en un diseño responsive. Siempre que sea posible, especifica las dimensiones en las imágenes. Es especialmente importante para las imágenes que se cargan de forma diferida y tienen el parámetro loading="lazy".

A veces, por razones técnicas, no puedes generar los parámetros width y height en el HTML. Esto se puede sustituir usando la propiedad CSS aspect-ratio, que prepara el espacio según la proporción.

Si no conoces de antemano las dimensiones ni la proporción de las imágenes, puedes utilizar un truco para proporciones automáticas.

.wysiwyg img {
	aspect-ratio: auto 16 / 9;
}

Este ajuste de aspect-ratio asegurará que para cada imagen se establezca una proporción de 16/9, pero una vez descargada y renderizada la imagen, el navegador respetará la proporción real de la imagen.

Es mejor reservar al menos algún espacio que no tener ningún espacio dedicado.

Una imagen sin dimensiones establecidas se renderiza primero con una altura incorrecta, luego desplaza el contenido debajo y genera un cambio de diseño.

2. Componentes de JavaScript en tu sitio web#

Aquí podríamos estar hablando de calculadoras, visores de imágenes tipo slideshow, carruseles con ofertas, etc. Puede ocurrir que este elemento no se renderice de inmediato en el primer renderizado de la página, sino que su visualización se retrase, por ejemplo, mediante lazyloading o su contenido se cargue mediante JavaScript asíncrono.

Siempre reserva espacio en el diseño para estos elementos de antemano. Si se trata de contenido cargado más tarde mediante JavaScript, prepara el espacio para el elemento con la propiedad CSS aspect-ratio o min-height en el archivo de estilos.

Cuando conocemos la proporción:

.box {
	aspect-ratio: 16 / 9;
}

Cuando no conocemos la proporción, insertamos una altura mínima estimada:

.box {
	min-height: 200px;
}

3. Componentes de JavaScript de terceros#

Típicamente, se trata de algún plugin social como Instagram, Facebook, TikTok, reseñas de Google, vídeos de YouTube, etc.

Estos widgets a menudo no se renderizan de inmediato en el primer renderizado de la página, sino que su visualización se retrasa al igual que los componentes mencionados anteriormente.

También reserva espacio en el diseño para estos elementos de antemano. Si no conoces ni la proporción ni las dimensiones exactas, al menos puedes utilizar la propiedad CSS min-height para preparar una altura mínima.

Verifica la visualización con alguna "publicación típica" y ajusta la altura mínima de este componente en consecuencia. Siempre es mejor preparar al menos algún espacio que ninguno. Tal vez no elimines todos los desplazamientos de diseño, pero reducirás significativamente su impacto en la métrica CLS.

Si utilizas el widget de reseñas de Google, reserva espacio para él en la página antes de cargar los datos.

Mini estudio de caso: Carrusel de un servicio externo en Datart#

Datart.cz, en colaboración con PageSpeed.ONE, logró mejorar significativamente los desplazamientos indeseados del diseño en la página principal. El problema radicaba en un carrusel cargado mediante el servicio externo Bloomreach, que se cargaba después del primer renderizado de la página y desplazaba el contenido debajo de él.

La solución fue relativamente sencilla, aunque no fácil de implementar en la solución existente. Reservamos espacio para el carrusel utilizando la propiedad CSS min-height antes de su carga. Gracias a esta modificación, el valor de CLS en la página principal se redujo de 0.6 a 0.06, lo que representa una mejora diez veces mayor.

El gráfico muestra el desarrollo de la métrica CLS en la página principal de Datart. La proporción de mediciones no conformes (área roja) cayó de aproximadamente dos tercios de las visitas de página a un mínimo, mientras que la proporción de mediciones conformes (área verde) aumentó a más del 80 %.

Cómo probar la ausencia de dimensiones o proporciones#

1. Medición local con DevTools en Chrome#

Con el panel Performance, puedes seguir en vivo los cambios en la métrica CLS. En el panel también descubrirás qué está causando el problema.

En este caso, es ideal ralentizar la red en la configuración. Este ajuste revelará las imágenes y componentes sin dimensiones muy rápidamente, ya que se esperará más tiempo por los recursos.

2. Pruebas sintéticas con Lighthouse#

Las pruebas sintéticas con Lighthouse, que puedes realizar en nuestro monitoring de velocidad PLUS, te indicarán qué imágenes no tienen dimensiones y pueden potencialmente causar problemas en la métrica CLS.

Resultado de la prueba de Lighthouse donde se observa el impacto de los elementos en la parte visible de la pantalla sobre el CLS.

Asegurar la altura o la proporción es una de las principales maneras de evitar desplazamientos indeseados de la página y el deterioro de la métrica Cumulative Layout Shift (CLS).

En nuestra ayuda encontrarás también otros métodos para optimizar la métrica CLS.