Cambio de diseño acumulativo: mejora la puntuación CLS de Google

¿Alguna vez ha estado en una situación en la que el botón de pago desaparece cuando intenta realizar un pedido?

¡Sí! Es frustrante.

La verdad es que sucede con demasiada frecuencia y con demasiados de nosotros.

Afortunadamente, como siempre, Google prioriza la experiencia del usuario por encima de todo.

Es por eso que lanzará tres nuevas métricas de rendimiento como parte de sus principales indicadores web, a partir de 2021.

Core Web Vitals está diseñado para medir la velocidad de carga, la interactividad y la estabilidad visual de una página.

Tres métricas representan esto:

1. Pintura con contenido más grande (LCP)

2. Primera demora de entrada (FIP)

3. Cambio de diseño acumulativo (CLS)

Entendamos CLS tanto desde el punto de vista del usuario como del webmaster (SEO).

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

El cambio de diseño acumulativo (CLS) representa la estabilidad visual de un sitio web.

Mide la cantidad de cambios de diseño insignificantes en una página.

Los cambios de diseño inesperados son el resultado de una página web que se mueve sin intervención del usuario.

Google CLS es una especie de indicador (Señal) para que pueda solucionar el problema al medir la frecuencia con la que un movimiento inesperado de los elementos de la página afecta la experiencia del usuario.

Un cambio en un diseño puede ocurrir en cualquier momento cuando un elemento visible cambia su posición de un cuadro renderizado al siguiente.

Tratemos de entender el significado común y definir en palabras simples "Cambio de diseño acumulativo":

Acumulativo es un aumento en la cantidad.

El diseño es el marco.

Un cambio es un cambio de posición.

En pocas palabras, el cambio de diseño acumulativo es una suma total de todos los cambios de marco individuales en las posiciones de diseño del sitio web.

Imagen procedente de web.dev

La puntuación CLS estándar debe ser inferior a 0,1.

Un buen umbral para medir lo mismo es el percentil 75 de cargas de página en dispositivos móviles y de escritorio.

En la imagen de arriba, está claro que según Google:

1. Si la puntuación CLS es inferior a 0,1, es una buena señal. Significa que su sitio no tiene problemas con ningún cambio de diseño.

2. Si la puntuación CLS está entre 0,1 y 0,25, significa que su sitio necesita ciertas mejoras en los diseños visuales.

3. Si la puntuación CLS es superior a 0,25, es una señal deficiente, lo que también significa que el movimiento del elemento visual se produce con mucha frecuencia.

¿Cómo se calcula el cambio de diseño acumulativo?

Google calcula el CLS de una página calculando la fracción de impacto y la fracción de distancia para cada cambio de diseño inesperado.

Fracción de impacto de CLS

Mide la cantidad de espacio que ocupa un elemento inestable en un área de ventana gráfica entre dos fotogramas.

Fórmula para calcular la Fracción de Impacto para CLS

Para calcular el puntaje de cambio de diseño, necesitamos la fracción de impacto.

¿Cómo calcular la fracción de impacto para CLS?

La representación gráfica lo ayudará a comprender mejor las fracciones de impacto.

 Fracción de impacto = [Área de la región de impacto] / [Área de la ventana] Fracción de impacto = [330 x 490] / [375 x 667] Fracción de impacto = [161700] / [250125] Fracción de impacto = 0,645

Distancia Fracción de CLS

Es la medida de la cantidad de espacio que el elemento de la página se ha movido desde la posición original hasta la posición final que básicamente cambia en el diseño.

Para evitar casos de penalización excesiva, cambie los elementos grandes por una pequeña cantidad tenida en cuenta mediante la introducción de Fracción de distancia.

Fórmula para calcular la Fracción de Distancia para CLS

¿Cómo calcular la fracción de distancia para CLS?

La representación gráfica lo ayudará a comprender mejor la fracción de distancia.

Fracción de distancia = [Máx. Mover distancia] / [Altura de ViewPort] Fracción de distancia = [120] / [667] Fracción de distancia = 0,179

Fórmula para calcular la puntuación CLS de Google

El puntaje acumulativo del diseño se calcula multiplicando la fracción de impacto por la fracción de distancia:

 Cambio de diseño acumulativo (CLS) = Fracción de impacto x Fracción de distancia

CLS = 0,645 x 0,179 CLS = 0,1154 .

La puntuación CLS sigue aumentando a medida que aumenta el impacto y la fracción de distancia.

Cambio de diseño acumulativo con un ejemplo simple.

Visitó un sitio y vio algo interesante para leer.

Adelante, haga clic en el enlace.

Pero justo cuando estaba a punto de hacer clic en el enlace, se desplaza media pulgada hacia abajo en la página web y termina haciendo clic en un anuncio que se colocó justo encima.

Fuente:nitropack.io

Suena injusto, ¿verdad?

Es un cambio de diseño inesperado.

Solo significa que será redirigido a una página de destino no deseada desde donde tendrá que volver a la página web original.

También tenemos algo conocido como el cambio de diseño esperado.

Ocurre cuando hace clic en algo en una página web y cambia el diseño actual de la página.

Por ejemplo, vas a un blog en busca de una información en particular.

Tan pronto como ingrese el nombre del tema en la barra de búsqueda, recuperará una publicación de blog en particular donde encontrará la información requerida o aparecerá un par de publicaciones de blog relacionadas con el tema.

Fuente: nitropack.io

Este es un resultado esperado de la página web y puede considerarse un cambio de diseño esperado.

¿Qué causa los problemas de CLS?

Según Google, el gigante de los motores de búsqueda, hay 5 posibles razones para el cambio de diseño acumulativo :

Imágenes y Videos sin dimensiones

Es recomendable especificar siempre el ancho y el alto de tus imágenes y videos.

También puede utilizar cuadros de relación de aspecto CSS para permitir que el navegador asigne la cantidad correcta de espacio en la página web mientras se carga la imagen.

Anuncios, incrustaciones e iframes sin dimensiones

Los tamaños de los anuncios pueden aumentar los ingresos a través de un alto CTR.

Sin embargo, esto puede comprometer la calidad de la experiencia del usuario al empujar el contenido hacia abajo en la página.

Este cambio de diseño se puede mitigar reservando espacio para los espacios publicitarios, eliminando los cambios reservando el tamaño más grande posible para el espacio publicitario o eligiendo el mejor tamaño posible del espacio publicitario en función de los datos históricos.

Contenido inyectado dinámicamente

Evite insertar cualquier contenido nuevo sobre el contenido existente, a menos que sea en respuesta a la interacción del usuario.

Esto asegurará que cualquier cambio de diseño que ocurra siempre sea esperado en lugar de provocar que la imagen o el texto se muevan inesperadamente.

Fuentes web que causan FOIT/FOUT

Intente usar font:display valores con sus fuentes personalizadas como auto, swap, block, fallback y opcional, para evitar cambios de diseño innecesarios.

Para asegurarse de que no haya un cambio de diseño, use font:display junto con el enlace rel=preload.

Cualquier elemento que use esa fuente se ocultará hasta que el activo de la fuente se haya descargado por completo, se conoce como FOIT (Flash de texto invisible).

Una fuente de animación: malthemilthers.com

La visualización de una fuente alternativa en la pila de fuentes hasta que se carga la personalizada se conoce como FOUT (Flash de texto sin estilo).

Acciones que esperan una respuesta de la red antes de actualizar DOM

Elija siempre animaciones de "transformación" para animaciones de propiedades que desencadenan cambios de diseño.

¿Cómo se influye en la puntuación CLS de Google a través de los anuncios?

Para lidiar con los anuncios que causan CLS, debe diseñar el elemento donde se mostrará el anuncio.

Por lo tanto, si diseña div, la división de imagen o video en WordPress o cualquier elemento de un sitio web con una medida específica de alto y ancho, su anuncio se limitará únicamente a las dimensiones mencionadas.

Si un elemento que contiene un anuncio no muestra el anuncio, puede configurarlo de manera que un anuncio de banner alternativo o una imagen de marcador de posición puedan llenar el espacio vacío.

De manera alternativa, un anuncio puede llenar toda la fila en la parte superior de una columna en el espacio intermedio derecho o izquierdo de la página para ciertos diseños.

Si la página no aparece, no habrá un cambio y no habrá ninguna diferencia en dispositivos móviles o de escritorio.

Sin embargo, debe tener en cuenta que depende del diseño del tema y tendrá que probarlo si hay algún problema con el inventario de anuncios.

¿Cómo puede deslizarse CLS durante el desarrollo web?

Google CLS puede deslizarse a través de la etapa de desarrollo.

Esto es lo que puede suceder.

Muchos de los activos necesarios para representar una página web se cargan en la memoria caché de un navegador.

La próxima vez que un desarrollador visite la página en desarrollo, no notará ningún cambio en el diseño, ya que los elementos de la página ya están descargados.

Por lo tanto, se recomienda tener una medición en el campo o en el laboratorio.

Prueba de cambio de diseño acumulativo

Las métricas acumulativas del rendimiento del cambio de diseño del sitio web se pueden medir de cualquiera de las siguientes maneras:

Herramientas de campo

En el campo: en usuarios reales que realmente interactúan con la página. Se puede medir utilizando las siguientes herramientas de campo:

Informe de experiencia de usuario de Chrome

Proporciona métricas de la experiencia del usuario sobre cómo los usuarios de Chrome del mundo real experimentan destinos populares en la web.

Perspectivas de PageSpeed

Esta herramienta analiza el contenido de una página web y genera sugerencias para que esa página sea más rápida que antes.

Consola de búsqueda (informe Core Web Vitals)

Search Console muestra el rendimiento de sus páginas según los datos de uso del mundo real (a veces llamados datos de campo).

Herramientas de laboratorio

En el laboratorio: el uso de herramientas para simular la carga de una página en un entorno controlado se puede medir con las siguientes herramientas de laboratorio:

Herramientas para desarrolladores de Chrome

Chrome DevTools puede ayudarlo a editar páginas sobre la marcha y diagnosticar problemas rápidamente, lo que en última instancia le permite crear mejores sitios web más rápido.

Faro

LightHouse es una herramienta automatizada de código abierto para mejorar la calidad de las páginas web.

Puede ejecutarlo en cualquier página web, pública o que requiera autenticación.

Tiene auditorías de rendimiento, accesibilidad, aplicaciones web progresivas, SEO y más.

Prueba de página web

Ejecute una prueba gratuita de velocidad de sitios web de todo el mundo utilizando navegadores reales a velocidades de conexión de consumidores con recomendaciones de optimización detalladas.

Según web.dev ; Precaución: las herramientas de laboratorio normalmente cargan páginas en un entorno sintético y solo miden los cambios de diseño durante la carga de la página.

Como resultado, los valores de CLS informados por las herramientas de laboratorio para una página determinada pueden ser menores que los que experimentan los usuarios reales en el campo.

Herramientas rápidas para verificar el cambio de diseño acumulativo

1. CLS en formato GIF de Defaced Tool de Chris Johnson para identificar el LS problemático.

2. Calculadora de cambio de diseño acumulativo

Error en los cálculos de CLS

Google recibió comentarios acerca de que la métrica CLS era inadecuada para medir las páginas web que están abiertas durante mucho tiempo, penalizándolas con puntajes más bajos.

Google revisó tres soluciones para actualizar la forma en que puntuó CLS, por lo que no hay que preocuparse de que las puntuaciones de CLS empeoren debido a este cambio.

Ventanas de sesión para medir CLS

Google optó por un enfoque de ventana de sesión para medir CLS.

La medida de los elementos de la página se mide en ventanas de sesión, que corresponden a diferentes partes de una página web a las que accede un usuario a medida que se desplaza hacia abajo en la página web.

Las puntuaciones totales para cada ventana de sesión son el cambio de diseño acumulativo, el cambio total de la página completa.

El 3% de las páginas web con desplazamiento infinito o que tienen controladores de interfaz de usuario que reaccionan lentamente a la interacción del usuario verán que sus puntajes aumentan a una buena calificación.

La actualización hace que las puntuaciones de CLS sean más precisas

Es un beneficio para los editores con el nuevo sistema de puntuación cada vez más justo, especialmente para las páginas web que están abiertas durante mucho tiempo o emplean un desplazamiento infinito y que reciben una puntuación injusta debido a eso.

Con las métricas de Core Web Vitals a punto de convertirse en un factor de clasificación en mayo de 2021, es un cambio importante para hacer en el último minuto.

Conclusión

Comprender el cambio de diseño acumulativo (CLS) lo ayudará a ofrecer una mejor experiencia de usuario en los próximos días.

Dado que la métrica es parte de Core Web Vitals para mejorar UX y está programada para convertirse en una señal de clasificación en 2021, es importante comprender su importancia e impacto en su sitio.