¿Tienes problemas con el Cumulative Layout Shift Explicado en tu sitio web? ¿O no estás seguro de lo que significa Cumulative Layout Shift?
Cumulative Layout Shift (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 la cantidad de contenido de una página web que se desplaza «inesperadamente». Una puntuación alta de CLS puede indicar una mala experiencia del usuario y también puede ser un lastre para el SEO de tu sitio.
En este artículo, aprenderás todo lo que necesitas saber sobre el Cambio de Diseño Acumulativo y cómo afecta a los sitios de WordPress (y a la web en general).
¿Qué Es el Cambio de Diseño Acumulativo (CLS)? Explicación del Significado del Cambio de Diseño Acumulativo
El Cumulative Layout Shift es la medida de cuánto se desplaza inesperadamente una página de tu sitio durante la visita de un usuario, según las mediciones de la API de Layout Instability, una API estandarizada de pruebas de rendimiento.
El Cambio de Diseño Acumulativo (CLS) es una de las tres métricas de la iniciativa Core Web Vitals de Google, junto con el Renderizado del Mayor Elemento con Contenido (LCP – Largest Contentful Paint) y la Latencia de la Primera Interacción (FID – First Input Delay).
Para entender el significado de Cumulative Layout Shift, es importante hablar del cambio de diseño en general.
Un cambio de diseño se produce cuando el contenido de tu sitio se «mueve» o «desplaza» inesperadamente.
O, en términos técnicos, es cuando cualquier elemento visible en la ventana gráfica cambia su posición inicial entre dos fotogramas.
Un ejemplo común sería que estuvieras en mitad de la lectura de un bloque de texto… pero entonces aparece de repente un anuncio que se carga tarde y empuja el contenido del texto hacia abajo en la página.
Aquí tienes otra imagen de ejemplo de Google que muestra cómo ocurre esto:
Es casi seguro que te has encontrado con cambios de diseño al navegar por la web, aunque no los conozcas por ese nombre.
Una sola visita puede tener varios cambios de diseño distintos. Por ello, la métrica Cambio de Diseño Acumulativo pretende captar 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 tras algunos cambios introducidos por Google, pero la idea básica sigue siendo ésa. Si te interesan los detalles concretos, puedes lee sobre ello aquí.
¿Por Qué es malo el Cambio de Diseño Acumulativo?
La razón principal por la que el Cambio de Diseño Acumulativo es malo es que crea una mala experiencia de usuario en tu sitio.
En el mejor de los casos, es ligeramente molesto para tus visitantes. En el peor de los casos, puede hacer que los visitantes realicen acciones que no desean.
Por ejemplo, imagina que un usuario quiere hacer clic en «Cancelar» pero accidentalmente hace clic en «Confirmar» porque un cambio de diseño ha desplazado la posición de los botones justo cuando estaba haciendo clic.
Además de afectar a la experiencia de tus visitantes humanos, tener malas puntuaciones de Cumulative Layout Shift también puede ser un lastre para la clasificación de tu sitio en los motores de búsqueda.
A partir de la actualización de la Experiencia en la Página de Google (que terminó de lanzarse en agosto de 2021), Google utiliza Core Web Vitals como uno de sus factores de clasificación SEO. Dado que el Cumulative Layout Shift forma parte de Core Web Vitals, esto significa que puede afectar al rendimiento de búsqueda de tu sitio.
Básicamente, arreglar cualquier problema con el Cumulative Layout Shift en tu sitio ayudará a mejorarlo tanto para los visitantes humanos como para los motores de búsqueda.
Entonces, ¿cuáles podrían ser las causas del Cumulative Layout Shift? Veámoslo a continuación…
¿Qué Causa el Cumulative Layout Shift?
Aquí tienes un breve resumen de las causas más comunes del desplazamiento de diseño:
- No establecer las dimensiones de las imágenes, iframes, vídeos u otros elementos incrustados.
- Problemas con la carga de fuentes personalizadas, que pueden hacer que el texto sea invisible o cambie de tamaño al cargarse las fuentes personalizadas.
- Servir anuncios responsivos (por ejemplo, AdSense) con diferentes tamaños (y no reservar espacio para esos anuncios).
- Inyectar dinámicamente contenido con plugins (avisos de consentimiento de cookies, formularios de generación de clientes potenciales, etc.).
- Utilizar animaciones sin la propiedad CSS Transform.
Más adelante profundizaremos en estos problemas y te mostraremos cómo solucionar cada uno de ellos.
Cómo Medir el Cumulative Layout Shift: Las Mejores Herramientas de Prueba
Existen varias herramientas que puedes utilizar para comprobar la puntuación del Cumulative Layout Shift de tu sitio.
Cumulative Layout Shift forma parte de la auditoría de Lighthouse, por lo que cualquier herramienta de prueba de velocidad que utilice 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.
Éstas son algunas de las principales herramientas de comprobación del Cumulative Layout Shift que destacan por su utilidad…
PageSpeed Insights
PageSpeed Insights es una de las herramientas más útiles para evaluar el estado del cambio de diseño de tu sitio porque te proporciona dos fuentes de datos:
- Datos de campo: datos de usuarios reales del informe UX de Chrome (suponiendo que tu sitio tenga suficiente tráfico para ser incluido en el informe). Esto te permite ver los datos reales del Cambio de diseño acumulado de tus 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 PageSpeed Insights utiliza para generar sus informes de análisis de rendimiento).
También puedes ver datos tanto para escritorio como para móvil cambiando entre las pestañas.
Nota: los datos de laboratorio sólo pueden medir los cambios de diseño que se producen durante la carga de la página, por lo que los resultados de usuario real pueden ser ligeramente superiores si los cambios de diseño se producen después de la carga de la página.
Herramientas de Desarrollo de Chrome
Las Herramientas para desarrolladores de Chrome ofrecen algunos recursos útiles tanto para medir CLS como para depurar los cambios de diseño individuales que se producen en tu sitio.
En primer lugar, puedes ejecutar una auditoría Lighthouse para ver la puntuación CLS de tu sitio. He aquí cómo hacerlo:
- Abre las Herramientas para desarrolladores de Chrome.
- Ve a la pestaña Lighthouse.
- Configura tu prueba.
- Haz clic en el botón Analizar carga de página para ejecutar la prueba.
Tras una breve espera, deberías ver la interfaz normal de auditoría de Lighthouse (que se parece mucho a PageSpeed Insights).
Sin embargo, las Herramientas para desarrolladores de Chrome también te permiten profundizar en CLS con su análisis de renderizado. Esto te permitirá resaltar regiones individuales de cambio de diseño en tu sitio, lo que te ayudará a depurarlas.
He aquí cómo hacerlo:
- Haz clic en el icono de los «tres puntos» situado en la esquina superior derecha de la interfaz de las Herramientas para desarrolladores de Chrome.
- Selecciona Más herramientas → Renderizado, que debería abrir una nueva interfaz en la parte inferior.
- Marca la casilla Regiones de Cambio de diseño.
Ahora, vuelve a cargar la página que quieres probar y Chrome debería resaltar las áreas con cambios de diseño mediante un recuadro azul. Estos resaltes aparecerán en la página real mientras se carga el contenido y desaparecerán una vez finalizado el desplazamiento.
Si las zonas resaltadas aparecen demasiado rápido para que puedas seguirlas, puedes ralentizar tu sitio y ver cómo se carga fotograma a fotograma utilizando la pestaña Rendimiento.
Google Search Console
Aunque Google Search Console no te permite realizar pruebas de laboratorio para determinar el cambio de diseño acumulativo, te ofrece una forma sencilla de ver los problemas con el cambio de diseño acumulativo en tu sitio, medidos por el informe UX de Chrome.
La ventaja de utilizar Google Search Console en lugar de otras herramientas es que te permite ver rápidamente los problemas en todo tu sitio en lugar de probar página por página.
A continuación te explicamos cómo ver los posibles problemas de tu sitio:
- Ve a Google Search Console. Si aún no has verificado tu sitio, puedes seguir nuestra guía sobre cómo verificar Google Search Console.
- Abre el informe Core Web Vitals en Experiencia.
- Haz clic en Abrir informe junto a Móvil o Escritorio, según lo que quieras analizar.
Si procede, Google resaltará las URL con puntuaciones de Desplazamiento de diseño acumulativo problemáticas.
Nota: sólo verás datos aquí si tu sitio tiene suficiente tráfico mensual para ser incluido en el informe Chrome UX.
Generador de GIF Layout Shift
Como su nombre indica, el Generador Generador de GIF Layout Shift genera un GIF de los cambios de diseño de tu sitio para que puedas ver exactamente qué contenido está causando problemas. También te dará tu puntuación, aunque ese no es el objetivo principal de la herramienta.
Todo lo que tienes que hacer es añadir la URL que quieres probar y elegir entre móvil o escritorio. A continuación, generará un GIF de tu sitio con resaltes verdes que muestran los elementos exactos que están cambiando.
Al ver qué elementos se están desplazando y contribuyen a tu puntuación de cambio de diseño acumulativo, puedes saber exactamente dónde centrarte a la hora de mejorar las puntuaciones de tu sitio.
¿Qué Se Considera una Buena Puntuación para el Cumulative Layout?
Según la iniciativa Core Web Vitals de Google, una buena puntuación del Cambio de diseño acumulativo es de 0,1 o menos.
Si tu puntuación de Cambio de diseño acumulativo está entre 0,1 y 0,25, Google lo define como «Necesita mejorar».
Y si tu puntuación de Desplazamiento de diseño acumulativo es superior a 0,25, Google lo define como «Deficiente».
Aquí tienes un gráfico del sitio web Core Web Vitals de Google que muestra visualmente estas puntuaciones:
Cómo Corregir el Cambio de Diseño Acumulativo en WordPress (U Otras Plataformas)
Ahora que ya sabes lo que ocurre con el Cumulative Layout Shift, es hora de pasar a algunos consejos prácticos sobre cómo solucionar el Cumulative Layout Shift en WordPress.
Aunque estos consejos se refieren a WordPress, todos son universales y puedes aplicarlos a otras herramientas de creación de sitios web.
Siempre Especifica las Dimensiones de las Imágenes
Una de las causas más comunes del cambio del diseño son las imágenes que se cargan tarde y desplazan el contenido, especialmente si utilizas tácticas como la carga lenta.
Para evitarlo, puedes especificar las dimensiones de una imagen en el código cuando la incrustes. De este modo, el navegador del visitante reservará ese espacio aunque la imagen aún no se haya cargado, lo que significa que la imagen no tendrá que desplazar el contenido.
Si incrustas imágenes a través del editor de WordPress (ya sea el editor de bloques Gutenberg o el editor clásico TinyMCE), no es necesario especificar manualmente las dimensiones de la imagen porque WordPress lo hará por ti automáticamente.
Lo mismo ocurre con los plugins constructores de páginas más populares, como Elementor, Divi, Beaver Builder, etc.
Sin embargo, pueden surgir problemas si estás incrustando imágenes manualmente utilizando tu propio código, lo que puede ocurrir si estás añadiendo contenido a un plugin, editando los archivos de plantilla de tu tema hijo, etc.
El código HTML para incrustar una imagen básica tiene este aspecto:
<img src="https://kinsta.com/example-image.jpg" alt="An example image">
Para especificar sus dimensiones, puedes añadir parámetros de altura y anchura. Aquí tienes un ejemplo de cómo quedaría una imagen de 600x300px:
<img src="https://kinsta.com/example-image.jpg" alt="An example image" width="600" height="300">
Muchos plugins de rendimiento de WordPress también incluyen funciones para automatizar esto, como las funciones Añadir dimensiones de imágenes que faltan en WP Rocket o Perfmatters.
Siempre Especifica las Dimensiones de los Vídeos, iframes y Otros Elementos Incrustados
Al igual que con las imágenes, también deberás especificar las dimensiones cuando añadas vídeos, iframes u otros elementos incrustados.
La mayoría de las herramientas de incrustación de los sitios web deberían especificar automáticamente las dimensiones de la incrustación.
Por ejemplo, si miras el código de incrustación de YouTube, verás que incluye dimensiones:
Lo mismo ocurre con muchos otros servicios.
Sin embargo, si tu código de incrustación no especifica la altura y la anchura, puedes añadir manualmente estas dimensiones al código de incrustación.
Corrige y Optimiza la Carga de Fuentes
Los problemas con la carga y optimización de las fuentes pueden ser otra fuente común de cambios de diseño a través de dos problemas potenciales:
- Flash of Invisible Text (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 of Unstyled Text (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 del texto y el espaciado pueden ser diferentes.
Para evitar estos problemas, debes optimizar la forma en que cargas las fuentes en tu sitio (lo que también puede tener algunas ventajas para el rendimiento de tu sitio).
Aloja las Fuentes Localmente y Cárgalas Previamente
Al alojar las fuentes localmente y utilizar la precarga, indicas a los navegadores de los visitantes que den mayor prioridad a la carga de archivos de fuentes personalizadas.
Al cargar los archivos de fuentes antes que otros recursos, puedes asegurarte de que los archivos de fuentes ya estén cargados cuando el navegador empiece a procesar tu contenido, lo que puede evitar problemas con FOUT y FOIT.
Para saber cómo alojar fuentes localmente en WordPress, puedes leer nuestra guía completa para alojar fuentes localmente en WordPress.
A partir de ahí, puedes configurar la precarga de fuentes manualmente o mediante un plugin. La mayoría de los plugins de rendimiento incluyen opciones para precargar fuentes, como WP Rocket, Perfmatters, Autoptimize y otros.
Si utilizas Google Fonts, también puedes usar el plugin gratuito OMGF para alojar las fuentes localmente y precargarlas.
También puedes precargar manualmente las fuentes añadiendo el código a la sección <head> de tu sitio.
Aquí tienes un ejemplo del código – asegúrate de sustituirlo por el nombre/ubicación real del archivo de fuentes que quieres precargar:
<link rel="preload" href="https://kinsta.com/fonts/roboto.woff2" as="font/woff2" crossorigin>
Puedes añadirlo directamente utilizando un tema hijo de WordPress o inyectarlo con el gancho wp_head y un plugin como Code Snippets.
Establece Font-Display como Opcional o Intercambiar
La propiedad CSS Font-Display te permite controlar el comportamiento de representación de las fuentes en tu sitio y evitar FOIT.
Básicamente, te permite utilizar una fuente alternativa en situaciones en las que tu fuente personalizada aún no se ha cargado.
Hay dos opciones principales que puedes utilizar para hacer frente a CLS:
- Swap – utiliza una fuente de reserva mientras se carga la fuente personalizada y luego la cambia por tu fuente personalizada una vez cargada la fuente.
- Optional – permite al navegador determinar si utiliza 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.
Aunque Swap resuelve completamente FOIT, puede provocar FOUT. Para minimizarlo, debes asegurarte de que la fuente alternativa utiliza un espaciado idéntico al de la fuente personalizada (al menos en la medida de lo posible). De este modo, aunque cambie el estilo de la fuente, no se producirán cambios en el diseño porque el espaciado será el mismo.
Con Optional, el navegador dará a la fuente personalizada 100 ms para cargarse. Sin embargo, si la fuente personalizada no está disponible para entonces, el navegador seguirá utilizando la fuente alternativa y nunca cambiará a la fuente personalizada para esa página(utilizará la fuente personalizada para las siguientes páginas, ya que es probable que el archivo de fuente se haya descargado y almacenado en caché para entonces).
Aunque Optional puede resolver tanto FOIT como FOUT, la desventaja es que el visitante puede quedarse con la fuente alternativa en su primera visita a la página.
Si te sientes cómodo trabajando con CSS, puedes editar manualmente la propiedad Font-Display en la hoja de estilos de tu tema hijo.
Si no te sientes cómodo haciéndolo, también puedes encontrar algunos plugins que te ayudarán:
- Swap Google Fonts Display – activa fácilmente el intercambio de visualización de fuentes de Google Fonts.
- Asset CleanUp – admite Google Fonts gratuitas y fuentes locales personalizadas con la versión Pro.
- Perfmatters – ofrece una función para Google Fonts.
Si utilizas Elementor, Elementor también incluye una opción integrada para hacer esto. Ve a Elementor → Ajustes → Avanzado. A continuación, puedes establecer el desplegable Carga de Google Fonts igual a Intercambiar u Opcional según tus preferencias:
¿Demasiado Complejo? Considera una Pila de Fuentes del Sistema
Si toda esta charla sobre precarga y visualización de fuentes te resulta un poco confusa, una solución fácil es utilizar una pila de fuentes del sistema en lugar de una pila de fuentes personalizada.
Aunque esto limita tus opciones de diseño, resolverá por completo los problemas de desplazamiento de diseño acumulativo, FOIT y FOUT. Además, hará que tu sitio se cargue mucho más rápido.
Si te interesa, consulta la guía de Brian sobre el uso de una pila de fuentes de sistema en WordPress.
Reserva Espacio para Anuncios (Si Utilizas Anuncios de Display)
Si utilizas anuncios de display, es importante que reserves espacio para esos anuncios en el código de tu sitio. Esto sigue la misma idea que reservar espacio para imágenes, vídeos e incrustaciones.
Sin embargo, los anuncios de display merecen una mención especial porque es muy común que los anuncios de display se carguen tarde si utilizas algún tipo de tecnología de pujas. Esto se debe a que la tecnología de pujas necesita tiempo para funcionar y averiguar qué anuncio mostrar.
También puede ser un problema con los anuncios automáticos de Ad Sense si tienes espacios publicitarios dinámicos, porque, además del problema de la puja, AdSense también cargará anuncios de diferentes tamaños (por lo que es posible que no sepas el tamaño del anuncio de antemano).
Si utilizas una de las redes publicitarias de display más populares, como Mediavine o AdThrive, ya deberían ofrecer herramientas que te ayuden a evitar cambios de diseño con tus anuncios. Por ejemplo, si abres el área de Configuración de anuncios de Mediavine, puedes activar una opción para Optimizar anuncios para CLS:
Optimizar AdSense para el desplazamiento de diseño acumulativo es un poco más complicado.
Una solución habitual es añadir un elemento envolvente <div> alrededor de cada unidad de anuncio que especifique una altura mínima mediante la propiedad CSS min-height . También puedes utilizar consultas de medios para cambiar la altura mínima en función del dispositivo del usuario.
Google recomienda establecer la altura mínima igual al tamaño de anuncio más grande posible. Aunque esto puede provocar que se desperdicie espacio si se publica un anuncio más pequeño, es la mejor opción para eliminar cualquier posibilidad de que se produzca un desplazamiento del diseño.
Cuando configures este elemento envolvente, asegúrate de utilizar un ID CSS en lugar de una clase, ya que AdSense suele eliminar la clase CSS de los objetos padre.
Este es el aspecto que podría tener el CSS:
Y aquí tienes el aspecto que podría tener la incrustación de AdSense:
En el frontend, ahora verás que tu sitio reserva espacio para ese anuncio, aunque esté vacío:
Sé Inteligente al Inyectar Contenido Dinámicamente con Plugins
Muchos sitios de WordPress inyectan contenido dinámicamente para funciones como avisos de consentimiento de cookies, contenido relacionado, formularios de suscripción por correo electrónico, etc.
Aunque esto está bien, debes tener cuidado de no hacerlo de forma que provoque cambios en el diseño.
Una buena práctica de diseño web en este caso es no inyectar nunca contenido sobre el contenido existente a menos que el usuario haya realizado específicamente una interacción (por ejemplo, haciendo clic en un botón).
Por ejemplo, si estás añadiendo un aviso de consentimiento de cookies, no querrás inyectarlo en la parte superior de la página, porque eso haría que el contenido se desplazara hacia abajo(a menos que ya estés reservando espacio para el banner de consentimiento de cookies).
En su lugar, debes 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, puedes utilizar las herramientas de visualización anteriores (por ejemplo, el Generador de Layout Shift GIF).
Si ves que el contenido de un plugin específico está provocando desplazamientos de diseño, puedes considerar ajustar la configuración de ese plugin o cambiar a un plugin diferente.
Por ejemplo, algunos plugins de consentimiento de cookies son mejores que otros en lo que respecta a los cambios de diseño, por lo que vale la pena experimentar con diferentes plugins si tienes problemas.
Si quieres profundizar aún más en el comportamiento de los plugins, puedes utilizar una herramienta de monitorización del rendimiento de las aplicaciones. Si alojas con Kinsta, la herramienta APM de Kinsta está disponible gratuitamente en tu panel de control MyKinsta, o puedes encontrar otras herramientas APM.
Para ayudarte a probar los plugins, también puedes utilizar los sitios de staging de Kinsta o la herramienta de desarrollo local DevKinsta.
Utiliza la Propiedad CSS Transform para las Animaciones Siempre que Sea Posible
Si utilizas animaciones en tu sitio, éstas pueden ser uno de los culpables comunes de los cambios de diseño.
Para evitar que las animaciones provoquen desplazamientos del diseño, debes utilizar la función Transformar CSS para las animaciones en lugar de otras tácticas:
- En lugar de utilizar las propiedades de height y width, utiliza transform: scale()
- Si quieres desplazar elementos, utiliza transform: translate() en lugar de top, bottom, right, o left.
Se trata más bien de un consejo técnico, por lo que es poco probable que tengas que hacerlo a menos que añadas tu propio CSS. Para saber más, puedes leer la página de Google sobre CLS y animaciones/transiciones.
Resumen
Si tu sitio web tiene una puntuación alta de Cumulative Layout Shift, es importante que lo corrijas tanto para crear una mejor experiencia para tus visitantes humanos como para maximizar el rendimiento de tu sitio en los resultados de búsqueda de Google.
Dos de los problemas más comunes son la falta de dimensiones de las imágenes/embeds y los problemas con la carga de fuentes. Si los solucionas, conseguirás una puntuación mucho mejor.
Otros sitios pueden necesitar ir más allá y profundizar en la carga de anuncios, el contenido dinámico y las animaciones. Si tienes problemas para implementar este tipo de optimizaciones por ti mismo, puedes considerar la posibilidad de trabajar con una agencia o un autónomo de WordPress.
Para saber más sobre las Core Web Vitals en general, puedes leer la guía completa de Kinsta sobre las Vitales Web Básicas.
Y si quieres un alojamiento WordPress que pueda ayudarte a crear un sitio de alto rendimiento que funcione bien en Core Web Vitals, considera utilizar el alojamiento administrado de WordPress – ¡Nosotros migraremos tus sitios WordPress gratis!
Deja una respuesta