Core Web Vitals: ¿Qué es el Cumulative Layout Shift?

Con Google incorporando sus métricas de Core Web Vitals como señales para su algoritmo de posicionamiento de búsqueda, la métrica conocida como Cumulative Layout Shift, o "cambio de diseño acumulativo", se está convirtiendo en una parte vital de la optimización de motores de búsqueda (además de cómo ayuda a la experiencia de tus usuarios en tu sitio web).

Pero, ¿qué significa "cambio de diseño acumulativo" (o CLS), qué mide y cómo puedes saber si tu sitio tiene problemas con él?

Explicación del cambio de diseño acumulativo

CLS es, como se señaló anteriormente, una métrica elemental de Core Web Vitals utilizada por Google para medir la facilidad de uso de una página. El cambio de diseño acumulativo, especí­ficamente, mide cuánto se mueve el contenido de una página a medida que se carga.

¿Alguna vez hiciste clic en un enlace, comenzaste a leer un artí­culo en la página de destino y, de repente, el texto se movió, requiriendo que te desplazaras hacia arriba o hacia abajo o perdiendo el lugar donde estabas leyendo?

O tal vez estabas a punto de hacer clic en un botón en una página cuando un video se carga repentinamente en su lugar, lo que hace que accidentalmente presiones "play".

Lo que has experimentado es lo que queremos decir cuando nos referimos a "cambio de diseño".

En palabras de Google, el cambio de diseño acumulativo mide "la suma total de todas las puntuaciones de cambio de diseño individuales para cada cambio de diseño inesperado que se produce durante toda la vida útil de la página".

 Se produce un cambio de diseño cada vez que un elemento visible cambia su posición de un fotograma renderizado al siguiente.

En la siguiente ilustración, la página representada a la izquierda carga dos bloques de contenido primero y luego se carga un tercer bloque de contenido, empujando el primer contenido hacia abajo en la página.

Este es un cambio de diseño.

El siguiente clip muestra un cambio de diseño en acción y destaca por qué es un problema para la usabilidad de un sitio web:

   Your browser does not support the video tag.

Cualquiera que haya experimentado esta situación en la web sabe lo tremendamente molesto que puede ser.

¿Por qué Google se preocupa por el CLS?

Google, obviamente, ve el cambio de diseño acumulativo como algo que es lo suficientemente importante como para usarlo como una señal de posicionamiento para su algoritmo de búsqueda. Pero, ¿por qué a Google le importarí­a algo como esto?

Como señalamos en nuestro resumen de la evolución de Google hacia Core Web Vitals, el objetivo final de Google es proporcionar a sus usuarios la mejor experiencia en lí­nea posible al utilizar su motor de búsqueda. Hacer que Google sea rápido, preciso y fácil de usar es una gran parte de eso, pero también lo es asegurarse de que las páginas que recomienda también sean "agradables" de usar.

Y pocas cosas matan el "deleite" de un usuario web como un cambio de diseño.

Cómo se mide el cambio de diseño acumulativo

Google mide un cambio de diseño cada vez que un elemento que está visible en la ventana gráfica (que significa visible en la pantalla del usuario) cambia su posición en la pantalla entre dos marcos a medida que se carga la página. Entonces, si una imagen se mueve del lado izquierdo al lado derecho de la pantalla, o un botón se mueve dos o tres lí­neas hacia abajo en la página, Google registra un cambio.

Ten en cuenta que algo solo se considera un cambio de diseño si es un elemento que se mueve desde su posición inicial original. Cargar elementos nuevos o cambiar el tamaño de los elementos existentes no se medirá necesariamente como un cambio de diseño a menos que provoquen que algo más en la página se mueva para adaptarse a ese cambio.

Como métrica de Core Web Vitals, el cambio de diseño acumulativo te indica la frecuencia con la que los usuarios de la vida real experimentan este problema.

Puntuación de CLS

Google evalúa las páginas en función de sus puntuaciones CLS. Este número se crea asignando una puntuación para cada cambio de diseño inesperado (más sobre ese "inesperado" más adelante...) y sumándolos todos juntos. De ahí­ la parte "acumulativa" de CLS.

Los cambios de diseño se puntúan determinando cuánto cambia un elemento en la forma en que se carga la página.

Las puntuaciones de cambio de diseño se calculan de acuerdo con la fórmula siguiente:

 fracción de impacto * fracción de distancia = puntuación de cambio de diseño

Esta fórmula se define como:

• Fracción de impacto: La medida de cuánto espacio ocupa un cambio de diseño en la pantalla del usuario. Se calcula midiendo qué porcentaje del espacio de la ventana gráfica ocupa un elemento cuando se carga por primera vez y luego combinándolo con qué tan lejos se mueve (nuevamente medido como un porcentaje del espacio de la ventana gráfica). En el siguiente diagrama, el elemento de texto ocupa el 50% de la ventana gráfica y se carga en la parte superior de la pantalla. Luego, en el siguiente cuadro, la página carga una imagen que ocupa el 25% de la ventana gráfica, lo que hace que el primer elemento de texto se desplace hacia abajo.

Dado que el texto ocupa el 50% de la ventana gráfica y el espacio que movió ocupa el 25% de la ventana gráfica, su impacto es del 75%, lo que hace que su fracción de impacto sea "0,75". Este número es una forma de expresar cuánto afecta un cambio de diseño a una página.

• Fracción de distancia: La medida de cuánto un cambio de diseño hace que se mueva un elemento previamente cargado, en relación con la dimensión más grande de la ventana gráfica. En el ejemplo anterior, la dimensión más grande del teléfono es la altura y el elemento de texto bajó un 25% de la altura de la pantalla. Esto hace que su fracción de distancia sea "0.25". La fracción de distancia es importante para esta ecuación porque evita que Google penalice los elementos de página grandes que se mueven solo una pequeña cantidad en relación con la pantalla.

Tomando este ejemplo, podemos calcular el puntaje de este cambio de diseño agregando las dos fracciones en la ecuación fracción de impacto * fracción de distancia = puntaje de cambio de diseño, que se verí­a así­:

 0.75 * 0.25 = 0.188

Google realizará esta ecuación cada vez que detecte un elemento previamente cargado que se mueve de un fotograma al siguiente mientras carga la página. El puntaje de cambio de diseño acumulativo de la página se calcula sumando todos los puntajes de cambio de diseño individuales juntos.

Causas del cambio de diseño acumulativo

Los CLS pueden colarse en el código de una página de varias formas durante la fase de desarrollo.

Incrustaciones sin dimensiones

Cuando agregas cosas como imágenes, videos o iframes a una página, debes especificar las dimensiones de alto y ancho en el código HTML de la página. Cuando declaras las dimensiones de una imagen, el navegador sabe exactamente cuánto espacio necesitará asignar para esa imagen para que pueda cargar correctamente la página.

Si no declaras las dimensiones de una imagen en el código HTML, el navegador no sabrá cuánto espacio necesitará hasta que comience a cargar esa imagen. Esto provocará cambios en el diseño porque el navegador tendrá que mover cosas para dejar espacio para la imagen.

Si tu sitio usa imágenes responsivas, asegúrtea de que cada versión para cada tamaño de ventana gráfica use la misma relación de aspecto.

Cómo resolver o evitar embeds sin dimensiones

Cuando agregas una imagen, video o marco a una página, asegúrate de especificar las dimensiones en el HTML. Incluso puedes especificar el ancho y confiar en que el navegador establecerá la altura por sí­ solo.

Anuncios dinámicos

La publicación de anuncios es una buena forma de monetizar tu sitio web una vez que comiences a atraer tráfico. Sin embargo, los anuncios pueden causar problemas de CLS cuando usas anuncios dinámicos en tu sitio.

Los anuncios dinámicos son anuncios que cambian según quién visita tu sitio y qué dispositivo está usando. Estos anuncios son populares porque son rápidos y fáciles de instalar. Sin embargo, quitan cierto control sobre lo que se carga en la página.

Dependiendo del usuario en particular que visite tu página, los anuncios que ven podrí­an cambiar de forma o tamaño o no cargarse por completo. Y dado que los anuncios dinámicos no tienen dimensiones especificadas en el HTML, los navegadores no saben cuánto espacio reservar para ellos al renderizar la página.

Cómo solucionar o evitar anuncios dinámicos

Utiliza cuadros de relación de aspecto CSS para reservar espacio en la página para tus anuncios. Esto le dirá a los navegadores cuánto espacio asignar para varios elementos al representar el contenido de la página. Ten en cuenta que si haces esto, podrí­as terminar con un espacio en blanco adicional cuando los anuncios más pequeños se carguen en cuadros más grandes. Sin embargo, esto no afectará la puntuación CLS de una página.

También debes asegurarte de especificar una imagen predeterminada o alternativa para cargar en caso de que falle el anuncio real. Hacerlo evitará problemas de CLS que ocurren cuando el navegador del usuario intenta mostrar una imagen que no existe.

Contenido inyectado dinámicamente

El contenido inyectado dinámicamente se refiere a contenido incrustado, como videos de YouTube, tweets, comentarios de foros o algún otro widget. Nuevamente, estos causan problemas porque a menudo se cargan dentro del contenido principal de la página, lo que hace que el texto, las imágenes, los enlaces y los botones se muevan hacia arriba o hacia abajo en la página.

Cómo resolver o evitar contenido inyectado dinámicamente

No coloques contenido dinámico sobre el contenido existente en una página. Particularmente en el contenido que aparece en la mitad superior de la página.

Si tienes que usar contenido dinámico por encima del contenido existente, reserva espacio para él o haz que se cargue en respuesta a una acción del usuario.

Fuentes personalizadas

Si bien es bastante obvio que los anuncios, las imágenes, los videos y el contenido dinámico pueden causar problemas de CLS, las fuentes que usas en yu sitio también podrí­an ser la causa de los cambios de diseño.

Generalmente hay dos tipos de fuentes. Hay fuentes seguras para la web que cualquier navegador sabe leer y cargar, y luego están las fuentes personalizadas.

Cuando usas una fuente personalizada, el navegador de un usuario precargará el texto de la página usando una fuente que conoce mientras descarga la fuente real. O mostrará el texto en una fuente invisible.

De cualquier manera, una vez que el navegador descargue la fuente personalizada, volverá a cargar el texto usando esa fuente. Esto hará que el texto aparezca y desaparezca (llamado "destello de texto sin estilo") o que aparezca repentinamente de la nada (llamado "destello de texto invisible"). Estos destellos son momentáneos, de ahí­ el término "destello", pero pueden causar cambios de diseño cuando cambian los tamaños de fuente.

Cómo resolver o evitar fuentes personalizadas

Puedes evitar este problema por completo con solo utilizar fuentes seguras para la web. Sin embargo, si realmente deseas utilizar una fuente personalizada, agrega el valor rel="preload" a la etiqueta con el enlace de descarga de la fuente.

Sin embargo, esta solución solo funcionará para los visitantes del sitio web que utilicen Chrome 83.

La puntuación de CLS ideal

Google ve las puntuaciones de CLS en un espectro de "bueno" a "necesita mejorar" a "deficiente". Definen una puntuación CLS "buena" como 0,1 o menos, mientras que una puntuación de 0,25 o superior se considera "mala" y debe corregirse lo antes posible.

Prueba y seguimiento de CLS

Google divide las herramientas para probar y rastrear los puntajes de CLS en dos categorí­as:

• Herramientas de laboratorio: "de laboratorio" se refiere al uso de software para simular que un usuario de la vida real visita una página y luego mide y calcula la puntuación CLS. La prueba de laboratorio de una página es absolutamente vital antes de publicarla en vivo para que no termines entregando una página a un usuario con una mala experiencia. Las herramientas de laboratorio incluyen Chrome Dev Tools, Google Lighthouse y WebPageTest.
• Herramientas de campo: Si bien las pruebas de laboratorio son cruciales, no necesariamente detectarán todos los problemas potenciales porque cada usuario individual experimentará una página de manera diferente según una variedad de factores. Por lo tanto, también debes realizar un seguimiento de lo que sucede cuando los usuarios reales cargan una página. Esto es lo que entendemos por "prueba de campo". Las herramientas de prueba de campo incluyen informes de experiencia de usuario de Chrome, PageSpeed "‹"‹Insights y la sección Core Web Vitals de Google Search Console.

Comprender CLS es clave para el éxito

En esta guí­a de cambio de diseño acumulativo nos adentramos mucho en detalles esenciales. Y está muy bien conocer los detalles de qué es CLS, cómo funciona y por qué es importante.

Sin embargo, la verdadera conclusión deberí­a ser comprender el concepto central más allá de CLS: es una forma de cuantificar la estabilidad visual de una página y es una parte importante para comprender la experiencia de los usuarios reales que visitan esa página en lí­nea.