¿Cómo optimizar el Cumulative Layout Shift (CLS)?

La semana pasada revisamos qué es el Cumulative Layout Shift (CLS), una métrica de Google que detecta movimientos inesperados dentro del contenido de tu sitio web, mide la suma total de todas las puntuaciones de los cambios de diseño individuales para cada cambio de diseño inesperado que ocurre durante toda la vida útil de tu página.

Y como ya sabrás, esta forma parte del algoritmo de búsquedas de Google, por lo que tu sitio web debe estar a la altura para un correcto SEO. Es por ello que esta semana veremos qué parámetros debes considerar para optimizar el CLS en tu sitio web.

¿Qué está causando el movimiento inesperado de contenido (CLS)?

Según Google, las causas más comunes de CLS alto son:

• Imágenes sin especificar las dimensiones.
• Anuncios o iframes incrustados sin dimensiones.
• Contenido añadido dinámicamente, como por ejemplo un Chat en tu sitio web.
• Fuentes web que causan flashes de texto invisible (FOIT) y flashes de texto sin estilo (FOUT).
• Acciones que esperan una respuesta de red antes de actualizar el DOM.

¿Cómo optimizar el movimiento inesperado de contenido (CLS)?

Uso de valores font:display y link rel=preload

Si tu sitio está utilizando fuentes que están alojadas en tu sitio web o de terceros, podría ser la causa principal de FOIT (Flashes Of the Invisible Text) y FOUT (Flashes Of the Unstyled Text).

Cuando el navegador del usuario descarga las fuentes del servidor, a menudo muestra espacio en blanco hasta que se carga la fuente de tu sitio web. Después de descargar y mostrar la fuente, el diseño generalmente se mueve bastante. Se llama FOIT (Flashes Of the Invisible Text).

Otro escenario ocurre cuando el navegador muestra una de las fuentes del sistema, la que el usuario tenga por defecto en su equipo, hasta que se descarga la fuente del sitio web. Esto se llama FOUT (Flashes of The Unstyled Text). Dado que la fuente del sistema puede ser diferente a la del sitio web, puede ocupar diferente espacio, con lo que el diseño de tu sitio web podría también moverse después de que se cargue la fuente personalizada en tu sitio web.

Para evitar esto puedes usar valores font:display como auto, swap, block, fallback y optional. Pero si quieres un resultado aún mejor, también puedes precargar las fuentes usando <link rel=preload>, de esta manera se descargan como archivo prioritario, antes de que el usuario pueda ver el contenido de tu sitio web.

Ancho y alto en videos e imágenes

En los viejos tiempos de Internet, los desarrolladores web solían incluir elementos de ancho y alto en todas partes del sitio. Se veía así:

  <img src=”ejemplo.jpg” width=”800′′ height=”300′′ alt=”Ejemplo Imagen”>

Hace unos años, cuando se popularizó los diseños responsive, dejamos de fijar la altura y anchura de las imágenes, de esta forma las adaptamos con CSS según el dispositivo que está visitando el sitio web.

Con el método CSS, el ancho y alto se asigna solo después de que el navegador comienza a descargar la imagen, con lo que dependiendo del diseño, se podría mover al adaptarse la imagen al espacio que le corresponda.

Una solución a esto podría ser, cambiar el tamaño de las imágenes usando la relación al aspecto, la relación entre anchura y altura (ej. 16:9). Esto nos permite que el navegador calcule el espacio necesario para mostrar la imagen y reducir así el riesgo de algún movimiento inesperado de contenido (CLS).

Contenido cargado dinámicamente

CLS ignorará todos los cambios en el contenido que aparecen dentro de medio segundo de la entrada del usuario. Esto significa que la evaluación del CLS se detiene durante 500 ms después de cada interacción del usuario con tu sitio web. Por lo tanto, si el cambio de diseño o contenido es intencional y causado por el usuario, no afectará en la valoración de CLS.

El contenido cargado dinámicamente, como la carga de contenido desde una API por ejemplo, nunca debe aparecer una vez que el sitio web ya está cargado. La única excepción a esta regla, es que cargues el contenido dinámicamente dentro de estos 500 ms al entrar por primera vez en el sitio web o posteriores a una interacción.

Conclusión

Optimizar el CLS puede ayudarte a diagnosticar por qué los usuarios no están satisfechos con tu sitio o cómo podrías mejorar su experiencia. Recuerda que CLS forma parte del algoritmo de búsquedas de Google, por lo que optimizar CLS, te hará desmarcarte de tu competencia en SEO.

Photo by dylan nolte on Unsplash

Referencias:
· Cumulative Layout Shift (CLS)