Qué es y cómo medirlo


A todos nos ha pasado: intentamos elegir una opción en un sitio web y, justo antes de hacer clic, la página salta y terminamos haciendo clic en algo que no queríamos. Doh!

Como un juego de “abajo bajo, demasiado lento”, el comportamiento de este sitio web nos hace sentir lentos y frustrados. Afortunadamente, ahora se incentiva a los desarrolladores de sitios web a mejorar la experiencia de su sitio con el lanzamiento de Core Web Vitals de Google; un conjunto de métricas que ayudan a los propietarios de sitios a medir y mejorar la experiencia del usuario de sus páginas web.

El cambio de diseño acumulativo es una de estas métricas clave que mide el “nerviosismo” de un sitio web y cómo se mueve inesperadamente a medida que se cargan los elementos. Echemos un vistazo más de cerca a cómo funciona esta métrica y cómo puede asegurarse de que su propio sitio web siga las mejores prácticas para obtener una clasificación más alta en los motores de búsqueda y brindar a sus usuarios una mejor experiencia.

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

El cambio de diseño acumulativo (o CLS) es una medida de cuánto cambia inesperadamente una página web durante su vida. Por ejemplo, si un visitante del sitio web cargó una página y, mientras la estaba leyendo, se carga un banner y la página salta hacia abajo, eso constituiría una gran puntuación CLS.

Junto con Largest Contentful Paint (la cantidad de tiempo que se tarda en cargar la mayor parte de contenido) y First Input Delay (el tiempo que tarda una página en ser interactiva o en la que se puede hacer clic), CLS es parte de Core Web Vitals de Google. Los rastreadores web de Google miden CLS en cada página que indexan.

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

Los cambios de página ocurren cuando el contenido se carga a diferentes velocidades y hace que el diseño cambie y altere lo que el espectador está mirando. Los anuncios que se cargan lentamente, los videos de tamaño desconocido que aparecen repentinamente o los elementos DOM que se agregan dinámicamente son causas potenciales de CLS.

El siguiente ejemplo muestra lo que sucede cuando se carga un banner publicitario después de que se carga el resto de la página web. El contenido se empuja hacia abajo y la experiencia del usuario se ve afectada negativamente.

Fuente

Puede ser difícil saber si sus usuarios están experimentando CLS, porque no todos los dispositivos o entornos funcionan de la misma manera. Si está cargando su sitio web en un entorno de desarrollo, es posible que tenga elementos almacenados en caché o que se estén cargando localmente. El contenido web personalizado basado en cookies se comportará de manera diferente para cada visitante, especialmente dependiendo de su ubicación. Además, los usuarios de dispositivos móviles pueden tener una experiencia muy diferente: un pequeño cambio en un navegador web puede ser monumental para alguien que ve el sitio en una pantalla pequeña. Realmente, la única forma de comprender la experiencia de sus usuarios es medir CLS, que veremos a continuación.

Deberías leer:   28 de las mejores herramientas de SEO para auditar y monitorear su sitio web en 2022

¿Por qué es importante CLS?

Comprender CLS es fundamental por dos razones: la experiencia de sus visitantes y su clasificación en los motores de búsqueda.

Sus visitantes tienen altas expectativas en lo que respecta al rendimiento de su sitio. En 2020, el 93% de las personas informaron haber abandonado un sitio web porque no se cargaba correctamente.

Los sitios web dinámicos que se cargan en pedazos o con un comportamiento inesperado harán que sus visitantes encuentren otro sitio web para navegar. Y si se quedan, es probable que una puntuación CLS alta cause problemas de usabilidad, como elegir la opción incorrecta, salir demasiado pronto o perder partes de su sitio web por completo.

Este problema solo se ve agravado por la gran cantidad de usuarios de Internet que navegan en sus teléfonos inteligentes. Cuando visualiza su sitio en una pantalla pequeña, cualquier salto y cambio de diseño en el sitio web seguramente tendrá un gran impacto en la experiencia del usuario móvil.

Optimizar su sitio y reducir su cambio de diseño acumulativo es esencial para brindar a los clientes una buena experiencia.

En segundo lugar, Google clasifica los sitios según el rendimiento de su página. Una mejor experiencia de usuario da como resultado una clasificación de búsqueda más alta. Si su página no cumple con los estándares que Google establece en sus pautas de Core Web Vitals, su sitio será penalizado.

Google no quiere dirigir a las personas a sitios que no funcionan bien. La alineación con las mejores prácticas de CLS puede ayudar a que su sitio web suba en la clasificación. Y dado que el 68% de las experiencias en línea comienzan con una búsqueda, asegurarse de que su sitio aparezca en la página de resultados de búsqueda es importante para generar tráfico entrante.

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

La buena noticia es que no tiene que medir CLS usted mismo porque Google hace que sea realmente fácil analizar el rendimiento de su página con su herramienta PageSpeed ​​Insights, o en el navegador Chrome usando Lighthouse Tools.

Deberías leer:   Cómo construir una estructura alámbrica de página de destino

Para analizar el rendimiento en PageSpeed ​​Insights:

  1. Ingrese la URL de un sitio web en la herramienta PageSpeed ​​Insights de Google.
  2. Haga clic en “Analizar”.
  3. Verifique su desempeño. Puede revisar el rendimiento de dispositivos móviles y de escritorio, entre los que puede alternar mediante la navegación de la esquina superior izquierda.

La página analizada a continuación muestra una buena puntuación acumulada de cambio de diseño de 0,001.

ejemplo de pagespeed insightsPara analizar el rendimiento con las herramientas Lighthouse:

  1. Abra el sitio web que desea analizar en Chrome.
  2. Navega a Herramientas para desarrolladores haciendo clic en los tres puntos en la esquina superior derecha de la ventana del navegador, selecciona “Más herramientas” y luego “Herramientas para desarrolladores”.
  3. Cuando se abra la consola, elija “Faro” de las opciones en la parte superior.
  4. Haga clic en “Generar informe”.

La página siguiente muestra un CLS de 0,109, o “necesita mejorar”.

Ejemplo de puntuación CLS Lighthouse proporciona una auditoría detallada de lo que contribuyó a esa puntuación. Para revisar la auditoría, desplácese hacia abajo y seleccione “Mostrar auditorías relevantes para CLS”.

ejemplo de auditoría de faro

Más sobre la fracción de impacto y la fracción de distancia

Dos términos que puede ver al investigar CLS son “fracción de impacto” y “fracción de distancia”. Estas son las dos variables que utiliza Google para calcular CLS.

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

La fracción de impacto se relaciona con el tamaño del elemento inestable en comparación con la ventana gráfica. La fracción de distancia es la cantidad que se mueve el elemento inestable como una proporción de la ventana gráfica.

Entonces, un CLS alto consistiría en un elemento grande que se desplaza una gran distancia. Un CLS pequeño sería el resultado de un elemento pequeño que se mueve solo una pequeña distancia.

CLS es la mayor “ráfaga” o grupo de puntuaciones de cambio de diseño que se producen durante una ventana de sesión. Esencialmente, si ocurren varios cambios dentro de una ventana de cinco segundos, esto se consideraría disruptivo y resultaría en una puntuación CLS alta.

¿Qué es una buena puntuación CLS?

Una buena puntuación de diseño acumulativa es cualquier cosa menor que 0,1. Los informes de las herramientas PageInsights o Lighthouse marcarán automáticamente cualquier puntaje bajo, además de brindar consejos sobre cómo optimizar la página para un mejor rendimiento.

desplazamiento-diseño-acumulativo-1Fuente

Cómo mejorar el cambio de diseño acumulativo

Existen algunas prácticas recomendadas que los propietarios de sitios web pueden seguir para mejorar su puntuación CLS:

Deberías leer:   ¿Qué es el marketing de crecimiento? Una guía para principiantes

1. Utilice un CMS (sistema de gestión de contenido).

Especialmente uno que se integra con Google Lighthouse u otras herramientas de diagnóstico. Esto asegurará que esté diseñando teniendo en cuenta las mejores prácticas y marcará cualquier problema antes de lanzar su sitio.

2. Especifique atributos de tamaño para imágenes y videos.

En lugar de permitirles establecer su propia altura y ancho, dicte los atributos de tamaño para sus medios. Al establecer estos atributos, le indica al navegador cuánto espacio debe reservar, incluso si la imagen aún no está cargada.

3. Comprenda cómo los anuncios pueden influir en su diseño.

Google Publisher Tag ofrece una amplia guía sobre cómo reservar espacio para anuncios.

Cargue contenido nuevo debajo de la ventana gráfica. Cargar contenido por encima de lo que está viendo el usuario a menudo hará que una página se mueva.

4. Utilice transiciones y animaciones para proporcionar contexto en torno a los cambios de página.

Por ejemplo, un enlace “Leer más” que desplaza al usuario hacia abajo en la página no afectaría a CLS porque es un cambio de diseño esperado.

Una nota sobre el cambio de diseño esperado frente a inesperado

CLS solo tiene en cuenta los cambios inesperados. Si el diseño cambia debido a una acción iniciada por el usuario, no hay impacto en CLS. Esta es una herramienta útil para usar cuando no necesita cargar todo a la vez. En su lugar, ofrezca a los usuarios la oportunidad de elegir qué elementos quieren ver a través de enlaces de “leer más” o acordeones de “expandir tema” dentro de su página.

Ofrezca una mejor experiencia de usuario con optimización CLS

Prestar atención a CLS no solo proporciona una mejor experiencia de usuario, sino que también mejora la clasificación de los resultados de búsqueda. Es un ganar-ganar.

Para cumplir con los estándares de Google para CLS, comience por utilizar una herramienta de diagnóstico para medir el rendimiento actual de su sitio web. Tenga en cuenta las pautas básicas descritas anteriormente y tenga en cuenta los cambios de diseño al diseñar su sitio web, especialmente en lo que respecta a las transiciones y las adiciones de contenido. Con estas pocas consideraciones simples, verá mejores resultados en todos los ámbitos.Paquete de inicio de SEO



Versión en Inglés

Esteban Prieto se especializa en temas de Marketing Digital, SEM, SEO, email marketing, transformación digital, Google Ads, Google Search, YouTube, estadisticas y mucho mas.