Cambio de diseño acumulativo (CLS)

[información sobre herramientas del autor de aioseo_eeat]
[información sobre herramientas del revisor de aioseo_eeat]
CLS-05-escalado-1

El método CLS se utiliza para medir el grado en que el contenido de la página web cambia o se mueve a lo largo de todo el ciclo de vida del ciclo de representación de la página o, en otras palabras, para medir qué tan estable es la apariencia visual del sitio web.

Probablemente hayas presenciado en primera persona lo frustrante que es hacer clic en un elemento del menú y, sin querer, ver un anuncio que te redirige a un sitio web de terceros. También es frustrante que el contenido de la página web cambie en medio de una interacción. Claro que los cambios de diseño también son molestos para los usuarios. Sin embargo, también pueden causar problemas más graves a los editores web, como altas tasas de rebote e infracciones de sus políticas publicitarias debido a clics accidentales.

Además, dado que Google considera CLS como una de las tres " Medidas Web Clave ", una puntuación baja en CLS puede afectar negativamente a la puntuación general de las mismas, lo que puede resultar en un suspenso. Como parte de los cambios recientes en el algoritmo de búsqueda de Google, los sitios web que aprueban la evaluación de las medidas web clave tienen una mejor clasificación en los resultados de búsqueda.

Existe una correlación directa entre mejorar la puntuación CLS, mejorar la experiencia general del usuario, mejorar potencialmente las clasificaciones de Google y aumentar el tráfico orgánico de Google.

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

Cuando un elemento visible en la ventana gráfica cambia su posición inicial por cualquier motivo, dicho cambio se registrará. Por lo tanto, se consideraría inestable si cambiara su posición inicial. Es importante tener en cuenta que solo es posible crear un cambio de diseño si un elemento visible se mueve a otra ubicación en la página debido a algún cambio en ella, y no si un elemento nuevo o uno existente aumenta o disminuye de tamaño.

Una puntuación CLS consta de dos medidas específicas diseñadas para rastrear los cambios de diseño: las fracciones de impacto y las fracciones de distancia. Estas dos medidas se utilizan para determinar la puntuación CLS. La fracción de impacto mide cómo los elementos inestables afectan la ventana gráfica entre dos fotogramas, combinando el elemento original y el cambio como una proporción que puede compararse con el área visible total de la ventana gráfica entre los dos fotogramas. En el caso de un elemento inestable que se mueve horizontal o verticalmente, la fracción de distancia representa la distancia que ese elemento ha recorrido en la ventana gráfica (ya sea horizontal o verticalmente).

¿Cómo puedes mejorar tu puntuación CLS?

Para reducir los elementos inestables/comportamiento cambiante, aquí hay algunas recomendaciones:

  • Cada página web puede recibir diferentes puntuaciones CLS según la estructura de su sitio. Por ejemplo, las puntuaciones CLS de las páginas de artículos pueden ser más altas que las de la página de inicio. Por lo tanto, el primer paso es medir las puntuaciones CLS de todas las plantillas de página principal de su sitio.
  • Las imágenes y los vídeos siempre deben tener atributos de ancho y alto. Crea imágenes adaptables con relaciones de aspecto definidas.
  • Como alternativa, se pueden usar cuadros de relación de aspecto CSS para reservar el espacio necesario para los elementos. Durante la carga, esto garantiza que el navegador asigne el espacio adecuado al documento.
  • La publicación de anuncios puede contribuir significativamente al cambio de diseño si las ubicaciones no están optimizadas adecuadamente.
  • No inyecte contenido dinámico sobre contenido ya cargado, excepto en respuesta a las interacciones del usuario, en cuyo caso el diseño cambiará.

¡Acelere el rendimiento de WordPress con nuestros servicios de optimización de sitios !

Publicaciones relacionadas

Peso de la página

¿Qué es el peso de la página?

El peso de la página es el tamaño total del archivo de una página web. Esto incluye todos los

¿Qué es la monitorización real del navegador?

¿Qué es la monitorización del navegador real?

Para comprender la monitorización de un navegador real, es fundamental entender qué es un navegador. Un navegador..

¿Qué es el tiempo de respuesta del servidor?

¿Qué es el tiempo de respuesta del servidor?

Cuando los usuarios visitan un sitio web, su navegador envía una solicitud al servidor del sitio web

Comience a usar Seahawk

Regístrate en nuestra aplicación para ver nuestros precios y obtener descuentos.