Corregir Layout Shift causado por imágenes con tamaño automático

Corregir Layout Shift causado por imágenes con tamaño automático

¿Sabías que existe una forma muy sencilla y bastante común de arruinar tus Core Web Vitals con una sola declaración CSS? Está ahí fuera, lo he visto muchas veces y causará estragos en tu CLS.

Aquí está: el pequeño fragmento de código que hará que todas tus imágenes se desplacen en la página automáticamente. ¡Incluso causará un layout shift cuando el width y height de la imagen se hayan establecido explícitamente! ¡Tampoco establecer el valor CSS correcto de aspect-ratio solucionará el problema!

Es un pequeño problema de Layout Shift muy engañoso porque solo ocurrirá en las primeras visitas. Como tú, siendo webmaster, probablemente tendrás la imagen en la caché de tu navegador, es posible que no notes el Layout Shift de inmediato.

<style>
img{
   width:auto;
   height:auto;
   max-width:100%
}
<style>

¿Cómo detectamos el problema?

Es difícil detectar este tipo de problemas que aparecen principalmente para nuevos visitantes con dispositivos móviles de bajo ancho de banda. La respuesta es RUM Tracking. RUM Tracking rastrea los Core Web Vitals de usuarios reales y te reporta los resultados. ¡RUM Tracking es excelente para encontrar problemas ocultos de Core Web Vitals!

¿Cómo funciona?

Este pequeño fragmento de código CSS se utiliza a veces para imágenes responsivas. Cuando una imagen no está pre-cacheada por el navegador, este no tendrá idea del width y height intrínsecos. Con este código, ignorará el width y height establecidos e intentará renderizar la página con el width y height intrínsecos. Como estos son desconocidos, la imagen primero se renderizará a 0x0 píxeles y solo cuando la imagen haya sido descargada y decodificada se volverá a renderizar y ocupará la cantidad correcta de píxeles.

1. El height: auto; se asegurará de que la imagen siempre tenga la altura correcta cuando se redimensione. 
2. El max-width:100%; se asegurará de que la imagen nunca sea más grande que el viewport visible. 
3. La parte de width:auto; generará un layout shift para imágenes no cacheadas incluso cuando establezcas explícitamente el width y height o aspect ratio.

¿Cómo solucionarlo?

La solución es fácil. Simplemente elimina el width:auto. Esto obligará al navegador a usar el width de imagen proporcionado y calcular la altura automática basándose en el height. 

Así que hazte un favor, tómate 15 segundos, inspecciona una imagen aleatoria en tu sitio web (clic derecho, inspeccionar elemento) y busca width:auto; y height:auto; Si lo ves, ¡corrígelo!