Cómo optimizar el cambio de diseño acumulado

Descubre cómo evitar cambios de diseño repentinos para mejorar la experiencia del usuario

Addy Osmani

Barry Pollard

El 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 la cantidad de contenido visible que se movió en el viewport con la distancia que se movieron los elementos afectados.

Los cambios de diseño pueden distraer a los usuarios. Imagina que empezaste a leer un artículo cuando, de repente, los elementos se mueven por la página, lo que te desorienta y te obliga a volver a encontrar tu lugar. Esto es muy común en la Web, incluso cuando se leen noticias o se intenta hacer clic en los botones “Buscar” o “Agregar al carrito”. Estas experiencias son visualmente molestas y frustrantes. A menudo, se producen cuando los elementos visibles se ven obligados a moverse porque se agregó otro elemento a la página o se le cambió el tamaño de forma repentina.

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 los otros métricas principales de la Web, que son valores basados en el tiempo medidos en segundos o milisegundos, la puntuación de CLS es un valor sin unidades basado en un cálculo de cuánto contenido se mueve y en qué medida.

En esta guía, analizaremos cómo optimizar las causas comunes de los cambios de diseño.

Las causas más comunes de un CLS bajo 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 para 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 versus herramientas de campo

Es común escuchar que los desarrolladores piensan que el CLS que mide 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 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 Web Vitals y, por lo tanto, el CLS se mide durante todo el ciclo de vida de la página y no solo durante la carga inicial de la página que suelen medir las herramientas de laboratorio.

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 la página inicialmente, pero 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 que ocurran en un plazo de 500 milisegundos después de esa interacción.

Sin embargo, es posible que se incluyan otros cambios posteriores a la carga que el usuario no espera cuando no hubo una interacción que cumpla con los requisitos, por ejemplo, si te desplazas más hacia abajo en la página y se carga el contenido cargado de forma diferida, lo que provoca cambios. Otras causas comunes de la CLS posterior a la carga se encuentran en las interacciones de las transiciones, por ejemplo, en las apps 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 la sección "Descubre la experiencia de tus usuarios reales" y el CLS de carga basado en labs en la sección "Diagnostica problemas de rendimiento". Es probable que las diferencias entre estos valores se deban al CLS posterior a la carga.

Identifica los problemas de carga de CLS

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

El panel Rendimiento en DevTools 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 especialmente ú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 los problemas de CLS posteriores a la carga

Los desacuerdos entre las puntuaciones de CLS de CrUX y Lighthouse suelen indicar CLS después de la carga. Estos cambios pueden ser difíciles de detectar sin datos de campo. Para obtener información sobre cómo recopilar datos de campo, consulta Cómo medir los elementos de CLS en el campo.

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

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. La CLS suele ocurrir mientras el usuario se desplaza por una página, cuando el contenido cargado de forma diferida se carga por completo sin espacio reservado para ello. El desplazamiento del contenido cuando el usuario coloca el puntero sobre él es otra causa común de CLS después de la carga. Cualquier cambio de contenido durante cualquiera de estas interacciones se considera inesperado, incluso si ocurre en un plazo de 500 milisegundos.

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

Después de identificar las causas comunes de la CLS, también puedes usar el modo de flujo de usuarios de períodos de Lighthouse para garantizar que los flujos de usuarios típicos no retrocedan con la introducción de cambios de diseño.

Medir los elementos CLS en el campo

Supervisar la CLS en el campo puede ser invaluable para determinar en qué circunstancias se produce y reducir las posibles causas. Al igual que la mayoría de las herramientas de laboratorio, las herramientas de campo miden solo los elementos que se movieron, pero suelen proporcionar suficiente información para identificar la causa. También puedes usar las mediciones de campo de CLS para determinar qué problemas tienen la prioridad más alta para corregirse.

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 hayas identificado las causas del CLS, puedes comenzar a trabajar para corregir los problemas. En esta sección, te mostraremos algunos de los motivos más comunes de los CLS y lo que puedes 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. Como alternativa, reserva el espacio requerido con aspect-ratio de CSS o algo 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 reflujo y el rediseño.

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

width y height en este ejemplo no incluyen unidades. Estas dimensiones de "píxeles" garantizarían que el navegador reserve un área de 640 × 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 comenzaron a omitir width y height y 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 dejarles espacio, 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 proporción de 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 x:y, la imagen tiene x unidades de ancho y y unidades de alto.

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

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

Conocer la relación de aspecto de una imagen permite que el navegador calcule y reserve espacio suficiente para la altura y el área asociada.

Prácticas recomendadas modernas para establecer dimensiones de imagen

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 configurando esos atributos en la imagen y, luego, incluyendo 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 le indica a una imagen que tiene un ancho determinado (por ejemplo, width: 100%), se usa la relación de aspecto para calcular la altura.

Los navegadores principales calculan este valor aspect-ratio a medida que se procesa el HTML, en lugar de hacerlo con una hoja de estilo del usuario-agente predeterminada (consulta esta publicación para obtener más información), por lo que el valor se muestra de forma 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, ya que usa una fuente de estilo de 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, ya que 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 aún causará un cambio de 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, aún causa menos cambio de diseño que el tamaño predeterminado de 0 × 0 de una imagen sin dimensiones proporcionadas.

Para obtener un análisis detallado de la relación de aspecto y reflexionar más sobre las imágenes responsivas, consulta Carga de páginas sin interrupciones con relaciones de aspecto de contenido multimedia.

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

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

¿Qué sucede con las imágenes responsivas?

Cuando trabajas con imágenes responsivas, srcset define las imágenes entre las que permites que el navegador seleccione 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 tus imágenes también pueden cambiar según tu dirección de arte. Por ejemplo, es posible que quieras incluir una toma recortada de una imagen para viewports estrechos 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 otro contenido cargado tardíamente

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 insertado de forma dinámica pueden hacer que el contenido que aparece después de ellos se desplace 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. A menudo, las redes de publicidad y los publicadores admiten tamaños de anuncios dinámicos. Los tamaños de los anuncios aumentan el rendimiento o los ingresos debido a que tienen tasas de clics más altas y más anuncios que compiten en la subasta. Lamentablemente, esto puede generar una experiencia del usuario subóptima debido a que los anuncios empujan el 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 de redes sociales. Sin embargo, estos widgets a menudo no saben qué tan grande es 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 diferencias principales radica en cuánto control tiene sobre el contenido que se va a insertar. Si un tercero, como un socio de anuncios, inserta este código, es posible que no conozcas el tamaño exacto del contenido que se insertará ni puedas controlar los cambios de diseño que se produzcan dentro de esas incorporaciones.

Reserva espacio para el contenido que se carga más tarde

Cuando se coloca contenido de carga tardía en el flujo de contenido, se pueden evitar los cambios de diseño reservando 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 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 diferentes factores de forma mediante 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 el cambio de diseño por completo. Si se publica un anuncio más pequeño, el publicador puede aplicar diseño a un contenedor más grande para evitar cambios de diseño o elegir el tamaño más probable para el espacio de anuncios 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 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.

Intenta evitar contraer el espacio reservado mostrando 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 insertar contenido.

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

El contenido insertado de forma dinámica más cerca de la parte superior del viewport suele causar 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 desplazan el resto del contenido de la página:

Si necesitas mostrar estos tipos de indicaciones visuales de la IU, reserva espacio suficiente en el viewport con anticipación (por ejemplo, con un marcador de posición o una IU de esqueleto) para que, cuando se cargue, no haga que el contenido de la página se desplace de forma inesperada. Como alternativa, superpone el contenido donde tenga sentido para asegurarte de que el elemento no forme parte del flujo del documento. 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. En esos casos, hay varias formas de evitar los cambios de diseño inesperados:

• Reemplaza el contenido antiguo 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 toques accidentales mientras se carga el contenido nuevo.
• Pídele al usuario que 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 recuperar 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 el contenido fuera de la pantalla sin problemas y superpón un aviso para el usuario de que está disponible (por ejemplo, con un botón "Desplazarse hacia arriba").

Animaciones

Los cambios en los valores de las propiedades CSS pueden requerir que el navegador reaccione a estos cambios. 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 causa cambios de diseño, incluso cuando el elemento que se mueve está en su propia capa. Evita animar con estas propiedades.

Se pueden cambiar otras propiedades CSS sin activar nuevos diseños. Esto incluye el uso de animaciones transform para traducir, escalar, rotar o sesgar elementos.

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

Fuentes web

Por lo general, la descarga y renderización de fuentes web se controla de una de las siguientes dos maneras antes de que se descargue la fuente web:

• La fuente de reserva 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 se haga visible (FOIT: flash de texto invisible).

Ambos enfoques pueden causar 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 para la fuente visible.

Las siguientes herramientas pueden ayudarte a minimizar el desplazamiento del 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 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 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 Mejoras en los resguardos de fuentes.
• La Font Loading API puede reducir el tiempo que se tarda en obtener las fuentes necesarias.
• Carga fuentes web críticas 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 Prácticas recomendadas para las fuentes para conocer otras prácticas recomendadas.

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 asegurarse de que tus páginas web sean aptas para la caché de atrás/adelante (bfcache).

La bfcache mantiene las páginas en la memoria del navegador durante un período breve después de que salgas de ellas, de modo que, si vuelves a ellas, se restablecerán exactamente como las dejaste. Esto significa que la página completamente cargada está disponible de inmediato, sin ningún cambio que se pueda ver normalmente durante la carga debido a cualquiera de los motivos mencionados anteriormente.

Si bien esto podría significar que la carga inicial de la página encuentra cambios de diseño, cuando un usuario vuelve a las páginas, no ve los mismos cambios de diseño de forma reiterada. Siempre debes intentar evitar los cambios, incluso en la carga inicial, pero cuando sea más difícil resolverlos por completo, al menos puedes 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, volver a una página de contenido, una página de categoría o los resultados de la búsqueda.

Cuando se lanzó en Chrome, notamos mejoras notables en el 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 y detectar cualquier problema que impida el uso de bfcache y asegurarte de aprovechar al máximo esta función para mejorar la puntuación general de CLS de tu sitio.

Conclusión

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