La optimización para motores de búsqueda (SEO) es un proceso cambiante para el que no existe un manual de instrucciones. Optimizar no consiste únicamente en añadir palabras clave a tu contenido. Los motores de búsqueda como Google también tienen en cuenta indicadores de una experiencia web de calidad y segura, como la velocidad de carga de tu sitio, la facilidad con la que los visitantes pueden interactuar con él y mucho más.
Cumulative Layout Shift (CLS) es una métrica que Google utiliza para medir cuánto se reorganiza una página web mientras se carga. Un sitio que cambia considerablemente, haciendo que los usuarios hagan clic en el enlace equivocado o tengan dificultades para leer el contenido, ofrece una mala experiencia de usuario y Google lo penaliza.
Revisar la puntuación de CLS de tu sitio y otras métricas de Core Web Vitals puede ayudarte a identificar formas de mejorar su estado general y, a su vez, aumentar tu posicionamiento.
En esta guía se explican las causas de CLS, por qué deberías minimizarlo y algunos métodos para reducirlo.
¿Qué es el desplazamiento acumulado del diseño?
Cumulative Layout Shift (CLS) mide la magnitud de los desplazamientos en una página web mientras se cargan sus recursos. Probablemente hayas observado que, a veces, al abrir un sitio web, las imágenes y los vídeos aparecen en momentos distintos y desplazan otros contenidos mientras se cargan.
Aquí puedes ver CLS en acción:
Una mala puntuación de CLS, especialmente combinada con tiempos de carga prolongados, puede frustrar a los visitantes. Hay pocas cosas más irritantes que hacer clic accidentalmente en un anuncio porque la página se ha desplazado de repente bajo el cursor.
¿Cómo afecta CLS a la experiencia de usuario en un sitio de WordPress?
Los desplazamientos pueden resultar molestos al navegar por una página web. Pueden hacer que el texto salte mientras intentas leerlo, que los botones se muevan cuando vas a hacer clic en ellos y que hagas clic accidentalmente en anuncios o enlaces cuando quieres interactuar con otra cosa.
Si los visitantes tienen que esperar varios segundos a que una página se cargue por completo y enfrentarse a elementos que se desplazan, es posible que simplemente abandonen tu sitio. Esto es especialmente cierto si todas tus páginas se desplazan considerablemente. Es probable que los visitantes abandonen el sitio después de varios clics accidentales o tiempos de espera excesivos, y tus métricas de UX, como el tiempo medio en la página y la duración de las sesiones, disminuirán.
¿Qué afecta a la puntuación de CLS?
Una mala puntuación de CLS se debe a que elementos importantes del sitio hacen que otras partes de la página se desplacen mientras se cargan. Los principales responsables suelen ser las fotos, los vídeos y los anuncios, ya que estos elementos suelen cargarse más despacio que el texto y pueden tener que ajustarse según el tamaño de la pantalla.
Aunque reducir los tiempos de carga puede mejorar tu UX general, en realidad no reducirá la cantidad de desplazamientos, sino que solo mitigará sus efectos.
Estos son cuatro factores que pueden afectar a la puntuación de CLS:
1. Imágenes y vídeos sin atributos de tamaño
Sin atributos de tamaño predefinidos, el contenido visual, como las imágenes y los vídeos, suele cargarse en marcadores de posición más pequeños. Esto significa que el contenido situado alrededor del marcador de posición ocupará inicialmente el espacio que deja libre ese pequeño marcador. Después, cuando llega la imagen, ocupa más espacio y desplaza los elementos cercanos.
Al establecer atributos de tamaño, el marcador de posición ocupa el mismo espacio que el elemento. De este modo, se carga en la misma zona y no afecta a la posición del contenido cercano.
En la siguiente imagen puedes ver algunos de los primeros elementos que se cargan en la página de inicio de GameStop:
Las imágenes se cargan unos segundos después y empujan el encabezado «Los más vendidos» hacia abajo, hasta dejarlo fuera de la vista. Este es un ejemplo claro: el texto, que se carga rápidamente, se desplaza cuando las imágenes, de carga lenta, aparecen sin límites predefinidos.
Este es exactamente el tipo de situación que querrás evitar o minimizar en tu sitio.
2. Anuncios e inserciones sin atributos de tamaño
Si vendes o muestras anuncios en tu sitio web, probablemente estén en formato de imagen o vídeo. Como en el ejemplo anterior, si estos anuncios se cargan sin atributos de tamaño, seguramente lleguen a la página después que el resto del contenido y desplacen los demás elementos.
Esto ocurre especialmente con algunos servicios de terceros que eligen los anuncios por ti. Es posible que estos anuncios no tengan siempre el mismo tamaño ni encajen en el mismo espacio.
Un gráfico pequeño quizá no suponga un problema. Pero si un anuncio de vídeo grande se carga lentamente y ocupa mucho espacio, podría obligar a otros elementos de la página a desplazarse considerablemente.
Optimizar los anuncios y el contenido insertado para que se carguen rápidamente puede reducir las molestias, aunque la puntuación de CLS seguirá viéndose afectada. Los desplazamientos del diseño que hacen que los visitantes hagan clic accidentalmente en los anuncios de tu sitio pueden hacerles sentir engañados y reducir las probabilidades de que regresen.
3. Fuentes personalizadas
Las fuentes personalizadas tienen que alojarse en algún lugar, como tu servidor web, por ejemplo. Es poco probable que veas la fuente Didot sin conexión, a menos que encuentres un libro francés antiguo. Esta fuente ofrece un estilo formal y elegante, y es una opción excelente para restaurantes de alta categoría o sitios web relacionados con antigüedades.
Pero, como esta fuente se obtiene de un lugar distinto del navegador, hay que descargarla cada vez que un visitante accede al sitio. Esta configuración puede impedir que el texto aparezca hasta que se descargue la fuente. Después, la fuente puede aparecer de repente y probablemente desordenar los recursos que ya se hayan cargado en la página.
Otra opción es cargar todo el texto con una fuente más básica, como Serif. Después se sustituirá por Didot cuando se cargue en el navegador. Como las letras de distintas fuentes no suelen ocupar el mismo espacio, el cambio de fuente desplazará el texto y, durante el proceso, empujará o tirará de los elementos cercanos.
Estos desplazamientos aumentarán la puntuación de CLS, así que lo mejor es evitarlos. Por suerte, existen algunas soluciones alternativas que te permiten seguir usando fuentes personalizadas mientras solucionan los retrasos en los tiempos de carga. Más adelante en el artículo analizaremos estos métodos con más detalle.
4. Contenido inyectado dinámicamente
El contenido inyectado dinámicamente es un elemento de una página web que puede cambiar en función de determinados factores. A menudo, estos factores dependen del usuario y permiten ofrecer una experiencia más personalizada.
Por ejemplo, una tienda online puede sugerir productos basándose en el historial de un visitante. Un sitio web meteorológico podría utilizar los datos de ubicación del dispositivo de un usuario para mostrar resultados de esa zona.
El contenido dinámico puede aumentar las conversiones gracias a una experiencia y unas ofertas de productos más relevantes. Sin embargo, su naturaleza reactiva puede consumir muchos recursos y provocar cambios en el diseño.
Como en el ejemplo meteorológico anterior, la distinta información meteorológica, el nombre de la ciudad o incluso el idioma utilizado ocuparán diferentes cantidades de espacio en la página. Una localidad con cielos despejados y un tiempo suave podría ser una entrada mucho más sencilla que una ciudad en la trayectoria de un huracán inminente.
El resultado es que en el primer ejemplo se cargará menos contenido y en el segundo se cargará más, lo que afectará a la forma en que los elementos cercanos se desplazan por la pantalla. Como ocurre con cualquier contenido inyectado dinámicamente que puede variar en tamaño o cantidad, esto afectará al CLS de la página.
Cómo reducir Cumulative Layout Shift en WordPress
Ahora que conoces los principales factores que contribuyen a los cambios de diseño en WordPress, puedes trabajar para reducir su impacto.
Como siempre que realizas cambios fundamentales en tu sitio web, es aconsejable crear una copia de seguridad y utilizar un sitio de pruebas para detectar problemas antes de que se publiquen.
A continuación encontrarás soluciones para reducir el CLS y mejorar la experiencia de usuario de tu sitio.
1. Establece las dimensiones de las imágenes y los vídeos
Al utilizar imágenes y vídeos junto con otros elementos en una página, considera la posibilidad de asignarles atributos de anchura y altura. Estos ajustes reservarán el espacio necesario para los gráficos y evitarán que se desplacen.
Por suerte, establecer las dimensiones es muy fácil en WordPress. Solo tienes que hacer clic en la imagen insertada y ajustar las Dimensiones de la imagen a los valores adecuados:
También puedes utilizar cuadros de relación de aspecto para reservar espacio para elementos visuales con CSS antes de que se carguen. Estos cuadros tendrán el mismo efecto que establecer las dimensiones, ya que reducen los cambios de diseño al reservar de antemano el espacio para las imágenes y los vídeos.
2. Establece las dimensiones de los anuncios y el contenido insertado
Al igual que en el paso anterior, deberías considerar la posibilidad de crear espacio para los anuncios y otros contenidos insertados que puedan provocar cambios en la página. Puedes hacerlo estableciendo las dimensiones de estos elementos o utilizando CSS para reservar espacio.
Cuando los anuncios los rellenan terceros, sus dimensiones pueden ser difíciles de predecir. Por tanto, puedes intentar calcular cuánto espacio debes reservar y delimitarlo para que el resto del contenido no se superponga cuando se cargue el anuncio.
Esta configuración puede generar espacio en blanco adicional alrededor de los anuncios más pequeños. Aun así, normalmente es preferible a que los anuncios grandes (que suelen tardar más en cargarse) desplacen bruscamente otros elementos de la página.
3. Utiliza fuentes de reserva para reducir los cambios de diseño
Antes hablamos de las fuentes personalizadas y de cómo pueden provocar desplazamientos. Una posible solución en este caso es utilizar el atributo «font-display» para que las fuentes de reserva coincidan lo máximo posible.
Los navegadores cargan fuentes de reserva cuando las fuentes personalizadas definidas en tu sitio no están disponibles de inmediato. Por tanto, mientras se carga tu fuente personalizada, se mostrarán las fuentes de reserva que hayas establecido. Si haces que coincidan lo máximo posible, el texto no se desplazará tanto cuando se cargue la opción personalizada.
La aplicación Font Style Matcher puede ser muy útil en este caso. Puedes seleccionar tu fuente personalizada y la fuente de reserva, previsualizarlas una sobre otra y ajustar el estilo según sea necesario. Incluso puedes marcar la casilla situada junto a «Ver el cambio de diseño debido a FOUC» para que te muestre cuánto se desplazará la página mientras se carga la fuente.
4. Establece marcadores de posición para el contenido inyectado dinámicamente
El contenido inyectado dinámicamente puede ser una función útil, pero debes implementarlo estratégicamente para evitar que provoque cambios de diseño. La clave está en reservar espacio suficiente para que quepa la versión más grande del contenido inyectado sin que se desborde ni desplace los elementos cercanos.
Puedes simplificar este proceso haciendo que todo el contenido inyectado tenga el mismo tamaño o sea lo más parecido posible. Esta configuración puede evitar resultados diferentes que requieran distintas cantidades de espacio en la página.
El método concreto para reservar espacio dependerá del contenido y del enfoque utilizado para inyectarlo. Sin embargo, normalmente requiere añadir una posición fija y límites preestablecidos para los recursos que se están cargando.
¿Cómo puedo medir la puntuación de CLS de mi sitio de WordPress?
Dado que CLS es una parte importante de las métricas Core Web Vitals de tu sitio web, la mayoría de los informes sobre la salud del sitio o las herramientas de monitorización lo destacarán. A continuación, encontrarás algunas de las mejores opciones para consultar la puntuación de CLS de tu sitio:
1. PageSpeed Insights
PageSpeed Insights es un recurso sencillo que proporciona un informe sobre Core Web Vitals. Solo tienes que introducir una URL y analizará varios componentes, les asignará una puntuación y ofrecerá consejos para mejorarlos.
PageSpeed Insights puede generar el informe para dispositivos móviles y de escritorio, para que puedas identificar los puntos débiles de tu sitio web para todo tipo de visitantes. También puedes consultar un treemap para obtener un desglose visual detallado de los problemas de rendimiento de tu sitio.
2. Google Search Console
Google Search Console es un generador de informes de Google centrado en el estado de tu sitio en lo que respecta a los resultados de búsqueda. Al igual que con PageSpeed Insights, puedes consultar informes de las versiones para móviles y ordenadores de tu sitio, con métricas como FID, LCP y CLS.
Para utilizar Google Search Console, primero tendrás que verificar la propiedad de tu dominio. Después, el informe señalará los aspectos de bajo rendimiento de tu sitio, lo que te permitirá localizarlos y resolverlos.
3. Lighthouse
Otra herramienta de Google para evaluar la calidad de las páginas es Lighthouse, y cualquiera que utilice Google Chrome puede usarla fácilmente. Supervisa los sitios web en tiempo real para comprobar la accesibilidad, el rendimiento, el SEO y mucho más.
Para encontrar Lighthouse, accede a la configuración de Google Chrome, pasa el cursor sobre Más herramientas y selecciona Herramientas para desarrolladores en la parte inferior.
A continuación, tendrás que ampliar el menú de la parte superior y elegir Lighthouse. Desde ahí, puedes ejecutar el informe de la página que estás viendo.
Solo tienes que seleccionar las opciones que quieras y hacer clic en el botón «Generar informe».
En la parte superior verás puntuaciones codificadas por colores para cada una de las métricas principales. Después, haz clic en cada una y desplázate hacia abajo para ver un análisis detallado y oportunidades de mejora.
¿Cómo puedo optimizar fácilmente mi puntuación de CLS ahora mismo?
Con las herramientas y sugerencias anteriores, puedes identificar los puntos débiles de tus Core Web Vitals, incluido el CLS. Cuando empieces a solucionar algunos de estos problemas, el estado de tu sitio mejorará y podrás aprender a evitar problemas similares en el futuro.
El uso de estas soluciones garantizará que tu puntuación de CLS se mantenga en un buen nivel, lo que mejorará el SEO y la UX de tu sitio. También puedes usar los informes para abordar otras puntuaciones de Web Vitals, como LCP y FID, hasta que todo vuelva a estar en verde.
Otras formas de mejorar Core Web Vitals en WordPress
Con Jetpack Boost, puedes supervisar y mejorar tus Core Web Vitals y otras métricas de rendimiento directamente desde el panel de administración de WordPress.
Analiza tu sitio web y devuelve un informe de rendimiento con áreas de mejora. Pero va más allá de las recomendaciones, ya que ofrece soluciones con un solo clic para problemas habituales que pueden ralentizar tu sitio y perjudicar la experiencia de usuario. Es una de las formas más rápidas y sencillas de mejorar la velocidad de un sitio de WordPress en ordenadores y dispositivos móviles.
Cómo empezar a usar Jetpack Boost
Para empezar, instala Jetpack Boost en WordPress desde la página de Plugins (es gratis).
Una vez activada la herramienta, selecciona Boost desde la pestaña de Jetpack situada en la parte izquierda del panel de administración.
Ahora verás una puntuación de rendimiento de tu sitio en dispositivos móviles y de escritorio.
Más abajo en la página, puedes activar ajustes adicionales de optimización del rendimiento, como generar CSS crítico, aplazar el JavaScript no esencial y activar la carga diferida de imágenes. Cada una de estas configuraciones puede mejorar tus puntuaciones de Core Web Vitals.
Preguntas frecuentes
A continuación encontrarás algunas preguntas frecuentes y respuestas sobre CLS en WordPress que pueden resultarte útiles al empezar.
¿Qué puntuación de CLS es buena?
Cualquier valor inferior a 0,1 se considera una buena puntuación de CLS.
Este número es la diferencia entre la posición original de un elemento durante la carga y su posición final. La puntuación es acumulativa, lo que significa que utiliza varias instancias de distintos elementos.
Las puntuaciones entre 0,1 y 0,25 se consideran aceptables, pero necesitan mejorar. Las puntuaciones superiores a 0,25 son deficientes. Indican que CLS está afectando negativamente a la usabilidad de tu sitio.
¿Qué ocurre si un desplazamiento del diseño es inevitable?
A veces, puede resultar difícil evitar un pequeño desplazamiento del diseño por falta de conocimientos o simplemente por la naturaleza de un elemento de tu página. ¡No te preocupes!
Unos pocos desplazamientos del diseño aquí y allá no deberían afectar significativamente a tu sitio. Al fin y al cabo, CLS es una valoración calculada a partir del conjunto de la página. Aunque tu puntuación no sea exactamente cero, unos pocos casos menores pueden proporcionarte una buena valoración general.
En algunas páginas, puede que simplemente no sea posible solucionar los desplazamientos. De nuevo, una pequeña imperfección en la UX general de tu sitio no debería ser motivo de gran preocupación.
¿Afectan las interacciones de los usuarios a Cumulative Layout Shift?
¡No! Los navegadores calculan CLS y deberían ignorar explícitamente los desplazamientos provocados por el usuario. Exigir una acción del usuario antes de cargar contenido variable puede ser un truco útil para evitar CLS en algunas situaciones.
Por ejemplo, imagina que utilizas contenido inyectado dinámicamente para cargar un mapa de las tiendas cercanas para los visitantes. Si esto sucede automáticamente, el tiempo necesario para obtener los datos de ubicación del usuario y cargar el mapa podría provocar un desplazamiento del diseño. Pero si hay un botón que el usuario debe pulsar para cargar el mapa, esta interacción evitará que los desplazamientos del diseño afecten a la puntuación de CLS de la página.
Mejorar Cumulative Layout Shift en WordPress
Ahora que sabes cómo solucionar Cumulative Layout Shift (CLS) en WordPress y cómo medirlo, puedes mejorar el SEO y la UX de tu sitio web. Reducir los desplazamientos hará que la navegación por tu sitio web sea más agradable para los visitantes y también debería mejorar tu posicionamiento en las páginas de resultados de los motores de búsqueda.
Para minimizar tu puntuación de CLS, recuerda:
- Establece las dimensiones de las imágenes, los vídeos, los anuncios y otros contenidos insertados.
- Reduce los desplazamientos de las fuentes durante la carga.
- Establece marcadores de posición para el contenido inyectado dinámicamente.
Aunque Cumulative Layout Shift es solo un factor que afecta al SEO de tu sitio, también es un aspecto importante de la UX. Un poco de trabajo puede mejorar de forma duradera tu posicionamiento en los resultados de búsqueda y la experiencia de los visitantes cuando lleguen a tu sitio.
Jetpack 