Core Web Vitals parte III: Claves para tener éxito con el CLS

Ya está aquí la tercera parte del Curso Core Web Vitals para periodismo digital creado por Openhost para mostrar a periódicos digitales y webs corporativas las tres métricas principales del Core Web Vitals, así como sus soluciones y retos a corto y medio plazo.

En los dos anteriores artículos de este Curso Core Web Vitals para periodismo digital hablamos del FID o First Input Delay y del LCP o Largest Contentful Paint, y en esta ocasión vamos a centrarnos en la tercera métrica, el CLS o Cumulative Layout Shift​.

¿Cómo afecta el CLS a la carga de una web?

Para entender cómo afecta a una web y en qué métricas se fija Google para poder evaluar este parámetro, es necesario entender primero en qué consiste la propia métrica.

El CLS o Cumulative Layout Shift es la suma total de todas las puntuaciones de cambio de diseño individuales para cada cambio de diseño inesperado que se produce durante toda la vida útil de la página.

Es una métrica 'de laboratorio' que sí se puede simular.

¿Qué mide el CLS en una web?

Lo que mide el CLS es el momento en el que se produce un cambio de diseño cada vez que un elemento visible cambia su posición de un fotograma al siguiente. 

• Cambio de diseño
  • Esto quiere decir, simplemente, cuánto se mueve la pantalla conforme van cargando los diferentes elementos.
  • Lo óptimo sería que al hacer Scroll en una página, los párrafos de texto y el contenido multimedia no se descolocasen ni cambiasen su posición.
• Área de impacto
  • El área de impacto mide el área que ocupan los elementos impactados al cargar y hacer Scroll.
• Distancia
  • Quiere decir cuánto se desplaza el contenido al cargar todos los elementos de una página.

Ejemplo de medición del CLS

En esta imagen podemos observar cómo el botón de 'Click Me!' modifica la maquetación del texto de color verde, desplazándolo hacia abajo, en un ratio de 0.14 de distancia, teniendo en cuenta que el área de impacto es de 0.5.

Si calculamos la puntuación del CLS con estos dos valores anteriormente mencionados, el resultado nos daría lo siguiente:

0.5 x 0.14 = 0.07

¿Cuál es una buena puntuación CLS? 

Para proporcionar una buena experiencia de usuario, los sitios deben esforzarse por tener una puntuación CLS de menos de 0.1. 

Para asegurarse de que está alcanzando este objetivo para la mayoría de sus usuarios, un buen umbral para medir es el percentil 75 de cargas de página, segmentado en dispositivos móviles y de escritorio.

¿Cómo se mide la puntuación de cambio de diseño?

Para calcular la puntuación de cambio de diseño, el navegador observa el tamaño de la ventana gráfica y el movimiento de los elementos inestables en la ventana gráfica entre dos fotogramas renderizados. 

La puntuación de cambio de diseño es un producto de dos medidas de ese movimiento: la fracción de impacto y la fracción de distancia.

Qué influye en el CLS de una página

Imágenes sin Width y height

Atributos opcionales pero muy recomendables, son el height y el width.

• El height marca la altura de la imagen, mientras que el width marca la anchura.
• Son recomendables porque así ayudaremos al navegador a representar la imagen.

Para poder conseguir imágenes optimizadas en nuestra web, deberemos escribir este código en HTML:

<img src="html/imagenes/prueba.jpg" border="1" alt="Este es el ejemplo de un texto alternativo" width="400" height="300">

Fonts causan FOIT/FOUT

Solución --> Preload fonts, es decir, fuentes de texto previamente cargadas en nuestro gestor

El manejo por defecto que aplican la mayoría de buscadores al cargar fuentes externas usando 'font-face' hace que el texto desaparezca algunos segundos mientras se carga la fuente en cuestión.

Este efecto es conocido como FOIT (Flash or Invisible Text), y puede ir desde algunos pocos segundos hasta al menos 30 segundos en algunos navegadores antes de mostrar la fuente por defecto.

Por ello, es importante conocer ciertas técnicas que optimizarán el proceso de utilización de las fuentes en tus páginas web.

Utilizar font-display para carga rápida

La solución al efecto FOIT consiste en utilizar la propiedad font-display de CSS con el valor 'swap'.

Al tener este valor swap, el navegador mostrará la fuente alternativa hasta que se descargue la principal.

font-display: swap

Si utilizas fuentes de google debes asegurarte que la fuente esté configurada con swap. Si no lo está puedes agregar el parámetro GET display al final del link de la fuente de esta forma:

https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap

Cambios de diseño esperados frente a inesperados

No todos los cambios de diseño que afectan al CLS de una web tienen por qué ser malos. De hecho, muchas aplicaciones web dinámicas cambian con frecuencia la posición de inicio de los elementos de la página.

Cambios de diseño iniciados por el usuario

Un cambio de diseño solo es malo si el usuario no lo espera

Los cambios de diseño que ocurren en respuesta a las interacciones del usuario (hacer clic en un enlace, presionar un botón, escribir en un cuadro de búsqueda y similares) normalmente están correctos, siempre que el cambio se produzca lo suficientemente cerca de la interacción como para que la relación sea clara para el usuario.

Por ejemplo, si la interacción de un usuario desencadena una solicitud de red que puede tardar un tiempo en completarse, es mejor crear algo de espacio de inmediato y mostrar un indicador de carga para evitar un cambio de diseño desagradable cuando se complete la solicitud.