Llegamos a la tercera métrica establecida en el Core Web Vitals de Google, para así dar prioridad dentro de su algoritmo. Cumulative Layout Shift (CLS) es la medida que se usa para indicar los cambios en el diseño al cargar una página. En este post te explicamos el concepto, los posibles problemas que se pueden presentar, sus soluciones y cómo optimizar el CLS de tu web.
Hablar de Cumulative Layout Shift o de CLS es referirse a los cambios de diseños que se pueden producir en un sitio web. Esto quiere decir, elementos visuales que van cambiando de posición a medida que carga la página web y mientras el usuario navega en ella.
En otras palabras, el CLS es una métrica que se usa para medir la estabilidad visual del sitio web. Para ello toma en cuenta la magnitud y la frecuencia en las cuales se dan los cambios visuales dentro de la página.
El cambio de posición de estos elementos ocurre de manera asincrónica en la mayoría de los casos, es decir, en cualquier momento. Un ejemplo de ello es cuando vas a pinchar un botón de tu interés y justo en ese instante carga un banner que tapa el botón que quieres pinchar.
Es una situación incómoda que desfavorece la experiencia del usuario, un aspecto muy tomado en cuenta por el algoritmo de Google para el posicionamiento SEO. Esto hace que sea la tercera métrica tomada en cuenta en el Core Web Vitals.
En conclusión, el Cumulative Layout Shift es la forma de medir cuándo es que aparecen nuevos elementos, cuál es la posición de ellos y que no perjudiquen el diseño de la web. No hay dudas de qué es algo estrechamente relacionado con la experiencia del usuario.
Las causas de un diseño acumulativo tienen su origen en el código de programación de la página web. Con esto queremos decir que es un tema al que hay que prestarle mucha atención durante la fase de desarrollo.
A continuación te mostramos los posibles problemas que se pueden presentar y su solución más viable:
Cuando se incorporan vídeos o imágenes en un sitio web se deben decir cuáles serán sus dimensiones en el código de HTML. Al especificar el ancho y alto del elemento visual el navegador sabe cuál será su espacio exacto y lo carga de manera correcta.
Si el navegador no conoce las dimensiones no sabrá cuánto espacio darle hasta el momento en qué se cargue la imagen. Esta es una situación que causa modificaciones en el diseño.
Así que si tu sitio web es responsive debes asegurarte de incluir en su código las dimensiones de las imágenes para cada tamaño de pantalla. Puedes agregar el tamaño del ancho nada más y el navegador colocará el tamaño del alto.
Los anuncios son una excelente estrategia para monetizar un sitio web y aumentar su tráfico. El problema se presenta cuando se usan los anuncios dinámicos que pueden afectar el CLS.
Primero vamos a aclarar que los anuncios dinámicos son aquellos que cambian dependiendo del dispositivo que ese el usuario o de quien es que visita el sitio. Son muy populares por lo fácil de su instalación y su rapidez. No obstante, no se puede controlar lo que se carga en la página.
Cada anuncio de este tipo cambia de tamaño por completo o simplemente no carga. Al no tener dimensiones específicas dentro del código HTML, los navegadores no saben cuánto espacio le pueden dar.
Una manera de solucionar este problema es con la utilización de cuadros de relación de aspecto CSS para guardar el espacio que ocuparan los anuncios. De esta forma los navegadores sabrán cuánto espacio darle.
Vale destacar, que si el anuncio es pequeño y el espacio muy grande quedará un vacío. Pero no te preocupes, eso no afecta el CLS de tu web.
Hablar de contenido inyectado dinámicamente es referirse a ese contenido que se incrusta desde otras plataformas. Aquí encontramos vídeos de YouTube, mensajes de Twitter, comentarios de foros o cualquier otro widget.
Los problemas que se presentan en este caso son porque se pueden cargar dentro del contenido principal del sitio web. De ocurrir esto, los elementos como botones, enlaces, textos o imágenes hacia arriba o abajo se desplazan de forma inadecuada.
La recomendación es no usar contenido dinámico sobre un contenido ya existente, en especial en la parte superior de la página. De tener que usarlo, determina cuál será su espacio o que cargue después de alguna acción del usuario.
Los tipos de fuentes usadas pueden causar problemas en el diseño de un sitio web. Por lo general hay dos tipos, las seguras que son las que tu navegador siempre podrá leer y las personalizadas.
Al usar una fuente personalizada el navegador cargará primero con las fuentes que conoce, mientras busca cuál es la fuente real. También puede ocurrir que se muestre una fuente invisible.
Cuando el navegador logra descargar la fuente personalizada, carga de nuevo la página con dicha fuente. Esto causa un destello, porque el texto aparece y desaparece o se pone invisible en un momento. Por lo tanto, se trata de cambios en el diseño.
La mejor manera de evitar este problema es usando fuentes seguras en tu sitio web. De tener que usar la fuente personalizada podrías usar el código rel=”preload” a la etiqueta con el enlace de la descarga. No obstante, esto sólo funcionará en el navegador Chrome 83.
Dentro del mercado en internet existen herramientas para medir el Cumulative Layout Shift de tu sitio web. Estas herramientas tienen dos clasificaciones, las cuales dependen del momento en el cual son usadas, estas son:
Son las que se usan simulando a los usuarios, por eso su nombre “de laboratorio”. Al simular la visita de un usuario real a la página se hace la medición y calcula la puntuación de CLS.
Este tipo de pruebas son fundamentales antes de publicar un sitio web y así garantizar una buena experiencia a tus usuarios. Entre las herramientas de laboratorio más comunes están las siguientes:
Chrome Dev Tools.
Google Lighthouse.
WebPageTest.
A pesar de realizar con anterioridad las pruebas de laboratorio, puede que queden problemas porque la condición de navegación de cada usuario es diferente. Esto hace necesario el seguimiento del comportamiento del diseño de tu sitio web con los usuarios reales.
Es aquí cuando es preciso usar las herramientas de campo, es la forma que tenemos para conocer las métricas del CLS con los usuarios reales. Dichas métricas se pueden obtener de la siguiente manera:
Informes de experiencia de usuario de Chrome.
PageSpeed Insights.
La sección de Core Web Vitals de Google Search Console.
Lo primero que debemos saber es de dónde sale la puntuación del CLS, y te decimos que cada vez que surge un cambio en el diseño se otorga un puntaje. Con esto queremos decir que a mayor puntaje hay un mayor movimiento de elementos visuales en la web. Al terminar la carga se suman todos y se determina la métrica de CLS.
Al conocer cómo se mide podemos decir que el CLS ideal es igual a 0. Se ha llegado al consenso de que hasta 0,1 es un CLS bueno, entre 0,1 y 0,25 necesita mejorar y mayor a 0,25 es malo.
De tener un puntaje de CLS muy alto es necesario revisar el depurador de CLS de Google Web Vitals. Allí te mostrarán un GIF con todos los elementos visuales que se mueven al cargar tu página web.
Como ya hemos revisado en este post, las posibles causas de un alto puntaje de CLS están en los archivos multimedia y los anuncios. También influyen las fuentes usadas, las animaciones y los Iframes.
En este sentido, es sumamente necesario revisar cada uno de los elementos visuales mencionados en el párrafo anterior para optimizar el CLS de tu web. Tener la certeza de contar con un CLS respetable, menor a 0,25, es tan importante como un SEO sólido y un contenido de valor.
En definitiva, hay que tener presente que el algoritmo de Google tiene una alta preferencia por los sitios web que ofrecen una mejor experiencia de usuario. Esto hace que su optimización sea tan necesaria.
Al llegar hasta aquí esperamos que el puntaje de Cumulative Layout Shift de tu sitio web baje hasta llegar a lo más cercano a cero. Se trata de cuidar los detalles que puedan perjudicar el diseño cuando un usuario carga una página web. Al lograrlo podrás mejorar tu posicionamiento dentro de los motores de búsqueda.
Nathaly Barazarte
Comunicadora Social
Este artículo puede contener enlaces de afiliados. El autor podrá ganar un porcentaje de comisión por cada venta realizada. Lea aquí para más información.
This article may contain affiliate links. The author may earn a percentage of commission for each sale made. Read this for more information.
Conoce cómo optimizar el SEO en búsquedas por voz
Atraer clientes es fundamental en cualquier estrategia y el principal objetivo del Inbound Marketing. Para lograrlo es preciso conocer muy bien a tus usuarios para darle el contenido que necesitan.
¿Quieres saber quién es mejor entre el SEO vs SEM? Entonces necesitas leer el presente artículo para que tengas criterios al momento de elegir la estrategia a usar.
Conoce qué es Google EAT y cómo influye en el SEO de tu sitio web.