Aprende a evitar los cambios de diseño repentinos para mejorar la experiencia del usuario
Fecha de publicación: 5 de mayo de 2020; última actualización: 7 de febrero de 2025
El cambio de diseño acumulado (CLS) es una de las tres métricas de Core Web Vitals. Mide la inestabilidad del contenido combinando la cantidad de contenido visible que se desplazó 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 y, de repente, los elementos se mueven por la página, lo que te distrae y te obliga a volver a encontrar dónde estabas. Esto es muy común en la Web, incluso cuando lees noticias o intentas hacer clic en los botones "Buscar" o "Agregar al carrito". Estas experiencias son visualmente desagradables y frustrantes. A menudo, se producen cuando los elementos visibles se ven obligados a moverse porque se agregó o cambió el tamaño de otro elemento de repente.
Para proporcionar una buena experiencia del usuario, los sitios deben esforzarse por tener un CLS de 0.1 o menos en al menos el 75% de las visitas a la página.
A diferencia de las otras Métricas web principales, que son valores basados en el tiempo y se miden en segundos o milisegundos, la puntuación de CLS es un valor sin unidades que se basa en un cálculo de cuánto contenido se desplaza y en qué medida.
En esta guía, analizaremos la optimización de las 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, elementos incorporados y elementos iframe sin dimensiones.
- Contenido insertado de forma dinámica, como anuncios, elementos incorporados y elementos iframe sin dimensiones
- Fuentes web
Comprende las causas de los cambios de diseño
Antes de comenzar a buscar soluciones para los problemas comunes del CLS, es importante que comprendas tu puntuación de CLS y de dónde provienen los cambios.
CLS en herramientas de lab en comparación con el campo
Es común escuchar a los desarrolladores pensar que el CLS que mide el Informe sobre la experiencia del usuario en 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 laboratorio. Es posible que las herramientas de laboratorio de rendimiento web, como Lighthouse, no muestren el CLS completo de una página, ya que suelen realizar una carga básica 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 medir más allá de la auditoría de carga de página predeterminada).
CrUX es el conjunto de datos de Google del programa de Métricas web, y, por ello, el CLS se mide durante toda la vida útil 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 y cuando ocurran dentro de los 500 milisegundos posteriores a esa interacción.
Sin embargo, se pueden incluir otros cambios posteriores a la carga que el usuario no espera, por ejemplo, si te desplazas más por la página y se carga contenido cargado de forma diferida que provoca cambios. Otras causas comunes del CLS posterior a la carga se deben a 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 la sección "Descubre la experiencia de tus usuarios reales" y el CLS de carga basado en el laboratorio en la sección "Diagnostica problemas de rendimiento". Es probable que las diferencias entre estos valores sean el resultado del CLS posterior a la carga.
Identifica problemas de CLS durante la 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 detectó Lighthouse. En este caso, Lighthouse te 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 cambiaron durante la carga de la página junto con su contribución al CLS. Para ver estas auditorías, filtra por las auditorías de CLS:
El panel Rendimiento de Herramientas para desarrolladores proporciona una gran cantidad de información sobre los cambios de diseño:
Layout Shift. Si haces clic en los diamantes, se muestra una animación del cambio y los detalles en el panel Resumen.
Los cambios de diseño se destacan en el segmento Cambios de diseño. La línea morada agrupa los cambios en clústeres de cambios, y los diamantes muestran los cambios individuales en ese clúster. El tamaño del diamante es proporcional al tamaño del cambio, lo que te permite enfocarte en los cambios más grandes.
Al hacer clic en un cambio, se muestra una ventana emergente con una animación del cambio y se destacan los elementos cambiados en color púrpura.
Además, la vista Resumen de un registro de Layout Shift incluye la hora de inicio, la puntuación de cambio y los elementos cambiados. Esto es especialmente útil para obtener más detalles sobre los problemas de CLS de carga, ya que se pueden replicar fácilmente con un perfil de rendimiento de recarga.
También se vincula a la sugerencia Causantes de cambios de diseño que se muestra en el panel Sugerencias de la izquierda, que muestra el CLS total en la parte superior, así como los posibles motivos de los cambios de diseño.
Identifica problemas de CLS posteriores a la carga
La discrepancia entre las puntuaciones del CLS de CrUX y Lighthouse suele indicar el 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 del CLS en el campo.
La vista de métricas en tiempo real del panel Rendimiento te permite interactuar con la página y supervisar la puntuación de CLS para identificar las interacciones que causan cambios de diseño grandes.
Como alternativa al uso de Herramientas para desarrolladores, puedes navegar por tu página web mientras registras los cambios de diseño con un Performance Observer pegado en la consola.
Después de configurar el monitoreo de cambios, 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 por completo sin espacio reservado para él. El desplazamiento del contenido cuando el usuario mantiene el puntero sobre él es otra causa común del CLS posterior a la carga. Cualquier cambio de contenido durante cualquiera de estas interacciones se considera inesperado, incluso si ocurre en un lapso de 500 milisegundos.
Para obtener más información, consulta Cómo depurar cambios de diseño.
Después de identificar las causas comunes del CLS, también puedes usar el modo de flujo del usuario de intervalos de Lighthouse para asegurarte de que los flujos típicos del usuario no empeoren con la introducción de cambios de diseño.
Cómo medir los elementos de CLS en el campo
Supervisar el CLS en el campo puede ser muy valioso para determinar en qué circunstancias se produce el CLS y reducir las posibles causas. Al igual que la mayoría de las herramientas de laboratorio, las herramientas de campo solo miden los elementos que cambiaron, pero, por lo general, eso proporciona suficiente información para identificar la causa. También puedes usar las mediciones de campo del CLS para determinar qué problemas tienen la prioridad más alta para corregir.
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 del CLS
Una vez que hayas identificado las causas del CLS, puedes comenzar a corregir los problemas. En esta sección, mostraremos algunos de los motivos más comunes del CLS y lo que puedes hacer para evitarlos.
Imágenes sin dimensiones
Siempre incluye los atributos de tamaño width y height en tus imágenes y elementos de video. Como alternativa, reserva el espacio requerido con CSS aspect-ratio o 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 garantizar que se asignara espacio suficiente en la página antes de que el navegador comenzara a recuperar imágenes. Esto minimizaría el reflujo y el nuevo diseño.
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">
width y height en este ejemplo no incluyen unidades. Estas dimensiones en "píxeles" garantizarían que el navegador reserve un área de 640 x 360 en el diseño de la página. La imagen se estiraría para ajustarse a este espacio, independientemente de si las dimensiones reales coincidían con él.
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, como 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 dejarles espacio, lo que genera 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 verla expresada 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 de 360 x (16 / 9) = 640 px.
- Si puppy.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 espacio suficiente para la altura y el área asociada.
Práctica recomendada moderna para establecer las dimensiones de la imagen
Debido a que los navegadores modernos establecen la relación de aspecto predeterminada de las imágenes en función de los atributos width y height de una imagen, puedes evitar las alteraciones del diseño si estableces esos atributos en la imagen y, luego, incluyes el código 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">
Luego, 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 basada en 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 debe tener 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 código HTML, en lugar de usar una hoja de estilo predeterminada del agente de usuario (consulta esta publicación para obtener más información sobre por qué), por lo que el valor se muestra de manera un poco diferente. Por ejemplo, Chrome lo muestra de la siguiente manera en la sección Styles del panel Element:
img[Attributes Style] {
aspect-ratio: auto 640 / 360;
}
Safari se comporta de manera similar y usa una fuente de estilo HTML Attributes. Firefox no muestra este aspect-ratio calculado 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 aún provoca un cambio de diseño después de que se carga la imagen, pero 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, sigue provocando menos cambios de diseño que el tamaño predeterminado 0 x 0 de una imagen sin dimensiones proporcionadas.
Para obtener un análisis detallado fantástico sobre la relación de aspecto con más información sobre las imágenes responsivas, consulta Carga de páginas sin problemas con relaciones de aspecto de medios.
Si tu imagen está en un contenedor, puedes usar CSS para cambiar su tamaño al ancho del contenedor. Establecemos 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 imagen. 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 desees incluir una toma recortada de una imagen para los puertos de visualización estrechos y mostrar la imagen completa en computadoras 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, contenido incorporado y otro contenido que se carga de forma tardía
Las imágenes no son el único tipo de contenido que puede causar cambios de diseño. Los anuncios, las incorporaciones, los iframes y otros contenidos insertados 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 mayores factores que 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 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 no óptima, ya que los anuncios desplazan hacia abajo en la página el contenido visible que estás viendo.
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 contenido incorporado no siempre reservan espacio para sus widgets, lo que provoca cambios de diseño cuando finalmente se cargan.
Las técnicas para abordar estos problemas son similares. Las principales diferencias son el nivel de control que 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 puedas controlar los cambios de diseño que se produzcan dentro de esas inserciones.
Reserva espacio para el contenido que se carga tarde
Cuando colocas contenido de carga tardía en el flujo de contenido, puedes 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 de contenido responsivo, como los anuncios, por ejemplo, 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 pequeñas diferencias en los tamaños de los anuncios o los marcadores de posición en los diferentes factores de forma con consultas de medios.
En el caso del contenido que podría no tener 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 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 cambio, puedes establecer el tamaño inicial en el tamaño más pequeño que se usará y aceptar cierto nivel de desplazamiento para el contenido más grande. Usar min-height, como se sugirió anteriormente, permite que el elemento principal crezca según sea necesario y 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 devuelve ningún anuncio. Quitar el espacio reservado para los elementos puede causar tanto CLS como insertar contenido.
Coloca el contenido que se carga tarde más abajo en el viewport
Por lo general, el contenido insertado de forma dinámica 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, insertar contenido en cualquier parte del viewport aún provoca un desplazamiento. Si no puedes reservar espacio para el contenido insertado, te recomendamos que lo coloques 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 de la ventana gráfica cuando intentas cargar un sitio. Al igual que con los anuncios, esto suele ocurrir con los banners y los formularios que desplazan el resto del contenido de la página:
Si necesitas mostrar estos tipos de ayudas visuales de la IU, reserva espacio suficiente en la ventana gráfica con anticipación (por ejemplo, con un marcador de posición o una IU esqueleto) para que, cuando se cargue, no provoque que el contenido de la página se desplace de forma inesperada. Como alternativa, asegúrate de que el elemento no forme parte del flujo del documento superponiendo el contenido cuando tenga sentido. Consulta 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 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 en vivo. Hay varias formas de evitar los cambios de diseño inesperados en esos casos:
- Reemplaza el contenido anterior por el nuevo en un contenedor de tamaño fijo o usa un carrusel y quita el contenido anterior después de la transición. Recuerda inhabilitar los vínculos y los controles hasta que se complete la transición para evitar clics o toques accidentales mientras se carga el contenido nuevo.
- Haz que el usuario 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 realizar una recuperación previa del contenido antes de la interacción del usuario para que se muestre de inmediato. Como recordatorio, los cambios de diseño que se producen en un plazo de 500 milisegundos después de la entrada del usuario no se incluyen en el CLS.
- Carga el contenido sin problemas fuera de la pantalla y superpón un aviso al usuario para informarle que está disponible (por ejemplo, con un botón "Desplazarse hacia arriba").
Animaciones
Los cambios en los valores de las propiedades de CSS pueden requerir que el navegador reaccione a estos cambios. Algunos valores, como box-shadow y box-sizing, activan el nuevo 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 animar con estas propiedades.
Se pueden cambiar otras propiedades de CSS sin activar nuevos diseños. Esto incluye el uso de animaciones transform para trasladar, escalar, rotar o sesgar elementos.
Las animaciones compuestas con translate no pueden afectar otros elementos, por lo que no se tienen en cuenta para el CLS. Las animaciones no compuestas tampoco provocan un nuevo 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
Por lo general, la descarga y la renderización de fuentes web se manejan de una de estas dos maneras antes de que se descargue la fuente web:
- La fuente de resguardo se reemplaza por la fuente web, lo que genera un destello de texto sin diseño (FOUT).
- El texto "invisible" se muestra con la fuente de resguardo hasta que hay disponible una fuente web y el texto se hace visible (FOIT, flash de texto invisible).
Ambos enfoques pueden causar cambios de diseño. Incluso si el texto es invisible, se diseña con la fuente de resguardo, por lo que, cuando se carga la fuente web, el bloque de texto y el contenido circundante se desplazan de la misma manera que con la fuente visible.
Las siguientes herramientas pueden ayudarte a minimizar el desplazamiento del texto:
font-display: optionalpuede 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 que se use la fuente de resguardo adecuada. Por ejemplo, usar
font-family: "Google Sans", sans-serif;garantizará que se use la fuente de resguardosans-serifdel navegador mientras se carga"Google Sans". Si no especificas una fuente de resguardo solo confont-family: "Google Sans", se usará la fuente predeterminada, que en Chrome es "Times", una fuente con serifas que es una peor coincidencia que la fuentesans-serifpredeterminada. - Minimiza las diferencias de tamaño entre la fuente de resguardo y la fuente web con las nuevas APIs
size-adjust,ascent-override,descent-overrideyline-gap-override, como se detalla en la entrada Fuentes de resguardo mejoradas. - La API de Font Loading puede reducir el tiempo que se tarda en obtener las fuentes necesarias.
- Carga las 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.
Consulta Prácticas recomendadas para las fuentes para conocer otras prácticas recomendadas relacionadas con las fuentes.
Reduce el CLS asegurándote de que las páginas sean aptas para la bfcache
Una técnica muy eficaz para mantener bajos los valores del 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 breve período después de que sales de ellas, por lo que, si vuelves a ellas, se restablecerán exactamente como las dejaste. Esto significa que la página completamente cargada está disponible al instante, sin ningún cambio que se pueda ver normalmente durante la carga debido a cualquiera de los motivos mencionados anteriormente.
Si bien esto aún podría significar que la carga inicial de la página experimente cambios de diseño, cuando un usuario vuelve a las páginas, no ve los mismos cambios de diseño repetidamente. Siempre debes intentar evitar los cambios, incluso en la carga inicial, pero, cuando sea más difícil resolverlos por completo, puedes, al menos, reducir el impacto evitándolos en cualquier navegación de bfcache.
La navegación hacia atrás y hacia adelante es común 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ó esta función en Chrome, observamos mejoras notables en el CLS.
Todos los navegadores usan la bfcache de forma predeterminada, pero algunos sitios no son aptos para usarla por diversos motivos. Lee la guía sobre la bfcache para obtener más detalles sobre cómo probar y detectar cualquier problema que impida el uso de la bfcache y asegurarte de aprovechar al máximo esta función para mejorar la puntuación general del CLS de tu sitio.
Conclusión
Existen varias técnicas para identificar y mejorar el CLS, como se detalló anteriormente en esta guía. Las Métricas web esenciales tienen tolerancias integradas, por lo que, incluso si no puedes eliminar el CLS por completo, usar algunas de estas técnicas debería permitirte reducir su impacto. Esperamos que esto te permita mantenerte dentro de esos límites y crear una mejor experiencia para los usuarios de tu sitio web.