Qué es y cómo medirlo

Hola el tema que tocamos hoy es Qué es y cómo medirlo

A todos nos ha pasado: tratamos de 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. ¡Do!

Como un juego de “abajo, demasiado lento”, el comportamiento de este sitio web nos hace sentir lentos y frustrados. Afortunadamente, los desarrolladores de sitios web ahora tienen incentivos para mejorar su experiencia en el 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 «salto» 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 puntuación CLS alta.

Junto con la pintura de contenido más grande (la cantidad de tiempo que se tarda en cargar la mayor parte del contenido) y el retraso de la primera entrada (el tiempo que tarda una página en ser interactiva o en la que se puede hacer clic), CLS forma 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 mira el espectador. 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 todas 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.

¿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 grandes expectativas en lo que respecta al rendimiento de su sitio. En 2020, 93% de las personas informó que abandonó un sitio web porque no se cargó correctamente.

Los sitios web nerviosos que se cargan en partes o con un comportamiento inesperado harán que sus visitantes busquen otro sitio web para navegar. Y si se quedan, es probable que un puntaje CLS alto cause problemas de usabilidad, como elegir la opción incorrecta, verificar 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. Al ver 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 Core Web Vitals, su sitio será penalizado.

Google no quiere dirigir a las personas a sitios que no funcionan bien. Alinearse con las mejores prácticas de CLS puede ayudar a que su sitio web suba en la clasificación. Y desde El 68% de las experiencias en línea comienzan con una búsquedaasegurarse 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.

Para analizar el rendimiento en Perspectivas de PageSpeed:

  1. Ingrese la URL de un sitio web en la herramienta PageSpeed ​​Insights de Google.
  2. Haga clic en ‘Analizar’.
  3. Comprueba tu rendimiento. Puede revisar el rendimiento de dispositivos móviles y de escritorio, que puede alternar entre ellos utilizando la navegación de la esquina superior izquierda.

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

ejemplo de información sobre la velocidad de la páginaPara analizar el rendimiento con las herramientas de Lighthouse:

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

La siguiente página 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 elija «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 cuando investiga 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 mueve una larga 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 «ráfaga» más grande o grupo de puntajes de cambio de diseño que ocurren durante una ventana de sesión. Esencialmente, si ocurren muchos cambios dentro de una ventana de cinco segundos, esto se consideraría disruptivo y daría como resultado una puntuación CLS alta.

¿Qué es una buena puntuación CLS?

Una buena puntuación de diseño acumulada es algo inferior a 0,1. Los informes de las herramientas PageInsights o Lighthouse marcarán automáticamente cualquier puntaje bajo y brindarán consejos sobre cómo optimizar la página para un mejor rendimiento.

turno-de-diseño-acumulativo-1Fuente

Cómo mejorar el cambio de diseño acumulativo

Hay algunas mejores prácticas que los propietarios de sitios web pueden seguir para mejorar su puntaje CLS:

1. Usa un CMS (sistema de gestión de contenidos).

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

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

En lugar de dejar que establezcan su propio alto y ancho, dicte atributos de tamaño para sus medios. Al configurar estos atributos, le está diciendo al navegador cuánto espacio reservar, incluso si la imagen aún no está cargada.

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

La etiqueta de editor de Google ofrece una guía completa sobre cómo reservar espacio para anuncios.

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

4. Use 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 al 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 de una vez. En su lugar, ofrezca a los usuarios la oportunidad de elegir qué elementos desean ver a través de enlaces «leer más» o acordeones «expandir tema» dentro de su página.

Ofrezca una mejor experiencia de usuario con CLS Optimization

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

Para cumplir con los estándares de CLS de Google, comience utilizando 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 cuando diseñe su sitio web, especialmente en lo que respecta a las transiciones y las adiciones de contenido. Con estas simples consideraciones, verá mejores resultados en todos los ámbitos.

No olvides enviarme invitación a Linkdin

sobre el autor

Estuardo Monroy

Te gustaría saber más sobre el autor, te invito que veas la sección de Nosotros en Consultor SEO, donde se extiende hablando sobre su experiencia, conocimientos y un poco de información personal.