More share buttons
Share on Pinterest
There are no images.

Que es y como medirlo


Nos ha pasado a todos: 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. ah!

Como un juego “lento, 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.

romti.com.mx/wp-content/uploads/2021/09/Es-posible-que-este-perdiendo-el-tiempo-luchando-contra-las.png" alt="→ Descargar ahora: SEO Starter Pack [Free Kit]"/>

El cambio de diseño acumulativo es una de estas métricas clave que mide qué tan fluido es un sitio web y cómo se mueve inesperadamente cuando se cargan elementos. Echemos un vistazo más de cerca a cómo funciona esta métrica y cómo puede asegurarse de que su 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 se mueve una página web inesperadamente durante su vida. Por ejemplo, si un visitante del sitio web carga una página y mientras la lee se carga un banner y la página salta hacia abajo, esto constituiría una puntuación CLS alta.

Junto con Largest Contentful Paint (el tiempo que se tarda en cargar el contenido más grande) 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 el CLS en cada página que indexan.

¿Cuáles son las causas del 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 se cargan lentamente, los videos de tamaño desconocido aparecen repentinamente o los elementos DOM se agregan dinámicamente son causas potenciales de CLS.

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

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 carguen 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. De hecho, 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 esencial por dos razones: la experiencia de sus visitantes y la clasificación de 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.

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

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 brindarles a los clientes una buena experiencia.

En segundo lugar, Google clasifica los sitios según el rendimiento de la página. Una mejor experiencia de usuario se traduce en una clasificación de búsqueda más alta. Si su página no cumple con los estándares establecidos por Google en las pautas de 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 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 desplazamiento acumulado del diseño?

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 la herramienta PageSpeed ​​Insights o en el navegador Chrome usando Lighthouse Tools.

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 en dispositivos móviles y de escritorio, que puede alternar usando la navegación en 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 información de velocidad de páginaPara analizar el rendimiento con las herramientas Lighthouse:

  1. Abra el sitio web que desea analizar en Chrome.
  2. Vaya a Herramientas de desarrollo haciendo clic en los tres puntos en la esquina superior derecha de la ventana de su navegador, eligiendo “Más herramientas” y luego “Herramientas de desarrollo”.
  3. Cuando se abra la consola, elija “Faro” de las opciones anteriores.
  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 verificación detallada de lo que contribuyó a esa puntuación. Para revisar la auditoría, desplácese hacia abajo y elija “Mostrar auditorías relevantes de CLS”.

ejemplo de control de faros

Obtenga más información sobre la fracción de impacto y la distancia

Dos términos que puede ver al buscar 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 refiere al tamaño del elemento inestable en relación con la ventana gráfica. La fracción de distancia es la cantidad de movimiento del elemento inestable como una relación de ventana.

Entonces, un CLS alto consistiría en un elemento grande que se mueve a 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 “ráfaga” o grupo de puntuaciones de cambio de diseño más grande que se produce durante una ventana de sesión. Básicamente, si se producen muchos cambios en una ventana de cinco segundos, esto se consideraría perjudicial y daría como resultado una puntuación CLS alta.

¿Qué es una buena puntuación CLS?

Una buena puntuación de diseño acumulativa es inferior a 0,1. Los informes de las herramientas PageInsights o Lighthouse informará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:

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 notificando cualquier problema antes de iniciar su sitio.

2. Especifique los 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 los archivos multimedia. Al establecer estos atributos, le indica al navegador cuánto espacio debe reservar, incluso si la imagen aún no se ha cargado.

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

Google Publisher Tag ofrece una guía completa sobre cómo reservar espacio publicitario.

Sube contenido nuevo en la ventana gráfica. La carga de contenido por encima de lo que el usuario está viendo a menudo hace 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 “Más información” que desplaza al usuario hacia abajo en la página no tendrá ningún impacto en CLS porque es un cambio de diseño esperado.

Una nota sobre el cambio de diseño esperado o 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, brinde a los usuarios la oportunidad de elegir qué elementos desean ver a través de los enlaces “leer más” o los acordeones de “expandir tema” dentro de su página.

Ofrezca una mejor experiencia de usuario con la optimización CLS

Prestar atención a CLS no solo proporciona una mejor experiencia de usuario, sino que también aumenta la clasificación de los resultados de búsqueda. Es una victoria para todos.

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 mantenga los cambios de diseño en primer plano al diseñar su sitio web, especialmente con respecto a las transiciones y adiciones de contenido. Con estas simples consideraciones, verá mejores resultados en todos los ámbitos.Paquete de inicio de SEO



Source link

WhatsApp chat
MArketing

Se ve que quieres mejorar

Regístrate en nuestras consultorIAS GRATIS, Te mandaremos una confirmación