Solucionar el Error de Problema CLS en Core Web Vitals en GSC

Con la introducción de Core Web Vitals en GSC, Google dejó claro que considerará los Web Vitals para las páginas como un factor de clasificación. Esto funcionará junto con otros factores de clasificación de Google, como la Velocidad de Página, HTTPS, Amigabilidad Móvil y Navegación Segura. No se han publicado muchos detalles aún, pero Google Search Console ha comenzado a mostrar informes para Core Web Vitals.

Consiste en tres métricas de rendimiento web;

1. LCP: Largest Contentful Paint
2. FID: First Input Delay
3. CLS: Cumulative Layout Shift

No hay mucha información disponible en este momento sobre cómo puedes solucionar estos problemas, pero hay algunas prácticas que pueden ayudarte a resolver el Desplazamiento Acumulativo de Diseño (CLS) ‘ Más de’ para tus páginas web.

¿Qué es el Desplazamiento Acumulativo de Diseño?

Es una métrica de página que informa sobre la estabilidad de la página. En términos simples, cuando cargas una página web, comienzas a leer o realizar cualquier acción, y si de repente el contenido o los elementos de la página web saltan o cambian, puede causar problemas considerando la experiencia de visualización de los usuarios.

CLS mide la suma total de todos los puntuaciones de desplazamiento de diseño individuales para cada desplazamiento de diseño inesperado que ocurre durante toda la vida útil de la página.

El ejemplo anterior muestra que una carga repentina de elementos sobre el cuadro de confirmación de pedido causó un clic accidental. El CLS es el promedio de todos esos desplazamientos de contenido de página.

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

¿Qué Causa un Alto CLS?

Puede haber una serie de problemas que pueden causar un CLS más alto, pero señalaré algunas de las razones principales;

• Reflujo de Contenido de Carga Perezosa
• Imágenes sin dimensiones
• Inyección de Anuncios
• Embeds e iframes sin dimensiones
• Un contenido esperando cargar debido a una respuesta lenta

Reflujo de Contenido de Carga Perezosa

La Carga Perezosa es un maravilloso plugin que carga las imágenes solo cuando se desplaza la página y el contenido entra en el viewport. Pero muchas veces esto causa que el contenido se desplace hacia arriba y hacia abajo, causando reflujo, donde el contenido debajo o alrededor de la imagen se empuja para hacer espacio para la imagen recién cargada.

Inyección de Anuncios

Los anuncios son uno de los mayores contribuyentes a los desplazamientos de diseño en la web al empujar el contenido visible que estás viendo hacia abajo en la página. Lo hace cargando las unidades de anuncios después de que la página se ha cargado, causando un Jank significativo.

Elemento Esperando Cargar debido a Respuesta Lenta

A veces, debido a una respuesta HTTP lenta, algunos elementos pueden tardar un tiempo en cargar, causando que el contenido se desplace hacia arriba o hacia abajo.

¿Cómo Solucionar el Error de Alto CLS en Web Vitals?

Si las imágenes tardan en cargar y el contenido ocupa espacio para las imágenes. Entonces, cuando el contenido se carga, desplaza el contenido hacia abajo, causando inestabilidad en el diseño.

Para las imágenes que causan Desplazamiento de Contenido (Jank), reserva el espacio requerido con cajas de relación de aspecto CSS. Este enfoque asegura que el navegador pueda asignar la cantidad correcta de espacio en el documento mientras se carga el medio. Puedes leer esta publicación para Carga de Imágenes Sin Jank.

Las imágenes cargadas de forma perezosa también pueden causar el problema, pueden crear un gran espacio antes de ocupar el espacio de la imagen. Si estás enfrentando el problema de Reflujo de Contenido debido a la Carga Perezosa de Imágenes, puedes leer este artículo para las soluciones.

Si colocas anuncios en el contenido, asegúrate de eliminar los desplazamientos reservando el tamaño del espacio. Usa un marcador de posición si no se devuelve un anuncio en lugar de colapsar el espacio reservado. Si estás usando WordPress, un buen plugin de anuncios como Ad-Inserter se encargará de mantener el espacio correcto para los anuncios, así que no necesitas preocuparte.

Evita contenido dinámico, el contenido dinámico es aquel que se inserta después de que la página se ha cargado. Especialmente el contenido por encima de la línea de pliegue, por ejemplo, boletines, registros, publicaciones relacionadas en el DOM del contenido. Evita cargar este tipo de contenido por encima de la línea de pliegue, si es posible, intenta usar un cuadro emergente.

Una respuesta HTTP lenta del servidor también podría causar inestabilidad en el contenido. Si estás usando un CDN y tarda muchos milisegundos en cargar los elementos destinados y esto causa que el contenido salte, entonces necesitas crear un espacio en el DOM o sincronizar la carga con otros elementos.

También hay otras causas para un alto CLS, puedes encontrar una guía detallada para optimizar CLS en el sitio oficial de Web.Dev

Conclusión: La publicación no contiene soluciones técnicas o relacionadas con el código, pero ofrece una visión general de lo que exactamente causa el problema y cómo puedes abordar la solución.

Si tienes alguna opinión sobre Solucionar el Error de Problema CLS en Core Web Vitals en GSC, no dudes en dejarla en el cuadro de comentarios a continuación. Además, suscríbete a nuestro canal de YouTube de DigitBin para tutoriales en video. ¡Salud!