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.

¿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.

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.

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.

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

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.

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 autoswapblockfallbackoptional.

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 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 imagenes 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.

Contenido Relacionado:

Que es Largest Contentful Paint (LCP)

Que es First Input Delay (FID)

Cómo Mejorar First Content Paint

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *