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.
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.
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
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.
Imágenes sin Width y height
Atributos opcionales pero muy recomendables, son el height y el width.
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 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.
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:
height
y width
, sería apropiado utilizar transform: scale()
.top
, right
, bottom
, o left
propiedades y utilizar transform: translate()
en su lugar.
Herramientas para medir CLS en la propia web
web-vitals
Biblioteca JavaScriptHerramientas internas
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!
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!
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!
Plataforma Opennemas - El CMS #1 de Internet para webs, periódicos y comunicación digital
http://www.opennemas.com
Openhost, S.L.