Core Web Vitals: cambio de diseño acumulativo: qué es y cómo mejorarlo para SEO

Con la actualización de Page Experience de Google ahora implementada, los sitios web que están ajustados tienen algunas nuevas oportunidades de clasificación.

En particular, los sitios web pueden calificar para un aumento en la clasificación en función de varias métricas de rendimiento nuevas que Google llama "elementos vitales principales de la web".

Core web vitals es un conjunto de funcionalidades básicas de la página web que impactan en la experiencia del usuario. Ahora juegan un papel en el SEO estratégico y pueden afectar la clasificación de los sitios web en Google.

Google ha definido tres elementos fundamentales de la web:

• Pintura con contenido más grande (LCP)
• Primera demora de entrada (FID)
• Cambio de diseño acumulativo (CLS)

Este artículo es parte de nuestra serie sobre la actualización de la experiencia de la página de Google y lo estoy actualizando para reflejar los cambios más recientes de Google. Aquí discutiré el cambio de diseño acumulativo, o CLS:

• ¿Qué es CLS?
• ¿Cómo se mide CLS?
• ¿Cómo impacta CLS en el SEO?
• ¿Cómo mejoro mi puntaje CLS?

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

CLS mide los cambios de formato en una página web después de la representación inicial en un navegador, generalmente mediante la inserción dinámica de contenido por encima de lo que ya se muestra.

Por lo general, es molesto hacer clic en un enlace y que ese enlace se "mueva", lo que resulta en un clic en una ubicación inesperada. Este tipo de inestabilidad de contenido en una página web crea una mala experiencia de usuario.

Google analiza CLS aquí:

El cambio de diseño acumulativo (CLS) es una métrica importante centrada en el usuario para medir la estabilidad visual porque ayuda a cuantificar la frecuencia con la que los usuarios experimentan cambios de diseño inesperados: un CLS bajo ayuda a garantizar que la página sea atractiva.

Los cambios inesperados en el diseño de la página dañan la experiencia del usuario. Un ejemplo es cuando un botón o enlace cambia en la página web, lo que hace que una persona haga clic en otra cosa. Esto puede ser realmente malo si significa que accidentalmente hicieron una compra, como puedes ver en esta demostración de Google:

Es importante destacar que Google aclara que no todos los cambios de diseño se consideran malos:

Un cambio de diseño solo es malo si el usuario no lo espera. Por otro lado, los cambios de diseño que ocurren en respuesta a las interacciones del usuario (hacer clic en un enlace, presionar un botón, escribir en un cuadro de búsqueda y similares) generalmente están bien, siempre que el cambio ocurra lo suficientemente cerca de la interacción para que la relación sea claro para el usuario.

Los cambios de diseño que ocurren dentro de los 500 milisegundos de la entrada del usuario tendrán el indicador hadRecentInput establecido, por lo que pueden excluirse de los cálculos.

¿Cómo se mide el cambio de diseño acumulativo (CLS)?

CLS se mide por el total de todos los puntajes de cambio de diseño individuales para cada cambio de diseño inesperado que ocurre durante la peor "ventana de sesión" de una vista de página.

Una ventana de sesión es cualquier lapso de 5 segundos de turnos que ocurren mientras un usuario visita una página. Google busca el intervalo de 5 segundos que tiene la mayor cantidad de penalizaciones por turnos y ese es el puntaje para esa página vista.

Para calcular una puntuación de cambio de diseño, Google multiplica la fracción de impacto y la fracción de distancia . Los desglosaré.

La fracción de impacto es la cantidad de área de ventana gráfica que ocupa un elemento inestable entre dos fotogramas.

En el siguiente ejemplo, puede ver que el elemento ocupa el 50 % de la ventana gráfica original, pero luego se mueve hacia abajo un 25 %. Entre ambos fotogramas, el elemento ocupa el 50% más el 25% del viewport, haciendo que la fracción de impacto sea del 75%.

Ejemplo de cambio de diseño entre dos marcos, Google Developers

La fracción de distancia es la distancia que se ha movido un elemento inestable. El siguiente ejemplo muestra que el elemento se ha movido un 25 % de la altura de la ventana gráfica.

Ejemplo de cambio de distancia en la ventana gráfica, Google Developers

Entonces, para resumir: CLS se mide por el puntaje de cambio de diseño, que se calcula de esta manera:

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

Tomando los ejemplos anteriores, el cálculo sería así: 0,75 * 0,25 = 0,1875. Google dice que una página web debe mantener un CLS de menos de 0.1 en todas las páginas o vistas de página en su sitio. Este ejemplo estaría por encima de ese gol, por lo que marcaría mal.

Una ilustración para darle una idea más clara de cómo se califica CLS: si todo lo que está dentro de la ventana gráfica se desplaza fuera de la ventana gráfica en un solo cuadro, tendría una puntuación de diseño de 1,0. (Vea otros ejemplos en GitHub).

Cuantos más elementos tenga en su página que se desplacen en la ventana gráfica, peor será su puntuación.

Objetivo de puntuación CLS de Google

Puede leer más sobre el puntaje de cambio de diseño aquí y cómo Google define sus umbrales aquí.

¿Cómo afecta el cambio de diseño acumulativo (CLS) al SEO?

Al igual que con los otros elementos esenciales de la web, CLS ayuda a garantizar que la experiencia de la página sea fluida para sus visitantes, tanto en dispositivos móviles como de escritorio.

Un buen puntaje de cambio de diseño puede ayudar a garantizar que los usuarios no se sientan frustrados con su página web, no hagan clic accidentalmente y sean redirigidos a otra página, y no realicen una compra por error. Una buena experiencia de usuario lo ayuda a lograr todos los resultados que nos gusta ver en SEO: clasificaciones, tráfico, conversiones e ingresos.

Según la investigación de Screaming Frog, las URL en la posición 1 de los resultados de búsqueda tenían un 10 % más de probabilidades de pasar la evaluación de los datos vitales de la web central que las URL en la posición 9. Por supuesto, estos datos reflejaban las páginas existentes, que podrían no haber sido ajustadas para cumplir con los principales web vitals todavía, antes de que estos factores se aplicaran a los algoritmos de clasificación.

Mirando CLS, menos de la mitad (46%) de las URL móviles y menos de la mitad (47%) de las URL de escritorio tenían puntajes CLS "buenos". La puntuación CLS promedio fue de 0,29 en dispositivos móviles y de 0,25 en computadoras de escritorio. En otras palabras, hay espacio para la mejora de CLS en la mayoría de los sitios .

Screaming Frog segmentó las tasas de aprobación por posición y encontró una disminución en el porcentaje de URL "buenas" a medida que se desplaza hacia abajo en las posiciones de la página de resultados de búsqueda. El siguiente ejemplo son resultados móviles, pero también graficaron los datos para escritorio.

"¿Cuántos sitios pasan la evaluación Core Web Vitals?", screamingfrog.co.uk

¿Cómo mejoro mi puntuación de cambio de diseño acumulativo (CLS)?

Google ofrece herramientas de laboratorio y herramientas de campo para ayudarlo a medir y luego optimizar su puntaje CLS. Para CLS, las herramientas de laboratorio pueden no ser tan útiles como los datos reales capturados en la naturaleza para sus páginas web.

Las herramientas proporcionadas incluyen:

• Informe de experiencia de usuario de Chrome (campo)
• PageSpeed ​​Insights (laboratorio y campo)
• Consola de búsqueda (informe Core Web Vitals) (campo)
• Chrome DevTools (laboratorio)
• Faro (laboratorio)
• Prueba de página web (laboratorio)
• WaterFaller.dev (laboratorio)

Otra forma de medir CLS utiliza la biblioteca JavaScript de web-vitals. Puedes aprender más sobre eso aquí.

Las causas comunes de los cambios de diseño incluyen:

• Imágenes sin dimensiones
• Anuncios, videos y otros objetos incrustados o iframes sin dimensiones
• Contenido inyectado dinámicamente
• CSS de carga tardía donde los estilos se aplican después de que se hayan cargado otros elementos
• Fuentes web que provocan destellos de texto invisible o sin estilo
• Elementos de la página que esperan a que se carguen otros elementos a través de la red antes de aparecer
• Animar elementos por "alto" y "ancho" en lugar de "transformar: escala ()" de CSS
• Animar elementos por "arriba", "derecha", "abajo" o "izquierda" en lugar de "transformar: traducir ()" de CSS

Los principios básicos que mejorarán CLS incluyen:

1. Utilice siempre atributos de tamaño para imágenes, videos y otros elementos incrustados o iframes. Si un elemento se carga dinámicamente, use CSS para diseñar cualquier elemento contenedor con el mismo tamaño o relación de aspecto antes de que se cargue el contenido. Luego, cuando el contenido se cargue en esos elementos contenedores, la página no cambiará.
2. Nunca inserte contenido de forma dinámica sobre el contenido existente.
3. Si usa CSS para animar elementos, prefiera animaciones de "transformación".

Y mira este video sobre CLS de Google Chrome Developers en YouTube:

¿Quieres información más detallada? Mire nuestro seminario web a pedido 3 consejos de expertos para mejorar Core Web Vitals, incluida la sección de preguntas y respuestas extendida al final.

Lea nuestra serie completa de experiencia de página para obtener más información sobre esta actualización de clasificación:

1. ¿Qué es la actualización de la experiencia de la página?
2. Cómo hacer un sitio optimizado para dispositivos móviles
3. Intersticiales intrusivos y por qué son malos para el SEO
4. HTTPS para Usuarios y Ranking
5. Descripción general de Core Web Vitals
6. Core Web Vitals: LCP (pintura con contenido más grande)
7. Core Web Vitals: FID (primer retraso de entrada)
8. Core Web Vitals: CLS (Cambio de diseño acumulativo)