Optimización de la métrica CLS

¡Saludos a todos los entusiastas de las webs rápidas! En diciembre de 2023, durante un meetup de Frontendistas, di una charla sobre la métrica CLS.

Mostré principalmente los problemas con la métrica CLS que se presentan con más frecuencia en los sitios de nuestros clientes y que ayudamos a eliminar.

Exploremos juntos cómo evitar los problemas con CLS y cómo solucionarlos cuando ya hayan ocurrido.

Siga leyendo o simplemente vea la grabación:

1. Aspect-ratio, dimensiones, min-height#

Cada elemento en la página tiene su propio tamaño. Puede ser una imagen, un video, un iframe o cualquier otro componente web. Cuando se carga la página, el navegador crea espacio para este elemento antes de que se muestre. Luego, el elemento se renderiza en ese espacio. Puede obtener más información en este artículo.

2. Ajuste de tamaño de fuente#

Utilice los descriptores CSS size-adjust y ascent-override para igualar las dimensiones de la fuente del sistema con los parámetros de la fuente web que usa en su sitio. Asegúrese de que la fuente del sistema se renderice lo más parecido posible a su fuente.

La preparación de descriptores es simple. Puede usar, por ejemplo, este generador. Simplemente cargue su fuente web en la página y ajuste los contornos con los deslizadores para que se asemeje lo más posible a la fuente del sistema.

Para las fuentes de Google, ya se han preparado configuraciones individuales, por ejemplo, en esta página. Aquí también puede ver cómo se verá el texto resultante.

Aquí puede ver cómo cambia la disposición y ubicación de los párrafos tras cargar la fuente web.

Ejemplo de herramienta para ajustar el tamaño de la fuente del sistema screenspan.net/fallback.

3. Carga progresiva de contenido#

Cuando se renderiza una página, el navegador escanea el contenido HTML, comienza a descargar los archivos de recursos uno por uno y luego los procesa. Las páginas web a menudo están compuestas por componentes más pequeños como encabezado, contenido principal y pie de página. A veces, el contenido principal tiene una estructura compleja o contiene una gran cantidad de datos.

Si su sitio web está creado en un framework de JavaScript (Vue.js, React, etc.), puede suceder que el JavaScript que asegura el renderizado del contenido principal tarde más en descargarse que el JavaScript que renderiza el encabezado y el pie de página.

Si primero se renderiza el pie de página y luego el contenido principal, el pie de página se desplazará, causando un cambio de diseño no deseado.

El contenido principal se renderizó tarde y desplazó el pie de página. Esto provocó un cambio de diseño.

Las soluciones varían según el tipo y uso de la aplicación.

• Este problema a menudo afecta a las aplicaciones de renderizado del lado del cliente. Si es posible, habilite el renderizado del lado del servidor para tantos elementos del sitio como sea posible.
• Otra solución puede ser cargar el pie de página solo después de que se haya cargado el contenido principal.
• Si no tiene el control total sobre el tiempo de procesamiento de los archivos JavaScript, puede desplazar el pie de página fuera del viewport inmediatamente en el primer renderizado de la página. Puede hacer esto, por ejemplo, estableciendo la altura mínima del elemento <main> usando la propiedad CSS min-height: 100vh.

4. Contenido (no solo) en ventanas modales y AJAX#

Si en su sitio utiliza AJAX para cargar datos, asegúrese de que los datos que se mostrarán tengan un espacio predefinido en la página y no desplacen el contenido debajo de ellos.

Esto se aplica, por ejemplo, a la visualización de disponibilidad de productos, descripciones de productos, datos técnicos, precios u otras tablas. Otros elementos que pueden causar problemas son los anuncios y cuadros publicitarios, donde a menudo no conoce la altura futura del contenido.

La información que se carga más tarde que en el primer renderizado de la página vuelve a desplazar el contenido y aumenta el CLS.

La solución suele ser preparar marcadores de posición adecuados para los lugares donde se renderizará contenido real más adelante. Si no conoce la altura futura del elemento (por ejemplo, un anuncio), prepare al menos un marcador de posición con una altura mínima que al menos minimice el impacto en la métrica CLS.

Mini estudio de caso: Optimización de CLS en la página de inicio de Datart#

En colaboración con PageSpeed.ONE, Datart.cz logró mejorar significativamente los cambios de diseño no deseados en su página de inicio. El problema residía en un carrusel cargado mediante el servicio externo Bloomreach, que se cargaba después del primer renderizado de la página y desplazaba el contenido debajo de él.

La solución fue relativamente simple, aunque no fácil de implementar en la solución existente. Reservamos espacio para el carrusel antes de su carga. Gracias a esta modificación, el valor de CLS en la página de inicio se redujo de 0,6 a 0,06, lo que representa una mejora de diez veces.

El gráfico muestra la evolución de la métrica CLS en la página de inicio de Datart. La proporción de mediciones no conformes (área roja) disminuyó de aproximadamente dos tercios de las vistas de página a un mínimo, mientras que la proporción de mediciones conformes (área verde) aumentó a más del 80 %.

5. CLS tras interacción del usuario: clic, hover o touch#

A veces nos encontramos con desarrolladores que erróneamente creen que la métrica CLS solo se mide durante el primer renderizado de la página en el primer viewport. Eso es un error. La métrica CLS se calcula durante toda la estancia en la página.

Por lo tanto, si hace clic en un botón que abre un cuadro y desplaza el contenido debajo de él, puede ser nuevamente un elemento que empeore la métrica CLS.

Si cambia el contenido de la página tras alguna interacción del usuario (clic, touch, hover), toda la acción desde el clic hasta el renderizado completo del contenido debe completarse en 500 ms.

Puede imaginar, por ejemplo, una paginación AJAX en una lista de productos en una categoría.

1. El usuario llega al final de la página.
2. Hace clic en el botón "Cargar más productos".
3. En segundo plano, se realiza una consulta a la base de datos para cargar los productos.
4. Un nuevo fragmento de código HTML se inserta en la página.

Si estos 4 pasos en conjunto toman más de 500 ms, puede ocurrir un cambio de diseño no deseado y el nuevo contenido puede desplazar el pie de página hacia abajo.

A veces no es fácil cargar los datos lo suficientemente rápido, especialmente en conexiones móviles más lentas. Las causas pueden incluir la respuesta del servidor de bases de datos, una consulta no optimizada a la base de datos, la respuesta de un servidor de terceros, y similares.

Si no puede manejar la solicitud lo suficientemente rápido, es necesario preparar al menos un espacio vacío (placeholder) para los nuevos datos que llegarán inmediatamente después de hacer clic en el botón. Esto mueve el pie de página fuera del viewport inmediatamente después de la interacción del usuario y los nuevos datos se mostrarán tan pronto como lleguen del servidor.

Una respuesta lenta de la base de datos causa un cambio de diseño y empeoramiento de la métrica CLS tras la interacción del usuario.

Insertar un marcador de posición inmediatamente después de hacer clic en el botón evita el cambio de diseño.

6. Animaciones solo con transformaciones CSS#

Prepare la animación de fondos, visualización y movimiento de cuadros, elementos saltarines, cambios de tamaño, etc., utilizando CSS transform. Así evitará un empeoramiento de la métrica CLS.

Si es un elemento que aparece en el diseño, por ejemplo, en el menú o en el lado de la página, una mala métrica CLS puede reflejarse en toda la evaluación del dominio.

• La propiedad CSS transform permite animar elementos sin causar desplazamientos de diseño.
• Si desea mover elementos, evite cambiar las propiedades top, right, bottom o left y utilice transform
  () en su lugar.
• En lugar de cambiar las propiedades de altura y anchura, use transform
  ().

Botones mal preparados que se mueven de derecha a izquierda o animaciones de superposición oscura en el encabezado pueden empeorar significativamente la métrica CLS.

Consejo final#

Si al probar su sitio web la métrica CLS muestra un valor de 1,00 o más, significa que se desplaza toda la página.

Pruebe un truco y aplique al tag <html> la regla overflow-y:scroll con una altura del 100%.

A veces, un valor de CLS tan alto puede ser causado por la aparición del scrollbar durante el renderizado de la página. Con esto, el scrollbar siempre se mostrará.

html {
  height: 100%;
  overflow-y: scroll;
}

Cubrimos el tema de la optimización de las métricas Core Web Vitals en toda su extensión, lea nuestros otros textos:

• Optimización de la métrica LCP
• Optimización de la métrica INP