Cómo optimizar el cambio de diseño acumulado

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

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

Los cambios de diseño pueden distraer a los usuarios. Imagina que comenzaste a leer un artículo cuando, de repente, los elementos cambian por la página, lo que dejas de verte y te obliga a encontrar tu lugar otra vez. Esto es muy común en la Web, incluso cuando lees las noticias o intentas hacer clic en los botones “Buscar” o “Agregar al carrito”. Estas experiencias son visualmente molestas y frustrantes. Suelen producirse cuando los elementos visibles se ven forzados a moverse porque otro elemento se agregó repentinamente a la página o se cambió su tamaño.

Para brindar una buena experiencia del usuario, los sitios deben esforzarse por tener un CLS de 0.1 o menos durante, 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 que se miden en segundos o milisegundos, la puntuación CLS es un valor sin unidades que se basa en un cálculo de cuánto contenido cambia 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:

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

Comprende las causas de los cambios de diseño

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

CLS en herramientas de lab frente a campo

Es habitual escuchar que los desarrolladores piensan que el CLS medido por el Informe de UX de Chrome (CrUX) es incorrecto, ya que no coincide con el CLS que miden con las Herramientas para desarrolladores de Chrome o de 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, por lo general, realizan una carga simple de la página para medir algunas métricas de rendimiento web y proporcionar orientación (aunque los flujos de usuarios de Lighthouse sí te permiten realizar mediciones más allá de la auditoría predeterminada de carga de la página).

CrUX es el conjunto de datos oficial del programa de Métricas web. Para ello, se mide durante toda la vida de la página y no solo durante la carga inicial que suelen medir las herramientas del 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 renderizar inicialmente la página, 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 la interacción del usuario y, por lo tanto, se excluirán de la puntuación de CLS, ya que son cambios previstos, siempre que ocurran dentro de los 500 milisegundos de esa interacción.

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

PageSpeed Insights muestra el CLS percibido por el usuario de una URL en su sección "Descubre lo que experimentan tus usuarios reales" y el CLS de carga basado en labs en su sección "Diagnostica problemas de rendimiento". Es probable que las diferencias entre estos valores sean el resultado de la 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 Lighthouse detectó un problema de carga de CLS. En este caso, Lighthouse ayudará con dos auditorías para proporcionar más información sobre las imágenes que causan CLS debido a la falta de ancho y altura, y también enumerar todos los elementos que se 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 Experience. La vista Resumen de un registro Layout Shift incluye la puntuación acumulativa del cambio de diseño, así como una superposición rectangular que muestra las regiones afectadas. Esto es particularmente ú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. Hacer un seguimiento de estos cambios puede ser complicado sin los datos de campo. Para obtener información sobre la recopilación de datos de campo, consulta Mide los elementos de CLS en el campo.

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

Como alternativa al uso de la extensión, puedes explorar tu página web mientras registras los cambios de diseño con 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 cargado de forma diferida se carga completamente sin espacio reservado para él. El cambio de contenido 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 en un plazo de 500 milisegundos.

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

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

Medir los elementos de CLS en el campo

Supervisar la CLS en el campo puede ser invaluable para determinar en qué circunstancias ocurre la CLS y reducir las posibles causas. Al igual que la mayoría de las herramientas de lab, las herramientas 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 es la prioridad más alta que debes solucionar.

La biblioteca de 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 han comenzado a recopilar y presentar estos datos de manera similar.

Causas comunes del CLS

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

Imágenes sin dimensiones

Siempre incluye los atributos de tamaño width y height en tus elementos de imagen y video. Como alternativa, reserva el espacio requerido con CSS aspect-ratio o uno 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 atributos width y height a sus etiquetas <img> para asegurarse de que se asignara espacio suficiente 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. Estas dimensiones de "píxel" garantizarían 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 verdaderas coinciden con ella.

Cuando se introdujo el diseño web responsivo, los desarrolladores comenzaron 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, debido a que no se especifica el tamaño de la imagen, no se le 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 alto. 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 de x:y, la imagen es de x unidades de ancho y unidades y de alta.

Esto significa que, si conocemos una de las dimensiones, la otra puede determinarse. 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 permite que el navegador calcule y reserve suficiente espacio para la altura y el área asociada.

Práctica recomendada moderna para configurar las dimensiones de las imágenes

Debido a que los navegadores modernos establecen la relación de aspecto predeterminada de las imágenes según los atributos width y height de una imagen, puedes evitar los cambios de diseño si configuras esos atributos en la imagen e incluyes el CSS anterior en la 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">

Luego, todos los navegadores agregarán una relación de aspecto predeterminada según los atributos width y height existentes del elemento.

Esto calcula una relación de aspecto según 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 solicita que una imagen tenga un ancho determinado (por ejemplo, width: 100%), se usará la relación de aspecto para calcular la altura.

Los principales navegadores calculan este valor de aspect-ratio a medida que se procesa el código HTML, en lugar de hacerlo con una hoja de estilo de usuario-agente predeterminada (consulta esta publicación para conocer los motivos), por lo que el valor se muestra un poco diferente. Por ejemplo, Chrome la muestra de la siguiente 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 Atributos HTML. 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 porque hace que las dimensiones de la imagen anulen la relación de aspecto predeterminada después de que se descarga la imagen. Si las dimensiones de la imagen son diferentes, esto causará algunos cambios en el diseño después de que se cargue la imagen, pero esto garantiza que la relación de aspecto de la imagen se siga usando 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, esto provoca menos cambios de diseño que el tamaño predeterminado de 0 x 0 de una imagen sin dimensiones.

Para obtener un análisis detallado de la relación de aspecto con una perspectiva más profunda de las imágenes responsivas, consulta el artículo sobre carga de páginas sin bloqueos con las relaciones de aspecto del contenido multimedia.

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

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

¿Qué sucede con las imágenes responsivas?

Cuando se trabaja con imágenes responsivas, srcset define las imágenes que permites que elija el navegador y el tamaño de cada una. Para garantizar que se puedan establecer los atributos de ancho y alto de <img>, cada imagen debe usar 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"
/>

Las relaciones de aspecto de las imágenes también pueden cambiar según la dirección artística. Por ejemplo, es posible que desees incluir una toma recortada de una imagen para viewports angostos 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 los 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 que se carguen con demora

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

Los anuncios son uno de los factores que más contribuyen a los cambios de diseño en la Web. Las redes de publicidad y los publicadores suelen admitir tamaños de anuncios dinámicos. Los tamaños de anuncios aumentan el rendimiento y los ingresos debido al aumento de las tasas de clics y a una mayor cantidad de anuncios que compiten en la subasta. Lamentablemente, esto puede generar una experiencia del usuario deficiente debido a que los anuncios envían contenido visible que estás 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 en redes sociales. Sin embargo, a menudo estos widgets no saben qué tan extenso es su contenido antes de cargarse. Como resultado, las plataformas que ofrecen incorporaciones no siempre reservan espacio para sus widgets, lo que causa cambios en el diseño cuando se cargan.

Las técnicas para lidiar con todo esto son similares. Las principales diferencias son cuánto control tienes sobre el contenido que se insertará. Si un tercero, como un socio publicitario, inserta este elemento, es posible que no conozcas el tamaño exacto del contenido que se insertará ni que puedas controlar los cambios de diseño que se produzcan en esas incorporaciones.

Reserva espacio para el contenido de carga tardía.

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

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

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

En el caso del contenido que no tenga una altura fija, como los anuncios, es posible que no puedas reservar la cantidad exacta de espacio necesario para eliminar por completo el cambio de diseño. Si se publica un anuncio más pequeño, un publicador puede diseñar un contenedor más grande para evitar cambios de diseño, o bien elegir el tamaño más probable para el espacio publicitario según los datos históricos. La desventaja de este enfoque 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 el contenido más grande. El uso de min-height, como se sugirió anteriormente, permite que el elemento superior crezca según sea necesario y, al mismo tiempo, 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.

Para evitar que se contraiga el espacio reservado, muestre un marcador de posición si, por ejemplo, no se muestra ningún anuncio. Quitar el espacio reservado para los elementos puede generar tanto CLS como la inserción de contenido.

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

El contenido inyectado de forma dinámica más cerca de la parte superior del viewport suele provocar 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 algunos cambios. Si no puedes reservar espacio para el contenido inyectado, te recomendamos que lo coloques más adelante en la página para reducir el impacto en su CLS.

Evita insertar contenido nuevo sin una interacción del usuario

Probablemente 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 espacio suficiente en el viewport con anticipación (por ejemplo, con un marcador de posición o IU mínima) para que, cuando se cargue, el contenido de la página no cambie de manera sorprendente. También puedes asegurarte de que el elemento no forme parte del flujo del documento. Para ello, superpone el contenido cuando esto tenga sentido. Consulte la publicación Prácticas recomendadas para los avisos de cookies para obtener más recomendaciones sobre estos tipos de componentes.

En algunos casos, agregar contenido dinámicamente 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 en vivo. Existen varias formas de evitar cambios de diseño inesperados en esos casos:

• Reemplaza el contenido antiguo con 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 todos los vínculos y controles hasta que se complete la transición para evitar toques o clics accidentales mientras se agrega el contenido nuevo.
• Pídele al usuario que inicie la carga de contenido nuevo para que no se sorprenda con 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. Como recordatorio, los cambios de diseño que ocurren dentro de los 500 milisegundos posteriores a la entrada del usuario no se registran en el CLS.
• Carga sin problemas el contenido fuera de la pantalla y superponer un aviso para el usuario de que está disponible (por ejemplo, con un botón de "Desplazarse hacia arriba").

Animaciones

Es posible que los cambios en los valores de las propiedades de CSS requieran que el navegador reaccione ante ellos. Algunos valores, como box-shadow y box-sizing, activan el rediseñ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 modificar sin activar nuevos diseños. Esto incluye el uso de animaciones transform para traducir, ajustar, rotar o sesgar elementos.

Las animaciones compuestas que usan translate no pueden afectar a otros elementos, por lo que no se consideran en el CLS. Las animaciones no compuestas tampoco generan cambios en el diseño. Para obtener más información sobre qué propiedades de CSS activan cambios de diseño, consulta Animaciones de alto rendimiento.

Fuentes web

La descarga y renderización de las fuentes web generalmente se controla de una de las siguientes dos maneras antes de descargar la fuente web:

• La fuente de resguardo se intercambia con la fuente web, lo que genera un Flash de texto sin estilo (FOUT).
• El texto "invisible" se muestra con la fuente de resguardo hasta que haya una fuente web disponible y el texto sea visible (FOIT, flash de texto invisible).

Ambos enfoques pueden provocar cambios en el diseño. Incluso si el texto es invisible, se presenta usando la fuente de resguardo, por lo que cuando se carga la fuente web, el bloque de texto y el contenido circundante cambian de la misma manera que para la fuente visible.

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

• font-display: optional puede evitar un nuevo diseño, ya que la fuente web solo se usa si está disponible en el momento del diseño inicial.
• Asegúrate de usar 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 cargue "Google Sans". Si no se especifica una fuente de resguardo con solo font-family: "Google Sans", se utilizará la fuente predeterminada, que en Chrome es "Times", una fuente serif que es una peor coincidencia que la fuente sans-serif predeterminada.
• 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 Resguardos de fuentes mejorados.
• La API de Font Loading puede reducir el tiempo que lleva obtener las fuentes necesarias.
• Carga las fuentes web esenciales lo antes posible con <link rel=preload>. Una fuente precargada tendrá más probabilidades de cumplir con la primera pintura, en cuyo caso no habrá cambios de diseño.

Lee las Prácticas recomendadas para las fuentes si deseas conocer otras prácticas recomendadas para fuentes.

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

Una técnica altamente eficaz para mantener las puntuaciones de CLS bajas es garantizar que tus páginas web sean aptas para el almacenamiento en 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 abandonas la página; por lo tanto, si regresas a ellas, se restablecerán exactamente como las dejaste. Esto significa que la página completamente cargada está disponible al instante, sin cambios que normalmente podrían verse durante la carga debido a cualquiera de los motivos indicados anteriormente.

Si bien es posible que esto signifique 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 el mismo cambio de diseño repetidamente. Siempre debes tratar de evitar los cambios incluso en la carga inicial, pero cuando sea más difícil de resolver por completo, puedes al menos reducir el impacto evitándolos en cualquier navegación de bfcache.

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

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

Todos los navegadores usan la bfcache de forma predeterminada, pero algunos sitios no son aptos para la bfcache por varias razones. Lee la guía de bfcache para obtener más detalles sobre cómo identificar y probar los problemas que impiden el uso de la bfcache. Asegúrate de aprovechar al máximo esta función para mejorar la puntuación general de CLS de tu sitio.

Conclusión

Como se detalló anteriormente en esta guía, existen varias técnicas para identificar y mejorar el CLS. Hay permisos integrados en las Métricas web esenciales, por lo que, incluso si no puedes eliminar CLS por completo, usar algunas de estas técnicas debería permitirte reducir el impacto. Esto le permitirá mantenerte dentro de esos límites, lo que creará una mejor experiencia para los usuarios de tu sitio web.