Cómo optimizar el cambio de diseño acumulado

Aprende a evitar cambios repentinos de diseño para mejorar la experiencia del usuario

Cambio de diseño acumulado (CLS) es una de las tres métricas de Métricas web esenciales. Mide la inestabilidad del contenido combinando cuánto cambió el contenido visible en el viewport con la distancia que se movieron los elementos afectados.

Los cambios de diseño pueden distraer a los usuarios. Imagina que empiezas a leer un artículo cuando de repente los elementos cambian por la página, lo que te hace perder la cabeza y te obliga a volver a encontrar tu lugar. Esto es muy común en la Web, incluso cuando lees las noticias o intentas hacer clic en las o "Agregar al carrito" botones. Estas experiencias son visualmente molestas y frustrantes. Suelen producirse cuando se fuerza a mover elementos visibles porque otro elemento se agregó de repente a la página o se cambió su tamaño.

Para proporcionar una buena experiencia del usuario, los sitios deben esforzarse por tener un CLS de 0.1 o menos para, al menos, el 75% de las visitas a la página.

A diferencia de las otras Métricas web esenciales, que son valores basados en el tiempo medidos en segundos o milisegundos, la puntuación CLS es un valor sin unidades que se basa en un cálculo de cuánto cambia el contenido y en qué medida.

En esta guía, analizaremos la optimización de causas comunes de los cambios de diseño.

Las causas más comunes de un CLS deficiente son las siguientes:

• Imágenes sin dimensiones
• Anuncios, incorporaciones e iframes sin dimensiones.
• Contenido insertado de manera dinámica, como iframes, anuncios y incorporaciones sin dimensiones.
• Fuentes web

Comprende las causas de los cambios de diseño

Antes de comenzar a buscar soluciones a problemas comunes de CLS, es importante comprender tu puntuación de CLS y de dónde provienen los cambios.

CLS en herramientas de lab versus herramientas de campo

Es común escuchar a los desarrolladores pensar que el CLS medido por el Chrome UX Report (CrUX) es incorrecto, ya que no coincide con el CLS que miden con las Herramientas para desarrolladores de Chrome o con otras herramientas de lab. Es posible que las herramientas del Lab de rendimiento web, como Lighthouse, no muestren el CLS completo de una página, ya que suelen realizar una simple carga de la página para medir algunas métricas de rendimiento web y proporcionar orientación (aunque los flujos de usuarios de Lighthouse te permiten realizar mediciones más allá de la auditoría de carga de página predeterminada).

CrUX es el conjunto de datos oficial del programa Métricas web y, para ello, CLS se mide durante toda la vida de la página y no solo durante la carga inicial de la página que suelen medir las herramientas de lab.

Los cambios de diseño son muy comunes durante la carga de la página, ya que se recuperan todos los recursos necesarios para renderizarla inicialmente, pero los cambios de diseño también pueden ocurrir después de la carga inicial. Muchos cambios posteriores a la carga pueden ocurrir como resultado de una interacción del usuario y, por lo tanto, se excluirán de la puntuación de CLS, ya que son cambios esperados, siempre y cuando se produzcan dentro de los 500 milisegundos desde esa interacción.

Sin embargo, es posible que se incluyan otros cambios posteriores a la carga que el usuario no haya esperado cuando no haya una interacción calificadora, por ejemplo, si te desplazas más por la página y se carga contenido de carga diferida que provoca cambios. Otras causas comunes de la CLS posterior a la carga son las interacciones de transiciones, por ejemplo, en aplicaciones de una sola página, que tardan más que el período de gracia de 500 milisegundos.

PageSpeed Insights muestra tanto los indicadores percibidos por el usuario CLS de una URL en la sección "Descubre la experiencia de tus usuarios reales" sección, y el CLS de carga basado en labs en “Diagnose performance issues” sección. Es probable que las diferencias entre estos valores se deban al CLS posterior a la carga.

Identifica problemas de CLS de carga

Cuando las puntuaciones de CLS de CrUX y Lighthouse de PageSpeed Insights están ampliamente alineadas, esto suele indicar que hay un problema de CLS de carga que Lighthouse detectó. En este caso, Lighthouse ayudará con dos auditorías para proporcionar más información sobre las imágenes que generan CLS debido a la falta de ancho y altura, y también enumerar todos los elementos que cambiaron para la carga de la página junto con su contribución a CLS. Puedes ver estas auditorías si filtras las auditorías de CLS:

El panel Performance de Herramientas para desarrolladores también destaca los cambios de diseño en la sección Experiencia. La vista Summary de un registro Layout Shift incluye la puntuación de cambio de diseño acumulado y una superposición rectangular que muestra las regiones afectadas. Esto es muy útil para obtener más detalles sobre los problemas de CLS de carga, ya que se replica fácilmente con un perfil de rendimiento de recarga.

Identifica problemas de CLS posteriores a la carga

El desacuerdo entre las puntuaciones de CLS de CrUX y Lighthouse a menudo indica un CLS posterior a la carga. Estos cambios pueden ser difíciles de rastrear sin datos de campo. Para obtener información sobre la recopilación de datos de campo, consulta Cómo medir los elementos de CLS en el campo.

La extensión de Chrome de Métricas web se puede usar para supervisar la métrica CLS mientras interactúas con una página, ya sea en una pantalla de avisos o en la consola, donde puedes obtener más detalles sobre los elementos que cambiaron.

Como alternativa al uso de la extensión, puedes navegar por tu página web mientras registras cambios de diseño con un Performance Observer pegado en la consola.

Después de configurar la supervisión de turnos, puedes intentar replicar cualquier problema de CLS posterior a la carga. El CLS suele ocurrir mientras el usuario se desplaza por una página, cuando el contenido de carga diferida se carga completamente sin espacio reservado para él. El contenido que cambia cuando el usuario mantiene el puntero sobre él es otra causa común de CLS posterior a la carga. Cualquier cambio de contenido durante cualquiera de estas interacciones cuenta como inesperado, incluso si ocurre dentro de los 500 milisegundos.

Para obtener más información, consulta Cómo depurar cambios de diseño.

Una vez que hayas identificado las causas comunes de CLS, también se puede usar el modo de flujo de usuarios de intervalos de tiempo de Lighthouse para garantizar que los flujos de usuarios típicos no retrocedan mediante la introducción de cambios de diseño.

Medir los elementos CLS en el campo

Supervisar el CLS en el campo puede ser muy valioso para determinar en qué circunstancias ocurre y acotar las posibles causas. Como la mayoría de las herramientas de lab, las de campo miden solo los elementos que cambiaron, pero eso suele proporcionar suficiente información para identificar la causa. También puedes usar las mediciones del campo de CLS para determinar qué problemas tienen la mayor prioridad.

La biblioteca web-vitals tiene funciones de atribución que te permiten recopilar esta información adicional. Para obtener más información, consulta Cómo depurar el rendimiento en el campo. Otros proveedores de RUM también comenzaron a recopilar y presentar estos datos de manera similar.

Causas comunes de CLS

Una vez que haya identificado las causas de CLS, puede comenzar a trabajar en la solución de los problemas. En esta sección, le mostraremos algunos de los motivos más comunes de CLS y lo que puede hacer para evitarlos.

Imágenes sin dimensiones

Incluye siempre los atributos de tamaño width y height en los elementos de imágenes y video. También puedes reservar el espacio requerido con CSS aspect-ratio o una versión similar. Este enfoque garantiza que el navegador pueda asignar la cantidad correcta de espacio en el documento mientras se carga la imagen.

Historial de los atributos width y height en las imágenes

En los primeros días de la Web, los desarrolladores agregaban los atributos width y height a sus etiquetas <img> para asegurarse de que se asignara suficiente espacio en la página antes de que el navegador comenzara a recuperar imágenes. Esto minimizaría el reprocesamiento y el rediseño.

<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

En este ejemplo, width y height no incluyen unidades. Estos "píxeles" garantizaría que el navegador reservara un área de 640 x 360 en el diseño de la página. La imagen se estirará para ajustarse a este espacio, independientemente de si las dimensiones reales coinciden.

Cuando se introdujo el diseño web responsivo, los desarrolladores empezaron a omitir width y height, y comenzaron a usar CSS para cambiar el tamaño de las imágenes:

img {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

Sin embargo, como no se especifica el tamaño de la imagen, no se puede asignar espacio hasta que el navegador comience a descargarla y pueda determinar sus dimensiones. A medida que se cargan las imágenes, el texto se desplaza hacia abajo en la página para hacer lugar a ellas, lo que crea una experiencia del usuario confusa y frustrante.

Aquí es donde entra en juego la relación de aspecto. La relación de aspecto de una imagen es la relación entre su ancho y su altura. Es común ver que se expresa como dos números separados por dos puntos (por ejemplo, 16:9 o 4:3). Para una relación de aspecto x:y, la imagen tiene el ancho de x unidades de ancho y el alto de y.

Esto significa que, si conocemos una de las dimensiones, podemos determinar la otra. Para una relación de aspecto de 16:9:

• Si cachorro.jpg tiene una altura de 360 px, el ancho es de 360 x (16 / 9) = 640 px.
• Si cachorro.jpg tiene un ancho de 640 px, la altura es de 640 x (9 / 16) = 360 px.

Conocer la relación de aspecto de una imagen le permite al navegador calcular y reservar espacio suficiente para la altura y el área asociada.

Prácticas recomendadas modernas para configurar las dimensiones de las imágenes

Debido a que los navegadores modernos configuran la relación de aspecto predeterminada de las imágenes según una atributos width y height de la imagen, puedes evitar los cambios de diseño configurar esos atributos en la imagen e incluir el CSS anterior en tu hoja de estilo.

<!-- set a 640:360 i.e a 16:9 aspect ratio -->
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

Todos los navegadores agregarán una relación de aspecto predeterminada basada en los atributos width y height existentes del elemento.

Esto calcula una relación de aspecto en función de los atributos width y height antes de que se cargue la imagen. Proporciona esta información al comienzo del cálculo del diseño. En cuanto se indica que una imagen tiene un ancho determinado (por ejemplo, width: 100%), se usa la relación de aspecto para calcular la altura.

Los principales navegadores calculan este valor de aspect-ratio a medida que se procesa el HTML, en lugar de hacerlo con una hoja de estilo de usuario-agente predeterminada (consulta esta entrada para conocer en detalle por qué), por lo que el valor se muestra de manera un poco diferente. Por ejemplo, Chrome lo muestra de esta manera en la sección Estilos del panel Elemento:

img[Attributes Style] {
  aspect-ratio: auto 640 / 360;
}

Safari se comporta de manera similar con una fuente de estilo HTML Attributes. Firefox no muestra este aspect-ratio calculado en absoluto en su panel Inspector, pero lo usa para el diseño.

La parte auto del código anterior es importante, ya que hace que las dimensiones de la imagen anulen la relación de aspecto predeterminada después de que se descargue la imagen. Si las dimensiones de la imagen son diferentes, esto provoca algún cambio de diseño después de que se cargue la imagen, pero esto garantiza que se siga usando la relación de aspecto de la imagen cuando esté disponible, en caso de que el código HTML sea incorrecto. Incluso si la relación de aspecto real es diferente de la predeterminada, provoca menos cambio de diseño que el tamaño predeterminado de 0 x 0 de una imagen sin dimensiones proporcionadas.

Para obtener información detallada sobre la relación de aspecto con más detalle en las imágenes responsivas, consulta cómo cargar páginas sin bloqueos con relaciones de aspecto de medios.

Si la imagen está en un contenedor, puedes usar CSS para cambiar el tamaño al ancho del contenedor. Configuramos height: auto; para evitar usar un valor fijo para la altura de la imagen.

img {
  height: auto;
  width: 100%;
}

¿Qué ocurre con las imágenes responsivas?

Cuando se trabaja con imágenes responsivas, srcset define las imágenes entre las que permites que el navegador seleccione y el tamaño de cada imagen. Para garantizar que se puedan establecer los atributos de ancho y alto <img>, cada imagen debe tener la misma relación de aspecto.

<img
  width="1000"
  height="1000"
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
  alt="Puppy with balloons"
/>

Tus imágenes las relaciones de aspecto también pueden cambiar dirección artística. Por ejemplo, podrías incluir una toma recortada de una imagen para imágenes viewports y mostrar la imagen completa en una computadora de escritorio:

<picture>
  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" />
  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" />
  <img src="puppy-800w.jpg" alt="Puppy with balloons" />
</picture>

Chrome, Firefox y Safari ahora admiten la configuración de width y height en la Elementos <source> dentro de un elemento <picture> determinado:

<picture>
  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" width="480" height="400" />
  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" width="800" height="400" />
  <img src="puppy-800w.jpg" alt="Puppy with balloons" width="800" height="400" />
</picture>

Anuncios, incorporaciones y otros contenidos cargados con demoras

Las imágenes no son el único tipo de contenido que puede causar cambios de diseño. Los anuncios, las incorporaciones, los iframes y otro contenido inyectado de forma dinámica pueden hacer que el contenido que aparece después de ellos se mueva hacia abajo, lo que aumenta el CLS.

Los anuncios son uno de los factores que más contribuyen a los cambios de diseño en la Web. A menudo, las redes de publicidad y los publicadores admiten tamaños de anuncios dinámicos. Los tamaños de anuncios aumentan el rendimiento o los ingresos debido a las tasas de clics más altas y a la mayor cantidad de anuncios que compiten en la subasta. Lamentablemente, esto puede generar una experiencia del usuario deficiente debido a que los anuncios muestran el contenido visible que está viendo hacia abajo en la página.

Los widgets incorporables te permiten incluir contenido web portátil en tu página, como videos de YouTube, mapas de Google Maps y publicaciones de redes sociales. Sin embargo, estos widgets a menudo no son conscientes del tamaño de su contenido antes de cargarse. Como resultado, las plataformas que ofrecen incorporaciones no siempre reservan espacio para sus widgets, lo que provoca cambios de diseño cuando finalmente se cargan.

Las técnicas para lidiar con esto son todas similares. Las principales diferencias radica en cuánto control tiene sobre el contenido que se va a insertar. Si la inserta un tercero, como un socio publicitario, es posible que no conozcas el tamaño exacto del contenido que se insertará ni podrás controlar los cambios de diseño que se produzcan en esas incorporaciones.

Reserva espacio para el contenido de carga tardía

Cuando se coloca contenido de carga tardía en el flujo de contenido, se pueden evitar los cambios de diseño si se reserva el espacio para ellos en el diseño inicial.

Un enfoque es agregar una regla de CSS min-height para reservar espacio o, en el caso del contenido responsivo, como los anuncios, usar la propiedad aspect-ratio de CSS de manera similar a como los navegadores la usan automáticamente para las imágenes con las dimensiones proporcionadas.

.

Es posible que debas considerar diferencias sutiles en los tamaños de anuncios o marcadores de posición en los factores de forma mediante las consultas de medios.

En el caso del contenido que no tiene una altura fija, como los anuncios, es posible que no puedas reservar la cantidad exacta de espacio necesaria para eliminar por completo el cambio de diseño. Si se publica un anuncio más pequeño, el publicador puede diseñar un contenedor más grande para evitar cambios en el diseño, o bien elegir el tamaño más probable del espacio publicitario según los datos históricos. La desventaja de este método es que aumenta la cantidad de espacio en blanco en la página.

En su lugar, puedes establecer el tamaño inicial en el tamaño más pequeño que se usará y aceptar cierto nivel de cambio para contenido más grande. El uso de min-height, como se sugirió anteriormente, permite que el elemento superior crezca según sea necesario, a la vez que se reduce el impacto de los cambios de diseño, en comparación con el tamaño predeterminado de 0 px de un elemento vacío.

Muestra un marcador de posición si, por ejemplo, no se muestra ningún anuncio, para evitar contraer el espacio reservado. Quitar el espacio reservado para elementos puede generar la misma cantidad de CLS que insertar contenido.

Coloca el contenido de carga tardía más abajo en el viewport

Por lo general, el contenido inyectado dinámicamente más cerca de la parte superior del viewport provoca mayores cambios de diseño que el contenido insertado más abajo en el viewport. Sin embargo, inyectar contenido en cualquier lugar del viewport provoca cierto cambio. Si no puedes reservar espacio para el contenido insertado, te recomendamos colocarlo más adelante en la página para reducir el impacto en su CLS.

Evita insertar contenido nuevo sin interacción del usuario

Es probable que hayas experimentado cambios de diseño debido a la IU que aparece en la parte superior o inferior del viewport cuando intentas cargar un sitio. Al igual que con los anuncios, esto suele suceder con los banners y los formularios que trasladan el resto del contenido de la página:

Si necesitas mostrar estos tipos de posibilidades de IU, reserva con anticipación suficiente espacio en el viewport para él (por ejemplo, usando un marcador de posición o una IU de esqueleto) para que, cuando se cargue, no provoque que el contenido de la página se desplace de una forma sorpresiva. De manera alternativa, asegúrate de que el elemento no forme parte del flujo del documento superponiendo el contenido cuando esto tenga sentido. Si deseas obtener más recomendaciones sobre estos tipos de componentes, consulta la publicación Prácticas recomendadas para los avisos de cookies.

En algunos casos, agregar contenido de forma dinámica es una parte importante de la experiencia del usuario. Por ejemplo, cuando se cargan más productos en una lista de artículos o cuando se actualiza el contenido del feed publicado. Existen varias formas de evitar cambios de diseño inesperados en esos casos:

• Reemplaza el contenido anterior por el nuevo dentro de un contenedor de tamaño fijo o usa un carrusel y quita el contenido antiguo después de la transición. Recuerda inhabilitar los vínculos y controles hasta que se complete la transición para evitar clics o presiones accidentales mientras ingresas contenido nuevo.
• Haz que el usuario inicie la carga de contenido nuevo para que no se sorprenda por el cambio (por ejemplo, con un botón "Cargar más" o "Actualizar"). Se recomienda cargar previamente el contenido antes de la interacción del usuario para que aparezca de inmediato. Recuerda que los cambios de diseño que ocurren dentro de los 500 milisegundos posteriores a la entrada del usuario no se cuentan en CLS.
• Carga sin problemas el contenido fuera de la pantalla y superpone un aviso para el usuario de que está disponible (por ejemplo, con un botón de "Desplazarse hacia arriba").

Animaciones

Los cambios en los valores de las propiedades de CSS pueden requerir que el navegador reaccione a ellos. Algunos valores, como box-shadow y box-sizing, activan un cambio de diseño, la pintura y la composición. Cambiar las propiedades top y left también provoca cambios de diseño, incluso cuando el elemento que se mueve está en su propia capa. Evita realizar animaciones con estas propiedades.

Otras propiedades de CSS se pueden cambiar sin activar la opción de rediseñar el diseño. Estas incluyen el uso de animaciones de transform para traducir, ajustar, rotar o distorsionar elementos.

Las animaciones compuestas que usan translate no pueden afectar a otros elementos, por lo que no se tienen en cuenta para el CLS. Las animaciones no compuestas tampoco provocan ningún cambio de diseño. Para obtener más información sobre las propiedades de CSS que activan cambios de diseño, consulta Animaciones de alto rendimiento.

Fuentes web

La descarga y renderización de fuentes web normalmente se controla de una de dos maneras antes de que se descargue la fuente web:

• La fuente de resguardo se intercambia con la fuente web, lo que genera un destello de texto sin estilo (FOUT).
• “Invisible” el texto se muestra con la fuente de reserva hasta que una fuente web está disponible y el texto se hace visible (FOIT, flash de texto invisible).

Ambos enfoques pueden provocar cambios de diseño. Incluso si el texto es invisible, se dispondrá con la fuente de reserva, de modo que cuando se cargue la fuente web, el bloque de texto y el contenido circundante cambian de la misma manera que la fuente visible.

Las siguientes herramientas pueden ayudarte a minimizar el cambio de texto:

• font-display: optional puede evitar volver a crear el diseño, ya que la fuente web solo se usa si está disponible para el momento del diseño inicial.
• Asegúrate de que se use la fuente de resguardo adecuada. Por ejemplo, usar font-family: "Google Sans", sans-serif; garantizará que se use la fuente de resguardo sans-serif del navegador mientras se carga "Google Sans". Si no especificas una fuente de resguardo solo con font-family: "Google Sans", se utilizará la fuente predeterminada, que en Chrome es "Times", una fuente Serif que coincide menos que la fuente predeterminada sans-serif.
• Minimiza las diferencias de tamaño entre la fuente de resguardo y la fuente web con las nuevas APIs de size-adjust, ascent-override, descent-override y line-gap-override, como se detalla en la publicación sobre resguardos de fuentes mejorados.
• La API de Font Loading puede reducir el tiempo que lleva obtener las fuentes necesarias.
• Carga fuentes web críticas lo antes posible usando <link rel=preload>. Una fuente precargada tiene más probabilidades de coincidir con la primera pintura, en cuyo caso no se produce ningún cambio de diseño.

Si quieres conocer otras prácticas recomendadas sobre fuentes, consulta Prácticas recomendadas para las fuentes.

Asegúrate de que las páginas sean aptas para la bfcache para reducir la CLS.

Una técnica muy eficaz para mantener bajas las puntuaciones de CLS es asegurarte de que tus páginas web sean aptas para la memoria caché atrás/adelante (bfcache).

La bfcache conserva las páginas en la memoria del navegador durante un período breve después de que navegas, por lo que, si regresas a ellas, se restablecerán exactamente como las dejaste. Esto significa que la página completamente cargada está disponible de inmediato, sin los cambios que normalmente se pueden observar durante la carga por cualquiera de los motivos mencionados anteriormente.

Si bien esto puede significar que la carga inicial de la página encuentra cambios de diseño, cuando un usuario regresa a través de las páginas, no ve los mismos cambios de diseño repetidamente. Siempre debes tratar de evitar los cambios, incluso en la carga inicial, pero donde sea más difícil resolverlo por completo, puedes al menos reducir el impacto evitándolos en cualquier navegación de bfcache.

Las navegaciones hacia atrás y hacia adelante son comunes en muchos sitios. Por ejemplo, regresar a una página de contenido, a una página de categoría o a los resultados de la búsqueda.

Cuando se lanzó esta función en Chrome, observamos mejoras notables en CLS.

Todos los navegadores usan la bfcache de forma predeterminada, pero algunos sitios no son aptos para ella por varios motivos. Lee la guía de bfcache para obtener más detalles sobre cómo probar e identificar cualquier problema que impida el uso de la bfcache. De esta manera, podrás asegurarte de aprovechar al máximo esta función para optimizar la puntuación general de CLS para tu sitio.

Conclusión

Existen diversas técnicas para identificar y mejorar la CLS, como se detalla anteriormente en esta guía. Existen permisos integrados en las Métricas web esenciales, por lo que, incluso si no puedes eliminar CLS por completo, el uso de algunas de estas técnicas debería permitirte reducir el impacto. Con suerte, esto te permitirá mantenerte dentro de esos límites y creará una mejor experiencia para los usuarios de tu sitio web.