Cómo optimizar el cambio de diseño acumulado

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 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 comenzaste a leer un artículo cuando de repente los elementos cambian por la página, lo que te hace ir 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. A menudo, ocurren cuando los elementos visibles se ven forzados a moverse 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 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 que se miden en segundos o milisegundos, la puntuación CLS es un valor sin unidades basado 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 las siguientes:

• 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 comenzar 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

Los desarrolladores suelen pensar que el CLS medido en el Informe de UX de Chrome (CrUX) es incorrecto, porque 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 porque, por lo general, solo realizan una carga simple de la página para medir algunas métricas de rendimiento web y proporcionar orientación. Sin embargo, 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. Mide el CLS en toda la vida útil de una página, 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 es cuando el sistema recupera todos los recursos necesarios para renderizar 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 se producen como resultado de la interacción del usuario y, por lo tanto, se excluyen de la puntuación de CLS. Siempre que ocurran dentro de los 500 milisegundos de esa interacción, se contarán como cambios previstos.

Sin embargo, se pueden incluir cambios inesperados posteriores a la carga cuando no haya interacción calificativa, por ejemplo, si el contenido de carga diferida se carga completamente mientras el usuario se desplaza por una página. Otras causas comunes de CLS posteriores a la carga provienen de interacciones entre transiciones, por ejemplo, en 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 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 en PageSpeed Insights son similares, esto suele significar que Lighthouse detectó un problema de carga de CLS. En este caso, Lighthouse puede proporcionar dos auditorías para obtener más información: una para las imágenes que causan CLS debido a la falta de ancho y altura, y otra para todos los elementos que cambiaron durante la carga de la página junto con su contribución a CLS. Para ver estas auditorías, fíltralas como en la siguiente imagen:

El panel Performance de las 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 CLS, así como una superposición rectangular que muestra las regiones afectadas. Son especialmente útiles para identificar problemas de CLS de carga porque te permiten replicar la experiencia del usuario 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 el CLS mientras interactúas con una página, ya sea en una pantalla de atención o en la consola junto con detalles sobre los elementos que cambiaron.

Como alternativa al uso de la extensión, puedes explorar tu página web mientras registras 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 de carga 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 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.

Una vez que hayas identificado las causas comunes del CLS, también puedes usar el modo de flujo de usuarios de períodos de Lighthouse para asegurarte de que los cambios de diseño no interrumpan los flujos típicos de usuarios.

Medir los elementos de CLS en el campo

Supervisar la CLS en el campo puede ser invaluable para determinar en qué circunstancias ocurre 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 de campo de CLS para determinar qué problemas son la mayor prioridad que se deben 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 comenzaron a recopilar y presentar estos datos de manera similar.

Causas comunes del CLS

En esta sección, se describen algunos de los motivos más comunes del CLS y las estrategias para evitarlos.

Imágenes sin dimensiones

Siempre incluye los atributos de tamaño width y height en tus elementos de imagen y video, o reserva el espacio requerido con CSS aspect-ratio. Esto permite que el navegador asigne la cantidad correcta de espacio en el documento mientras se carga la imagen.

width, height y aspect-ratio

En los primeros días de la Web, los desarrolladores agregaron atributos width y height a sus etiquetas <img> para garantizar 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. La imagen se estirará para ajustarse a este espacio, independientemente de si las dimensiones verdaderas coinciden.

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

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.

Prácticas recomendadas 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 16:9 aspect ratio as 640x360 pixels -->
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

Luego, el navegador agrega una relación de aspecto predeterminada basada en los atributos width y height existentes del elemento, de modo que pueda determinar cuánto espacio reservar para la imagen al comienzo de los cálculos de diseño.

Debido a que los principales navegadores calculan las relaciones de aspecto predeterminadas a medida que se procesa el código HTML, cada uno muestra el valor de manera diferente. (para obtener detalles sobre por qué esto sucede, consulta Sugerencias de presentación de ancho y altura).

Por ejemplo, Chrome muestra relaciones de aspecto como estas 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 provoca un cambio en el diseño después de que se carga 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 HTML sea incorrecto. Incluso si la relación de aspecto real es diferente de la predeterminada, provoca menos cambios de diseño que el tamaño predeterminado de 0 x 0 de una imagen sin dimensiones.

Para obtener información detallada sobre las relaciones de aspecto y la filosofía de las imágenes responsivas, consulta Carga de páginas sin bloqueos con relaciones de aspecto de 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 trabajas con imágenes responsivas, srcset define las imágenes que permites que elija el navegador y el tamaño de cada una. Para asegurarte de que se puedan establecer los atributos de ancho y alto <img>, usa la misma relación de aspecto para cada imagen.

<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 secundarios source del elemento picture:

<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 aparezca después de que 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. Las redes de publicidad y los publicadores suelen admitir tamaños de anuncios dinámicos, y los anuncios más grandes suelen generar más ingresos que los más pequeños. Sin embargo, los anuncios que se cargan de repente y se desplazan contenido visible hacia abajo en la página perjudican la experiencia del usuario.

Los widgets insertables 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 grande 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 se encuentran en el control que tienes sobre el contenido insertado. A menudo, los terceros, como los socios publicitarios, no te brindan información útil sobre el contenido insertado ni sobre los cambios de diseño que causan estas incorporaciones.

Reserva espacio para el contenido de carga tardía.

Cuando colocas contenido de carga tardía en el flujo de contenido, puedes evitar los cambios de diseño si reservas espacio para ellos en el diseño inicial.

Esto puede ser tan simple como agregar un estilo de min-height para reservar espacio o, para contenido responsivo, como anuncios, usar la nueva propiedad aspect-ratio de CSS de manera similar a los navegadores que la usan automáticamente para imágenes.

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 el cambio de diseño por completo. 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 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, muestra 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, insertar 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 a fin de reducir el impacto.

Superponer el contenido del banner

Los banners y formularios que aparecen de forma inesperada en una página son otra causa común de cambios de diseño inesperados.

Si no puedes reservar espacio para este tipo de contenido, puedes superponerlo en el contenido existente para que no forme parte del flujo del documento. Para obtener consejos sobre cuándo usar este enfoque, consulta Prácticas recomendadas para los avisos de cookies.

Permitir que la interacción del usuario active los cambios de diseño esperados

En algunos casos, agregar contenido de manera dinámica es una parte importante de la experiencia del usuario, por ejemplo, cuando se cargan más productos en una lista de elementos o 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 contenido 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 los controles hasta que se complete la transición para evitar presiones o clics accidentales mientras se carga el contenido nuevo.
• Permite que el usuario inicie la carga de contenido nuevo, por ejemplo, con un botón Cargar más o Actualizar, para que el cambio no sea una sorpresa. Te recomendamos que cargues previamente el contenido nuevo antes de la interacción del usuario para que aparezca de inmediato. Como recordatorio, los cambios de diseño dentro de los 500 milisegundos posteriores a la entrada del usuario no se cuentan 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 al principio).

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 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 se suele controlar de una de las siguientes dos maneras antes de descargar la fuente web:

• La fuente de resguardo se intercambia con la fuente web, mediante Flash of Unstyled Text (FOUT).
• El texto "Invisible" se muestra con la fuente de resguardo hasta que esté disponible una fuente web y el texto sea visible, con Flash of Invisible Text (FOIT).

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 este cambio en el texto:

• font-display: optional hace que la fuente web solo se use si está disponible para el momento del diseño inicial.
• Usa fuentes de resguardo similares a la fuente web. Por ejemplo, el uso de font-family: "Google Sans", sans-serif; hace que el navegador use la fuente de resguardo sans-serif mientras se carga "Google Sans". Si no se especifica una fuente de resguardo (usando solo font-family: "Google Sans"), Chrome usará su fuente serif predeterminada, lo que es una peor coincidencia.
• Minimiza las diferencias de tamaño entre la fuente alternativa y la fuente web con las nuevas APIs de size-adjust, ascent-override, descent-override y line-gap-override. Para obtener más información, consulta Resguardos de fuentes mejorados.
• La API de Font Loading puede reducir el tiempo de carga de la fuente.
• Carga las fuentes web esenciales lo antes posible con <link rel=preload>. Es más probable que una fuente precargada esté lista para el primer procesamiento de imagen y que no provoque ningún cambio de diseño.

Si deseas obtener más información, consulta Prácticas recomendadas para las fuentes.

Haz que tus páginas sean aptas para la bfcache

Una técnica muy efectiva para mantener bajas las puntuaciones de CLS es garantizar 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 abandonas la página, de modo que, si regresas a ellas, se restablecen exactamente como las dejaste. Esto significa que la página completamente cargada está disponible al instante, sin que se produzcan cambios mientras se carga la página.

Si bien esto puede significar que la carga inicial de la página tenga cambios de diseño, permite que los usuarios eviten ver los mismos cambios de diseño repetidamente. Esto reduce el impacto de los cambios de diseño que podrías tener problemas para resolver de otras maneras.

Las navegaciones hacia atrás y hacia adelante son comunes en muchos sitios, como cuando se regresa a una página de contenido, a una página de categorías o a los resultados de la búsqueda.

Todos los navegadores usan la bfcache de forma predeterminada, pero algunos sitios no son aptos por varios motivos. Consulta el artículo sobre bfcache para obtener más detalles sobre cómo identificar y probar los problemas que impiden el uso de bfcache.