Cambio de diseño acumulativo explicado: cómo corregir su puntuación

¿Tiene problemas con los problemas de cambio de diseño acumulativo en su sitio web? ¿O no está seguro de lo que significa Cambio de diseño acumulativo?

El cambio de diseño acumulativo, o CLS para abreviar, es una métrica que forma parte de la iniciativa Core Web Vitals de Google.

En pocas palabras, mide cuánto del contenido de una página web cambia “inesperadamente”. Una puntuación CLS alta puede indicar una experiencia de usuario deficiente y también puede ser un lastre para el SEO de su sitio.

En esta publicación, aprenderá todo lo que necesita saber sobre el cambio de diseño acumulativo y cómo afecta los sitios de WordPress (y la web en general).

¿Qué es el cambio de diseño acumulativo (CLS)? Explicación del significado de cambio de diseño acumulativo

El cambio de diseño acumulativo es la medida de cuánto se mueve inesperadamente una página en su sitio durante la visita de un usuario, según lo medido por la API de inestabilidad de diseño, una API de prueba de rendimiento estandarizada.

El cambio de diseño acumulativo (CLS) es una de las tres métricas de la iniciativa Core Web Vitals de Google, junto con la pintura más grande con contenido (LCP) y el retraso de la primera entrada (FID).

Para comprender el significado de Cambio de diseño acumulativo, es importante analizar el cambio de diseño en general.

Un cambio de diseño se produce cuando el contenido de su sitio se "mueve" o "cambia" de forma inesperada.

O, en términos técnicos, es cuando cualquier elemento visible en la ventana gráfica cambia su posición de inicio entre dos fotogramas.

Un ejemplo común sería que está en medio de la lectura de un bloque de texto... pero de repente aparece un anuncio de carga tardía y empuja el contenido del texto hacia abajo en la página.

Aquí hay otra imagen de ejemplo de Google que muestra que esto sucede:

Es casi seguro que ha encontrado cambios de diseño al navegar por la web, incluso si no los conoce por ese nombre.

Una sola visita podría tener múltiples eventos de cambio de diseño separados. Como tal, la métrica de cambio de diseño acumulativo tiene como objetivo capturar la imagen completa midiendo la cantidad total de cambios de diseño inesperados en una página*.

*La medida exacta es un poco más técnica después de algunos cambios por parte de Google, pero esa sigue siendo la idea básica. Si está interesado en los detalles esenciales, puede leer sobre esto aquí .

¿Por qué el cambio de diseño acumulativo es malo?

La razón principal por la que el cambio de diseño acumulativo es malo es que crea una experiencia de usuario deficiente en su sitio.

En el mejor de los casos, es levemente molesto para sus visitantes. En el peor de los casos, puede hacer que los visitantes realicen acciones que no desean realizar.

Por ejemplo, imagine si un usuario quiere hacer clic en "Cancelar", pero accidentalmente hace clic en "Confirmar" porque un cambio de diseño movió la posición de los botones a la derecha cuando la persona estaba haciendo clic.

Más allá de afectar las experiencias de sus visitantes humanos, tener malas puntuaciones de Cambio de diseño acumulativo también puede ser un lastre para las clasificaciones de su sitio en los motores de búsqueda.

A partir de la actualización de Page Experience de Google (que terminó de implementarse en agosto de 2021), Google utiliza Core Web Vitals como uno de sus factores de clasificación de SEO. Debido a que el cambio de diseño acumulativo es parte de Core Web Vitals, eso significa que puede afectar el rendimiento de búsqueda de su sitio.

Básicamente, solucionar cualquier problema de cambio de diseño acumulativo en su sitio ayudará a mejorarlo tanto para los visitantes humanos como para los motores de búsqueda.

Entonces, ¿qué podría estar causando el cambio de diseño acumulativo? Vamos a cubrir eso a continuación...

¿Qué causa el cambio de diseño acumulativo?

Aquí hay un resumen rápido de las causas más comunes del cambio de diseño:

• No establecer dimensiones para imágenes, iframes, videos u otras incrustaciones.
• Problemas con la carga de fuentes personalizadas, lo que puede hacer que el texto sea invisible o cambie de tamaño a medida que se cargan las fuentes personalizadas.
• Publicar anuncios receptivos (por ejemplo, AdSense) con diferentes tamaños (y no reservar espacio para esos anuncios).
• Inyección dinámica de contenido con complementos (avisos de consentimiento de cookies, formularios de generación de clientes potenciales, etc.).
• Uso de animaciones sin la propiedad CSS Transform.

Abordaremos estos problemas con mucha más profundidad más adelante en esta publicación, ya que le mostraremos cómo solucionar cada problema común.

Cómo medir el cambio de diseño acumulativo: las mejores herramientas de prueba

Hay una serie de herramientas que puede utilizar para probar la puntuación de cambio de diseño acumulativo de su sitio.

El cambio de diseño acumulativo es parte de la auditoría de Lighthouse, por lo que cualquier herramienta de prueba de velocidad que use Lighthouse como parte de su auditoría incluirá datos CLS; esto incluye PageSpeed ​​Insights, GTmetrix, Chrome Developer Tools y muchas otras herramientas de prueba populares.

Estas son algunas de las principales herramientas de prueba de cambio de diseño acumulativo que se destacan por su utilidad...

Perspectivas de PageSpeed

PageSpeed ​​Insights es una de las herramientas más útiles para evaluar el estado del cambio de diseño de su sitio porque le proporciona dos fuentes de datos:

• Datos de campo: datos de usuarios reales del informe Chrome UX (suponiendo que su sitio tenga suficiente tráfico para incluirlo en el informe). Esto le permite ver los datos de cambio de diseño acumulativo reales para sus visitantes humanos reales. Estos son también los datos que Google utiliza como señal de clasificación.
• Datos de laboratorio: datos de prueba simulados recopilados por Lighthouse (que es lo que utiliza PageSpeed ​​Insights para generar sus informes de análisis de rendimiento).

También puede ver datos tanto para escritorio como para dispositivos móviles cambiando entre las pestañas.

Nota : los datos de laboratorio solo pueden medir los cambios de diseño que ocurren durante la carga de la página, por lo que sus resultados de usuario real pueden ser ligeramente más altos si tiene cambios de diseño que ocurren después de la carga de la página.

Herramientas para desarrolladores de Chrome

Chrome Developer Tools ofrece algunos recursos útiles tanto para medir CLS como para depurar los cambios de diseño individuales que se producen en su sitio.

Primero, puede ejecutar una auditoría de Lighthouse para ver el puntaje CLS de su sitio. Así es cómo:

1. Abra las herramientas para desarrolladores de Chrome.
2. Ve a la pestaña Faro .
3. Configura tu prueba.
4. Haga clic en el botón de carga de la página Analizar para ejecutar la prueba.

Después de una breve espera, debería ver la interfaz de auditoría normal de Lighthouse (que se parece mucho a PageSpeed ​​Insights).

Sin embargo, Chrome Developer Tools también le permite profundizar en CLS con su análisis de representación. Esto le permitirá resaltar regiones de cambio de diseño individuales en su sitio, lo que le ayudará a depurarlas.

Así es cómo:

1. Haga clic en el ícono de los "tres puntos" en la esquina superior derecha de la interfaz de las herramientas para desarrolladores de Chrome.
2. Seleccione Más herramientas → Representación , que debería abrir una nueva interfaz en la parte inferior.
3. Marque la casilla para Regiones de cambio de diseño .

Ahora, vuelva a cargar la página que desea probar y Chrome debería resaltar cualquier área con cambios de diseño usando un cuadro azul. Estos aspectos destacados aparecerán en la página real a medida que se carga el contenido y desaparecerán una vez que finalice el turno.

Si los aspectos más destacados ocurren demasiado rápido para que pueda seguirlos, puede ralentizar su sitio y ver cómo se carga cuadro por cuadro usando la pestaña Rendimiento .

Consola de búsqueda de Google

Si bien Google Search Console no le permite ejecutar pruebas de laboratorio para determinar el cambio de diseño acumulativo, le brinda una manera fácil de ver los problemas con el cambio de diseño acumulativo en su sitio, según lo medido por el informe Chrome UX.

La ventaja de usar Google Search Console sobre otras herramientas es que le permite ver rápidamente los problemas en todo su sitio en lugar de probar página por página.

A continuación, le mostramos cómo ver posibles problemas en su sitio:

1. Ve a la consola de búsqueda de Google. Si aún no ha verificado su sitio, puede seguir nuestra guía sobre cómo verificar Google Search Console.
2. Abra el informe Core Web Vitals en Experiencia .
3. Haga clic en Abrir informe junto a Dispositivo móvil o Escritorio , según lo que desee analizar.

Si corresponde, Google resaltará las URL con puntuaciones de cambio de diseño acumulativo problemáticas.

Nota : solo verá datos aquí si su sitio tiene suficiente tráfico mensual para incluirse en el informe Chrome UX.

Generador de GIF de cambio de diseño

Como sugiere el nombre, Layout Shift GIF Generator genera un GIF de los cambios de diseño en su sitio para que pueda ver exactamente qué contenido está causando problemas. También le dará su puntaje, aunque ese no es el enfoque principal de la herramienta.

Todo lo que debe hacer es agregar la URL que desea probar y elegir entre móvil o escritorio. Luego, generará un GIF de su sitio con reflejos verdes que muestran los elementos exactos que están cambiando.

Al ver qué elementos están cambiando y contribuyendo a su puntaje de cambio de diseño acumulativo, puede saber exactamente dónde enfocarse cuando se trata de mejorar los puntajes de su sitio.

¿Qué es un buen puntaje de diseño acumulativo?

De acuerdo con la iniciativa Core Web Vitals de Google, una buena puntuación de cambio de diseño acumulativo es 0,1 o menos .

Si su puntaje de cambio de diseño acumulativo está entre 0.1 y 0.25, Google lo define como "Necesita mejorar".

Y si su puntaje de cambio de diseño acumulativo es superior a 0.25, Google lo define como "pobre".

Aquí hay un gráfico del sitio web Core Web Vitals de Google que muestra estos puntajes visualmente:

Cómo corregir el cambio de diseño acumulativo en WordPress (u otras plataformas)

Ahora que comprende lo que está sucediendo con el cambio de diseño acumulativo, es hora de pasar a algunos consejos prácticos sobre cómo corregir el cambio de diseño acumulativo en WordPress.

Si bien estos consejos provienen del ángulo de WordPress, todos son universales y puede aplicarlos a otras herramientas de creación de sitios web.

Especificar siempre las dimensiones de las imágenes

Una de las causas más comunes del cambio de diseño es la carga tardía de imágenes que mueven el contenido, especialmente si está utilizando tácticas como la carga diferida.

Para evitar esto, puede especificar las dimensiones de una imagen en el código cuando la incrusta. De esa manera, el navegador del visitante reservará ese espacio incluso si la imagen aún no se ha cargado, lo que significa que la imagen no necesitará mover el contenido.

Si está incrustando imágenes a través del editor de WordPress (ya sea el editor de bloques de Gutenberg o el editor clásico de TinyMCE), no es necesario especificar manualmente las dimensiones de la imagen porque WordPress lo hará por usted automáticamente.

Lo mismo ocurre con los complementos de creación de páginas populares como Elementor, Divi, Beaver Builder, etc.

Regístrese para recibir el boletín

¿Quiere saber cómo aumentamos nuestro tráfico en un 1000 %?

¡Únase a más de 20,000 personas que reciben nuestro boletín semanal con consejos internos de WordPress!

Suscríbase ahora

Sin embargo, pueden surgir problemas si está incrustando manualmente imágenes usando su propio código, lo que podría suceder si está agregando contenido a un complemento, editando los archivos de plantilla de su tema secundario, etc.

El código HTML para una imagen básica incrustada se ve así:

<img src="https://kinsta.com/example-image.jpg" alt="An example image">

Para especificar sus dimensiones, puede agregar parámetros de alto y ancho . Aquí hay un ejemplo de cómo se vería eso para una imagen de 600x300px:

<img src="https://kinsta.com/example-image.jpg" alt="An example image" width="600" height="300" >

Muchos complementos de rendimiento de WordPress también incluyen funciones para automatizar esto, como las funciones Agregar dimensiones de imagen faltantes en WP Rocket o Perfmatters.

Especifique siempre las dimensiones para videos, iframes y otras incrustaciones

Al igual que con las imágenes, también querrá especificar las dimensiones cada vez que agregue videos, iframes u otras incrustaciones.

Las herramientas de inserción de la mayoría de los sitios web deberían especificar automáticamente las dimensiones para la inserción.

Por ejemplo, si observa el código de inserción de YouTube, verá que incluye dimensiones:

Lo mismo ocurre con muchos otros servicios.

Sin embargo, si su código para insertar no especifica la altura y el ancho, puede agregar manualmente estas dimensiones al código para insertar.

Reparar y optimizar la carga de fuentes

Los problemas con la carga y optimización de fuentes pueden ser otra fuente común de cambios de diseño a través de dos posibles problemas:

• Flash de texto invisible (FOIT) : la página se carga inicialmente sin que aparezca ningún contenido de texto. Una vez que se carga la fuente personalizada, el texto aparece de repente (lo que puede hacer que el contenido existente se desplace).
• Flash de texto sin estilo (FOUT) : el contenido de texto se carga utilizando una fuente del sistema (sin estilo). Una vez que se carga la fuente personalizada, el texto cambia a esa fuente personalizada, lo que puede hacer que el contenido se desplace porque el tamaño y el espaciado del texto pueden ser diferentes.

Para evitar estos problemas, debe optimizar la forma en que carga las fuentes en su sitio (lo que también puede tener algunos beneficios para el rendimiento de su sitio).

Alojar fuentes localmente y precargar fuentes

Al alojar las fuentes localmente y usar la precarga, les indica a los navegadores de los visitantes que le den mayor prioridad a la carga de archivos de fuentes personalizadas.

Al cargar archivos de fuentes antes que otros recursos, puede asegurarse de que los archivos de fuentes ya estén cargados cuando el navegador comience a mostrar su contenido, lo que puede evitar problemas con FOUT y FOIT.

Para aprender a alojar fuentes localmente en WordPress, puede leer nuestra guía completa para alojar fuentes localmente en WordPress.

Desde allí, puede configurar la precarga de fuentes manualmente o mediante un complemento. La mayoría de los complementos de rendimiento incluyen opciones para precargar fuentes, incluidos WP Rocket, Perfmatters, Autoptimize y otros.

Si usa Google Fonts, también puede usar el complemento OMGF gratuito para alojar las fuentes localmente y precargarlas.

También puede precargar manualmente las fuentes agregando el código a la sección <head> de su sitio.

Aquí hay un ejemplo del código: asegúrese de reemplazarlo con el nombre/ubicación real del archivo de fuente que desea precargar:

<link rel="preload" href="https://kinsta.com/fonts/roboto.woff2" as="font/woff2" crossorigin>

Puede agregarlo directamente usando un tema secundario de WordPress o inyectarlo con el gancho wp_head y un complemento como Code Snippets.

Establezca Font-Display en Opcional o Intercambiar

La propiedad CSS Font-Display le permite controlar el comportamiento de representación de las fuentes en su sitio y evitar FOIT.

Esencialmente, le permite usar una fuente alternativa en situaciones en las que su fuente personalizada aún no se ha cargado.

Hay dos opciones principales que puede usar para abordar CLS:

• Intercambiar : utiliza una fuente alternativa mientras se carga la fuente personalizada y luego la cambia a su fuente personalizada una vez que se carga la fuente.
• Opcional : permite que el navegador determine si usar o no una fuente personalizada en función de la velocidad de conexión de un visitante.

Con Swap , el navegador siempre cambiará a la fuente personalizada una vez que se cargue.

Si bien Swap resuelve completamente FOIT, puede conducir a FOUT. Para minimizar esto, debe asegurarse de que la fuente alternativa use el mismo espaciado que la fuente personalizada (al menos tanto como sea posible). De esa manera, incluso si cambia el estilo de fuente, no se producirán cambios en el diseño porque el espaciado será el mismo.

Con Opcional , el navegador le dará a la fuente personalizada 100 ms para cargar. Sin embargo, si la fuente personalizada no está disponible para entonces, el navegador se quedará con la fuente alternativa y nunca la cambiará a la fuente personalizada para esa página vista ( usará la fuente personalizada para las siguientes páginas vistas, ya que es probable que la fuente el archivo se ha descargado y almacenado en caché para entonces ).

Si bien Opcional puede resolver tanto FOIT como FOUT, la desventaja es que el visitante puede quedarse con la fuente alternativa para su primera vista de página.

Si se siente cómodo trabajando con CSS, puede editar manualmente la propiedad Font-Display en la hoja de estilo de su tema hijo.

Si no te sientes cómodo haciendo eso, también puedes encontrar algunos complementos que te ayudarán:

• Intercambiar visualización de fuentes de Google: habilita fácilmente el intercambio de visualización de fuentes para fuentes de Google.
• Limpieza de activos: admite Google Fonts para fuentes locales gratuitas y personalizadas con la versión Pro.
• Perfmatters: ofrece una función para Google Fonts.

Si está utilizando Elementor, Elementor también incluye una opción integrada para hacer esto. Ve a Elementor → Configuración → Avanzado . Luego puede configurar el menú desplegable Carga de fuentes de Google igual a Intercambiar u Opcional según sus preferencias:

¿Demasiado complejo? ¡Considere una pila de fuentes del sistema!

Si toda esta conversación sobre la precarga y la visualización de fuentes es un poco confusa, una solución fácil es simplemente usar una pila de fuentes del sistema en lugar de una pila de fuentes personalizada.

Si bien esto limita sus opciones de diseño, resolverá por completo los problemas de fuentes de cambio de diseño acumulativo, FOIT y FOUT. Además, también ayudará a que su sitio se cargue mucho más rápido.

Si está interesado en esto, consulte la guía de Brian para usar una pila de fuentes del sistema en WordPress.

Reserve espacio para anuncios (si usa anuncios gráficos)

Si usa anuncios gráficos, es importante que reserve espacio para esos anuncios en el código de su sitio. Esto sigue la misma idea que reservar espacio para imágenes, videos e incrustaciones.

Sin embargo, los anuncios gráficos merecen una mención especial porque es muy común tener anuncios gráficos que se cargan tarde si está utilizando cualquier tipo de tecnología de ofertas. Esto se debe a que la tecnología de ofertas necesita tiempo para funcionar y determinar qué anuncio mostrar.

También puede ser un problema con los anuncios automáticos de AdSense si tiene espacios publicitarios dinámicos, porque, además del problema de las ofertas, AdSense también cargará anuncios de diferentes tamaños (por lo que es posible que no sepa el tamaño del anuncio de antemano).

Si está utilizando una de las redes publicitarias gráficas populares, como Mediavine o AdThrive, ya deberían ofrecer herramientas para ayudarlo a evitar cambios en el diseño de sus anuncios. Por ejemplo, si abre el área de Configuración de anuncios de Mediavine, puede habilitar una opción para Optimizar anuncios para CLS :

Para optimizar AdSense para cambio de diseño acumulativo, es un poco más complicado.

Una solución común es agregar un elemento contenedor <div> alrededor de cada bloque de anuncios que especifica una altura mínima usando la propiedad CSS min-height . También puede usar consultas de medios para cambiar la altura mínima según el dispositivo de un usuario.

Google recomienda establecer la altura mínima igual al tamaño de anuncio más grande posible. Si bien esto puede generar espacio desperdiciado si se publica un anuncio más pequeño, es la mejor opción para eliminar cualquier posibilidad de que se produzca un cambio de diseño.

Al configurar este elemento contenedor, asegúrese de utilizar un ID de CSS en lugar de una clase, ya que AdSense a menudo eliminará la clase de CSS de los objetos principales.

Así es como se vería el CSS:

Y luego, así es como se vería la inserción de AdSense:

En la interfaz, ahora verá que su sitio reserva espacio para ese anuncio, incluso si está vacío:

Sea inteligente al inyectar contenido dinámicamente con complementos

Muchos sitios de WordPress inyectarán dinámicamente contenido para funciones como avisos de consentimiento de cookies, contenido relacionado, formularios de suscripción de correo electrónico, etc.

Si bien esto está bien, querrá tener cuidado de evitar hacerlo de una manera que provoque cambios en el diseño.

Una buena práctica recomendada de diseño web aquí es nunca inyectar contenido sobre el contenido existente a menos que el usuario haya realizado una interacción específica (por ejemplo, hacer clic en un botón).

Por ejemplo, si está agregando un aviso de consentimiento de cookies, no desea insertarlo en la parte superior de su página porque eso haría que el contenido se desplazara hacia abajo ( a menos que ya esté reservando espacio para el banner de consentimiento de cookies ) .

En su lugar, debe mostrar el aviso en la parte inferior de la página, lo que evitará desplazar hacia abajo el contenido visible.

Para ver si el contenido dinámico está causando el problema, puede usar las herramientas de visualización de arriba (por ejemplo, Generador de GIF de desplazamiento de diseño).

Si ve que el contenido de un complemento específico está provocando cambios de diseño, puede considerar ajustar la configuración de ese complemento o cambiar a un complemento diferente.

Por ejemplo, algunos complementos de consentimiento de cookies son mejores que otros cuando se trata de cambios de diseño, por lo que vale la pena experimentar con diferentes complementos si tiene problemas.

Si desea profundizar aún más en el comportamiento de los complementos, puede usar una herramienta de monitoreo del rendimiento de la aplicación. Si aloja con Kinsta, la herramienta APM de Kinsta está disponible de forma gratuita en su panel de MyKinsta, o puede encontrar otras herramientas APM.

Para ayudarlo a probar complementos, también puede usar los sitios de prueba de Kinsta o la herramienta de desarrollo local DevKinsta.

Use la propiedad de transformación CSS para animaciones siempre que sea posible

Si está utilizando animaciones en su sitio, estas pueden ser otro culpable común de los cambios de diseño.

Para evitar problemas con las animaciones que causan cambios en el diseño, debe usar la función de transformación CSS para animaciones en lugar de otras tácticas:

• En lugar de usar las propiedades de alto y ancho , use transform: scale()
• Si desea mover elementos, use transform: translate() en lugar de top , bottom , right o left

Este es más un consejo técnico, por lo que es poco probable que necesite hacer esto a menos que esté agregando su propio CSS. Para obtener más información, puede leer la página de Google sobre CLS y animaciones/transiciones.

Resumen

Si su sitio web tiene un puntaje alto de cambio de diseño acumulativo, es importante corregirlo tanto para crear una mejor experiencia para sus visitantes humanos como para maximizar el rendimiento de su sitio en los resultados de búsqueda de Google.

Dos de los problemas más comunes son las dimensiones que faltan para las imágenes/inserciones y problemas con la carga de fuentes. Si los arregla, debería estar en camino a una puntuación mucho mejor.

Es posible que otros sitios deban ir más allá y profundizar en la carga de anuncios, el contenido dinámico y las animaciones. Si tiene dificultades para implementar este tipo de optimizaciones usted mismo, puede considerar trabajar con una agencia de WordPress o un profesional independiente.

Para obtener más información sobre Core Web Vitals en general, puede leer la guía completa de Kinsta para Core Web Vitals.

Y si desea un host de WordPress que pueda ayudarlo a crear un sitio de alto rendimiento que funcione bien en Core Web Vitals, considere usar el alojamiento administrado de WordPress de Kinsta: ¡migraremos sus sitios de WordPress de forma gratuita!