Cumulative Layout Shift

Cumulative Layout Shift. Cómo optimizar CLS

Cumulative Layout Shift o cambio de diseño acumulativo es la primera métrica que se centra en experiencia de usuario más allá del rendimiento. El movimiento inesperado del contenido de la página web es una gran fuente de irritación para los usuarios en la web. La nueva métrica de cambio de diseño acumulativo ayuda a los desarrolladores a comprender el impacto de este problema en sus páginas. Ven a aprender cómo se desarrolló y cómo puedes monitorearlo y depurarlo.

Última actualización: 24 de junio del 2021

¿Qué es Cumulative Layout Shift?

CLS es el cambio inesperado de elementos de la página web mientras la página aún se está descargando y provocan una mala experiencia en el usuario.

Es una parte muy frustrante de la web hoy estás tratando de leer una página y de repente el contenido se mueve y no puedes encontrar tu lugar o algo peor intentas hacer clic en algo y terminas haciendo clic en otro elemento. Esto es lo que se conoce como estabilidad visual: ¿los elementos en la página cambian de manera que los usuarios no esperan e interfieren potencialmente con sus interacciones?

¿Qué es un buen puntaje CLS?

Para proporcionar una buena experiencia de usuario, los sitios deben esforzarse por tener un puntaje CLS de menos de 0.1

Un Cumulative Layout Shift (CLS) bajo ayuda a garantizar que la página sea agradable. Los cambios de diseño pueden distraer a los usuarios.

Es por esto que es importante mantener un Cumulative Layout Shift bajo, porque las páginas que cambian pueden causar una mala experiencia del usuario. Es probable que una mala experiencia de usuario cause que nuestro visitante huya y seguramente no regrese, de allí que un buen consultor seo se preocupe por mantener el puntaje CLS por debajo de 0.1

Tal vez se veía bien originalmente y una actualización hizo que las cosas cambiaran o tal vez solo cambia en ciertos viewports en conexiones de red lentas.

Esta métrica Cumulative Layout Shift ayuda a los desarrolladores a abordar estos problemas al  medir qué tan malo es el cambio de diseño en el páginas y haciéndola disponible en ambas herramientas de laboratorio y en el monitoreo real del usuario.

El navegador mide la inestabilidad del diseño, primero en cuánto del área visual en la pantalla, por lo que ésta es la región de impacto.  Cumulative Layout Shift analiza la cantidad de contenido visible que se desplazó en la ventana gráfica y la distancia a la que se desplazaron los elementos afectados.

Cumulative Layout Shift se está convirtiendo en un factor de clasificación

Evaluación de la experiencia de la página para una mejor web demuestra que las futuras actualizaciones se comunicarán en una guía más específica sobre el momento en que estos cambios entrarán en vigencia. Efectivamente, el cambio de diseño acumulativo se está convirtiendo en un factor de clasificación. Esta métrica está programada para convertirse en un factor de clasificación en algún momento en 2021.

Que elementos que tienden a provocar cambios Cumulative Layout Shift

  • Imágenes sin dimensiones.
  • Anuncios, incrustaciones e iframes sin dimensiones
  • Formularios de contacto
  • Contenido inyectado dinámicamente
  • Botones
  • Fuentes web que causan FOIT/FOUT
  • Videos
  • Acciones que esperan una respuesta de red antes de actualizar DOM
El contenido puede «saltar» porque se insertó un anuncio por ejemplo.

Con respecto a las imágenes receptivas, asegúrese de que los diferentes tamaños de imágenes para las diferentes vistas utilicen la misma relación de aspecto.

Google recomienda usar AspectRatioCalculator.com para calcular la relación de aspecto. Es un buen recurso.

Las imágenes y los videos deben tener las dimensiones de alto y ancho declaradas en el HTML. Lea Porque debe definir dimensiones de imágen

Herramientas para desarrolladores. Midiendo Cumulative Layout Shift

Lighthouse 6.0 y versiones superiores incluyen soporte para medir Cumulative Layout Shift en un entorno de laboratorio. Esta versión también resaltará los nodos que causan el mayor cambio de diseño. Lea cómo mejorar la velocidad de carga Lighthouse.

El panel Rendimiento en DevTools resalta los cambios de diseño en la sección Experiencia a partir de Chrome 84. La vista Resumen para un registro Layout Shift incluye la puntuación de cambio de diseño acumulativo, así como una superposición de rectángulo que muestra las regiones afectadas.

Los registros de Cumulative Layout Shift se muestran en el panel de rendimiento de Chrome DevTools al expandir la sección Experiencia.

 

Después de grabar una nueva traza en el panel Rendimiento, la sección Experiencia de los resultados se completa con una barra teñida de rojo que muestra un registro Layout Shift. Al hacer clic en el registro, puede profundizar en los elementos afectados (por ejemplo, observe las entradas movidas de/a).

También es posible medir los Cumulative Layout Shift del mundo real agregados a nivel de origen utilizando el Informe de experiencia del usuario de Chrome. Los datos de CrUX Cumulative Layout Shift están disponibles a través de BigQuery y una consulta de muestra para ver el rendimiento de Cumulative Layout Shift está disponible para su uso.

Formas de optimizar el cambio de diseño acumulativo

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
  • Animando elementos por «altura» y «ancho» en lugar de «transform: scale ()» de CSS
  • Animando elementos por «arriba», «derecha», «abajo» o «izquierda» en lugar de «transform: translate ()» 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 carga en esos elementos contenedores, la página no se desplazará.
  2. Nunca inserte contenido dinámicamente por encima del contenido existente.
  3. Si usa CSS para animar elementos, prefiera «transformar» animaciones.

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

Use valores font:display con sus fuentes personalizadas

Todas esas elegantes fuentes de google podrían estar causando FOIT y FOUT y es probable que no haya pensado que podría causar algún problema.

Si te estás preguntando qué es FOIT y FOUT, permíteme explicarte.

Cuando un navegador necesita una fuente de un servidor web, cualquier elemento que use esa fuente se ocultará hasta que el recurso de la fuente se haya descargado por completo. Esto se conoce como FOIT o flash de texto invisible. Lea Cómo asegurarse que el texto permanezca visible durante la carga de la fuente web

Valores de fuentes personalizadas en Cumulative Layout Shift

Valores de fuentes personalizadas en Cumulative Layout Shift

Del mismo modo, los navegadores muestran una fuente alternativa en la pila de fuentes hasta que se carga la personalizada. Esto crea un destello de texto sin estilo o comúnmente conocido como FOUT.

Imagen para publicación

Imagen para publicación Fout

Lighthouse puede ser tu amigo aquí al identificar cuál es exactamente la causa de Cumulative Layout Shift. Si las fuentes son culpables, hay algunas soluciones fáciles para manejarlas. Simplemente puedes usar valores font:display

Usted puede minimizar estos efectos mediante el uso de valores  font:displaycomo auto, swap, block, fallbacky optional.

Imagen para publicación

Imagen para publicación

Pero si desea estar 100% seguro de que no se está produciendo un cambio de diseño, debe usar font:display junto con <link rel=preload>. Como he usado aquí:

Imagen para publicación

Imagen para publicación

Incluir atributos width y height en elementos de imagen y video

Las especificaciones heighty las widthen imágenes solían ser una práctica antigua y saludable, pero con la popularidad del diseño web receptivo, se perdió. Así es como debería usarlo:

<img src = "datadab-home-page.jpg" width = "1440" height = "810" alt = "DataDab Home Hero Image">

Los navegadores web modernos ahora establecen la relación de aspecto predeterminada de las imágenes en función de los atributos de ancho de altura de una imagen. Por lo tanto, es una buena práctica configurarlos para evitar cambios de diseño.

img {relación de aspecto: attr (ancho)/attr (alto);}

Esto predice una relación de aspecto, en función de los atributos de dimensión antes de cargar la imagen. Proporciona esa información al comienzo del cálculo del diseño. La relación de aspecto se usa para medir la altura tan pronto como se le dice a una imagen que tenga un cierto ancho.

Cuando se trata de imágenes receptivas, srcset determina las imágenes que permite que el navegador elija entre los tamaños de cada imagen. Para establecer atributos de img ancho y alto, cada imagen debe usar la misma relación de aspecto.

<img width = "1000" height = "1000" src = "dd-about-1000.jpg" srcset = "dd-about-1000.jpg 1000w, dd-about-2000.jpg 2000w, dd-about-3000. jpg 3000w "alt =" dd-about "/>

Lea: Porque especificar el Ancho Y Alto de imágenes

Establecer dimensiones en anuncios e incrustaciones

Los anuncios se encuentran entre los principales contribuyentes a los cambios de diseño. Los editores y las redes publicitarias a menudo admiten tamaños dinámicos de anuncios. Debido a las tasas de clics más altas y a más anuncios que compiten en la subasta, el tamaño de los anuncios mejora la eficiencia y, por lo tanto, los ingresos. Lamentablemente, debido a los anuncios que empujan el contenido visible que está viendo en la página, esto puede conducir a una experiencia de usuario subóptima.

Puede probar estos pasos para reducir las posibilidades de Cumulative Layout Shift alto debido a los anuncios:

Reserve espacio estáticamente para el espacio publicitario. Es decir, diseñe el elemento antes de cargar la biblioteca de etiquetas de anuncios.

Al colocar anuncios en el flujo de contenido, asegúrese de que el tamaño del espacio esté asignado para evitar cambios. Si se carga fuera de la pantalla, esos anuncios no activarán cambios de diseño.

Cuando coloque anuncios no adhesivos cerca de la parte superior de la ventana gráfica, tenga mucho cuidado.

Evite contraer el espacio asignado si un marcador de posición no muestra ningún anuncio cuando el espacio publicitario está disponible.

Elimine los cambios de diseño al reservar el espacio publicitario con la mayor duración posible.

Utilice los datos históricos para elegir el tamaño más probable para el espacio publicitario.

En el caso de marcos flotantes e incrustaciones, tenga en cuenta las dimensiones y el estilo de un marcador de posición correspondiente para la inserción. Al utilizar consultas de medios, es posible que deba tener en cuenta las diferencias sutiles en los tamaños de anuncios/marcadores de posición entre varios factores de forma.

Los elementos DOM de ranura de estilo estático pasaron a su biblioteca de etiquetas con los mismos tamaños. Esto asegura que mientras se carga, la biblioteca no causa cambios de diseño. De lo contrario, la biblioteca podría ajustar el tamaño del elemento de ranura después del diseño de página.

Mejora la respuesta HTTP y la sincronización de elementos

La respuesta HTTP lenta del servidor también puede causar problemas con el diseño del contenido. Cuando usa un CDN, la carga de los elementos sangrados lleva unos pocos milisegundos. Eso hace que el contenido salte. Luego debe construir un espacio en DOM o sincronizar la carga con otros elementos.

Manejar adecuadamente el contenido inyectado dinámicamente

Nunca inyecte contenido por encima del contenido existente, excepto por la interacción del usuario. Esto asegura la anticipación de cualquier cambio de diseño que ocurra.

Te habrás dado cuenta de los cambios de diseño debido a una interfaz de usuario que aparece en la parte superior o inferior de la página cuando intentas cargar un sitio. Al igual que un anuncio, esto también ocurre con pancartas y formularios que cambian gran parte del diseño de la página.

Cuando elija mostrar este tipo de posibilidades de IU, reserve suficiente espacio en la ventana de visualización con anticipación. Intente utilizar un marcador de posición o una interfaz de usuario esqueleto para que una vez que se cargue, no active el contenido de la página para moverse inesperadamente.

Necesita mejorar las métricas web principales?

Contenido Relacionado:

 

Que es Largest Contentful Paint (LCP)
Cómo Recuperarse del Efecto Google Panda
Que es First Input Delay (FID)
Mejora First Content Paint
Sitemap para Blogger Basado en Ajax
Cómo Medir Core Web Vitals.
Precargue los Activos Críticos para Mejorar la Velocidad de Carga
Cómo Optimizar la Velocidad de Carga con Lighthouse
Como Hacer una Campaña SEO Paso a Paso Estrategia SEO
Factores Seo On Page Que Determinan tu Clasificación
Como Desarrollar Una Estrategia SEO Paso A Paso
Blog de Search Engine Optimization
Experto en Acelerar WordPress
¿Qué Es El Jugo De Enlace?
Cómo Utilizar Enlaces Internos Para Clasificar Más Alto
Planificador De Palabras Clave Ads
Preguntas Comunes Para Consultoras SEO
Cómo Utilizar Google Search Console Para Posicionamiento
Asegúrese Que El Texto Permanezca Visible Durante La Carga De La Fuente Web
Especialista Seo Experto
Consultora Posicionamiento Madrid

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuar!

promedio de puntuación

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

¡Siento que este contenido no te haya sido útil!

¡Déjame mejorar este contenido!

Dime, ¿cómo puedo mejorar este contenido?

Sigueme
Últimas entradas de Estela Silva H. (ver todo)

Soporte a su negocio en el campo del posicionamiento web, optimización web y auditorías profesionales. Gracias a mis acciones, los sitios web obtienen un tráfico segmentado que se traduce directamente en ventas y conversiones en el sitio web con  efectos seguros durante muchos años.

Servicios de Comercio electrónico Servicios de e-Marketing y Estrategías
Montar una tienda Posicionamiento en Goole
Posicionamiento de tiendas Marketing de contenidos
Notificaciones push Auditorías de Contenido
Auditorías SEO
Páginas Web Gratis
Gestión de Google Ads
Asesoramiento y Consulta
Reparación de Sanciones de Google
Entrenamiento SEO
Reparación de Sitio Hackeado
Acelerar WordPress