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

CLS en Core Web Vitals: Para entender qué es el CLS y cómo afecta a una web, en Openhost te traemos la tercera parte del Curso Core Web Vitals para SEO
Core Web Vitals parte III_ 3 claves para tener éxito con CLS
photo_camera 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​.

Core Web Vitals parte I: Elementos que influyen en el LCP​

 

¿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

Carga de página con 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

Curso Core Web Vitals parte II: 4 Formas de mejorar el FID​

 

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

Core Web Vitals en periódicos digitales: ¿Cómo afectan al SEO de un medio?​

 

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.

Descubre todas las claves sobre cómo configurar Google Analytics 4 en tu CMS 

 

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. 

 

 

Ejemplo de un buen CLS

 

Si el usuario no se da cuenta de que algo se está cargando, o no tiene una idea de cuándo estará listo el recurso, puede intentar hacer clic en otra cosa mientras espera, algo que podría moverse debajo de él y acabaría causando una mala experiencia de navegación.

Cómo mejorar el engagement de AMP en tu medio digital

 

Mejora de CLS con animaciones en CSS

Las animaciones y las transiciones son una buena manera de actualizar el contenido de la página sin sorprender al usuario, siempre y cuando se planifiquen y se plasmen en la web de manera correcta.

El contenido que cambia de forma abrupta e inesperada en la página casi siempre crea una mala experiencia de usuario. 

Sin embargo, el contenido que se mueve de forma gradual y natural de una posición a la siguiente a menudo puede ayudar al usuario a comprender mejor lo que está sucediendo y guiarlo entre los cambios de estado.

¿Cómo se puede animar ciertos elementos de una Web?

Según la web creada por Google web.dev, hecha para solventar dudas a nivel programación de Core Web Vitals y otros asuntos que influyen en una Web, se pueden animar elementos de una Web mediante varios códigos:

La transform propiedad CSS permite animar elementos sin activar cambios de diseño:

  • En lugar de cambiar las propiedades height width, sería apropiado utilizar transform: scale().
  • Para mover los elementos alrededor, hay que evitar el cambio de los toprightbottom, o left propiedades y utilizar transform: translate()en su lugar.
Contenido Evergreen en prensa digital: 5 claves para optimizar tu medio

 

Core Web Vitals Metrics - Cómo medir el CLS

Herramientas para medir CLS en la propia web

Herramientas internas

Éxito garantizado en SEO: 5 pautas para hacer un buen artículo temático

 

Core Web Vitals en las plantillas Opennemas

En Openhost contamos con todas nuestras plantillas Opennemas adaptadas a las últimas actualizaciones de Core Web Vitals.

Nuestro equipo de programación y sistemas trabaja día a día para mejorar toda la red Opennemas y subsanar todas las posibles áreas de mejora que necesiten los medios digitales para seguir indexando de manera óptima en Google.

Si tienes una web o un periódico digital y quieres adaptar tu plantilla a Core Web Vitals, ¡Llámanos!

SEO Long Tail: cómo mejorar fácilmente el tráfico de tu web

 

Si quieres estar al día de todo lo que sucede en el blog de Opennemas, únete a nuestro canal de Whatsapp y recibe en tu móvil contenido en exclusiva y mucho más. Es gratis!CMS Opennemas periodismo

Si todavía no sabes todo lo que te ofrece el mejor CMS del mercado para periódicos digitales ¡Contacta con nosotros y sabremos darte una solución individualizada tanto si eres un nuevo emprendedor en el ámbito de los medios o buscas dar un giro a tu diario!

Y recuerda, puedes crearlo de forma totalmente gratuita haciendo click aquí.

¡CREA YA TU PERIÓDICO CON OPENNEMAS, ES GRATUITO!

banner opennemas