Core Web Vitals: Optimiza tu web al máximo

+ ¿Core Web Qué?
– Si eres newbie en el desarrollo de sitios web… esto que voy a contarte te interesará

Los Core Web Vitals son tres métricas clave que emplea Google para analizar el rendimiento de tu sitio web. Están diseñadas fundamentalmente para evaluar aspectos relacionados directamente a la experiencia del usuario en entorno real a través de aspectos como la estabilidad visual, la interactividad, el tiempo de carga y otros.

Entender correctamente estas métricas y saber como afectan sobre nuestro sitio es fundamental no solo para mejorar el rendimiento, sino también para lograr un mejor posicionamiento en buscadores y, en definitiva, hacer feliz al bueno de Google.

A continuación los tienes

• Largest Contentful Paint (LCP): O en español, procesamiento de imagen de contenido más grande, mide el tiempo que tarda en cargarse el contenido más grande y visible de la página. Es una métrica crítica puesto que, como usuarios, somos tremendamente impacientes -y cada día vamos a peor- por lo que conseguir que tu sitio muestre los contenidos lo antes posible es vital! Como los Core Web Vitals! Una buena puntuación de LCP es de 2.5 segundos o menos.
• Interaction to Next Paint (INP, antes conocido como First Input Delay – FID): Evalúa la interactividad de la página, es decir, el tiempo que tarda en responder el sitio web después de la primera interacción del usuario, como un clic o un toque en la pantalla. Idealmente, el INP debería ser de 100 milisegundos o menos.
• Cumulative Layout Shift (CLS): o en español, cambio de diseño acumulado, es la métrica que determina la estabilidad visual de una página y cuánto se mueven inesperadamente los elementos durante la carga. Un buen CLS es una puntuación de 0.1 o menos, asegurando que la página es visualmente estable durante su renderizado.
  ***Me gusta hacer un inciso con esta métrica, ya que puntuará peor una página que muestre un número elevado de animaciones complejas. A mayor número de animaciones, menor estabilidad… pretty straightforward!

+ Okay… ¿Pero… son tan importantes estas métricas de Google?
– Amigo… lo son si quieres un sitio web bien posicionado.

La importancia de los Core Web Vitals radica en que no solo mejoran la experiencia de los usuarios en tu sitio-que siempre está guay que la gente que visite tu web se lleve una buena impresión y todo esté (más o menos) en orden- también juegan un papel crucial en el posicionamiento SEO. Desde el año 2021, Google incorporó estas métricas en su algoritmo de ranking, lo que significa que las páginas que ofrecen una mejor experiencia del usuario tendrán una ventaja competitiva en los resultados de búsqueda frente al resto de sitios web contra los que compita.

Los Core Web Vitals se han convertido en un factor de tremenda importacia para que los sitios web no solo retengan a sus visitantes, sino que también mejoren su visibilidad en Google. Es por todo esto importante tener una idea clara de lo que son y de cómo podemos optimizar estas métricas para reducir tasas de rebote, aumentar conversiones y, en última instancia, mejorar el ROI de tu sitio web. Toda una fantasía!

+ ¿Cómo puedo optimizar los Core Web Vitals de mi sitio web?

1. – Mejorando el Largest Contentful Paint (LCP), que dicho así suena como super easy-peasy

   Para mejorar el LCP, es crucial reducir el tiempo de carga del contenido más grande en la página. Aquí algunas estrategias efectivas:

   • Eliminar o comprimir scripts de terceros innecesarios: Cada script adicional puede aumentar el tiempo de carga, por lo que es vital -de nuevo, vital, Core Web Vitals!- mantener solo los esenciales.
   • Optimizar el servidor web: Un mejor alojamiento puede reducir los tiempos de respuesta del servidor. En función de tu empresa de alojamiento podrás tener más o menos libertad para configurar aspectos concretos de tu servidor, pero siempre suelen poner a tu disposición herramientas para optimizar esto desde tu cPanel. Te animo a investigarlas 😉
   • Configurar la carga diferida (lazy loading): Esto permite que las imágenes y otros recursos pesados se carguen solo cuando son necesarios, es decir, cuando el usuario hace scroll hacia abajo.
   • Reducir el tamaño del CSS, comprimiendo las hojas de estilos: Cuando tenemos archivos voluminosos, estos pueden retrasar a veces la carga del contenido. Minimizar y optimizar estos archivos de estilo es una tarea super necesaria para favorecer una carga rápida. Te recomiendo probar algún plugin de caché, como LiteSpeedCaché, ya que te permitirá automatizar esta tarea de forma eficaz y sencilla.

2. Mejorar la Interactividad (INP) y asegurar que los usuarios pueden interactuar con tu página web tal y como deberían:

   Mejorar el INP implica asegurar que la página responda rápidamente a las interacciones del usuario:

   • Minimizar o aplazar JavaScript: Tal y como comentamos antes, el código JavaScript pesado puede bloquear la interactividad de la página. Minimiza estos scripts o utilízalos de manera asíncrona para mejorar la respuesta.
   • Usar caché del navegador e implementar una CDN-Content Delivery Network (en función de tu empresa de alojamiento): Esto permite que el navegador almacene recursos localmente, reduciendo los tiempos de carga en visitas repetidas.
   • Eliminar scripts innecesarios: Al igual que con el LCP, eliminar scripts innecesarios puede reducir la carga en el navegador y mejorar la interactividad. Porque, vamos a ver, si no los necesitas, ¡¿para qué los quieres chiquillo?! Todo lo que sea contenido residual que no utilizas solo ralentiza tu sitio. Recuerda: OPTIMIZA! OPTIMIZA! OPTIMIZA!

3. Reducir el Cumulative Layout Shift (CLS) O dicho de otro modo, mejorar la estabilidad visual de tu página web:

   • Establecer dimensiones correctas para tus imágenes y vídeos: Asegúrate de que todos los elementos multimedia tengan dimensiones y una definición predefinidas, evitando cambios inesperados en el diseño durante la carga.
   • Añadir nuevos elementos UI debajo del contenido existente: Esto previene que los cambios en la interfaz de usuario afecten al contenido que ya ha sido renderizado.

+ Ahora lo tengo todo un poco más claro!
– Pues claro, hombre! Para eso estamos! Y además te comparto algunas herramientas para que tú mismo puedas medir y mantener los Core Web Vitals de tus sitio web

Una vez que hayas implementado las mejoras, es fundamental monitorear constantemente el rendimiento de tu sitio. Las herramientas más útiles para esto incluyen:

• PageSpeed Insights: Ofrece un análisis detallado de todas estas métricas que hemos comentado anteriormente y además, te hace sugerencias de optimización exactamente en aquellos aspectos que le irían bien a tu sitio… Comparto mis Web Vitals, que por supuesto, son mejorables. Ya sabes lo que dicen: «en casa del herrero, cuchara de palo!»
  
  Muy similar a esta herramienta también puedes encontrar otras como GT Metrix. A mí, personalmente, me mola combinarlas para no quedarme solo con el análisis emitido por el tío Google.
• Lighthouse: Es otra herramienta de auditoría automatizada que proporciona insights sobre el rendimiento y la accesibilidad.
• Google Search Console: Esta plataforma como desarrollador web va a ser de tus mejores amigas, ya que te permite revisar el rendimiento de las páginas de tu sitio en los resultados de búsqueda, incluyendo las métricas de Core Web Vitals. Combinada con Google Analytics son perfectas para hacer un análisis en profundidad de un sitio web.
  
  Te dejo más información relacionada con anális y SEO en este otro artículo 😉 – SEO para Desarolladores: Conceptos Clave que debes conocer.

Y ya vamos cerrando… 🥳🎉

Como espero que hayas podido aprender en este breve artículo… los Core Web Vitals son mucho más que simples métricas técnicas; son indicadores de una buena experiencia de usuario y juegan un papel crucial en el SEO. Por esta razón, como profesionales de desarrollo es nuestra labor comprender muy bien que nos quieren decir y como podemos mejorarlas al final. Al crear sitios web debemos de ser capaces de tenerlas en todo momento en mente a la hora de desarrollar, e ir chequeándolas de vez en cuando para confirmar que vamos por la senda correcta.

Y estas son simplemente algunas de las herramientas y plataformas que debes conocer para poder avanzar dentro de este mundillo y asegurarte de que tu sitio web cumple con los estándares y está adaptado al ecosistema digital actual.