¿Qué son las Core Web Vitals?

por The Black | May 29, 2023 | Google, SEO | 0 Comentarios

A parte de un invento de Mr.Google para que todos los gurus del SEO hagan lo que le conviene a él para ganar más dinero con los anuncios con la excusa de que quiere que tengamos una UX (User eXperience) del copón, vamos a ver si nos explicamos un poco para que lo entengamos los simples mortales.

Las 3 métricas de Core Web Vitals son indicadores clave que evalúan la experiencia de usuario en términos de carga, interactividad y estabilidad visual de una página web.

1. Largest Contentful Paint (LCP): Mide el tiempo que tarda en cargar el elemento más grande y visible de la página. Para mejorar este indicador, debemos optimizar el tamaño de los ficheros, especialmente las imágenes y minificar código, especialmente los achivos .js y .css

2. First Input Delay (FID): Mide la capacidad de respuesta interactiva de una página, midiendo el tiempo de retraso entre la interacción del usuario (clic, toque, etc.) y la respuesta del sitio. Para mejorar el FID, es necesario reducir el tiempo de ejecución de tareas JavaScript, evitar bloquear el hilo principal y utilizar técnicas de carga diferida o asíncrona para scripts.

3. Cumulative Layout Shift (CLS): Evalúa la estabilidad visual de la página midiendo la cantidad de cambios de diseño inesperados durante la carga. Para mejorar el CLS, es importante establecer dimensiones explícitas para imágenes y elementos multimedia, evitar la inserción de contenido dinámico que desplace el diseño y cargar anuncios y elementos externos de manera que no afecten negativamente al diseño.

Cómo mejorar LCP (Largest Contentful Paint)

• Optimiza el rendimiento del servidor: Asegúrate de que tu servidor responde rápidamente a las solicitudes del navegador. Utiliza técnicas de almacenamiento en caché y compresión de archivos (GZIP) para reducir los tiempos de carga.
• Optimiza y comprime imágenes: Las imágenes suelen ser la causa principal de un LCP lento. Reduce el tamaño de las imágenes utilizando formatos más ligeros como JPEG en lugar de PNG. Utiliza compresión sin pérdida para mantener la calidad mientras se reduce el tamaño del archivo.
  • Formato WebP es un formato de imagen desarrollado por Google que utiliza compresión con pérdida y sin pérdida para ofrecer imágenes de alta calidad con tamaños de archivo más pequeños en comparación con otros formatos populares, como JPEG y PNG.
• Prioriza el contenido visible: Carga primero el contenido importante y visible para el usuario. Utiliza técnicas como la carga progresiva o lazy loading para mostrar inicialmente el contenido visible y cargar el contenido adicional a medida que el usuario se desplaza hacia abajo en la página.
• Minimiza el tiempo de respuesta del navegador: Reduce la cantidad de recursos bloqueantes, como scripts o archivos CSS, que pueden retrasar la renderización del contenido principal. Asegúrate de cargar y ejecutar scripts de manera eficiente y optimiza tus estilos CSS para que se carguen rápidamente.
• Utiliza una red de entrega de contenido (CDN): Un CDN distribuirá tu contenido a través de servidores ubicados estratégicamente en todo el mundo, lo que reducirá la distancia física entre tu sitio y los usuarios, mejorando así los tiempos de carga.

Cómo mejorar FID (First Input Delay)

• Minimiza el tiempo de ejecución del JavaScript: Optimiza tus scripts para que se ejecuten de manera eficiente y evita bloquear el hilo principal del navegador. Utiliza técnicas como la carga asíncrona o diferida de JavaScript para mejorar el rendimiento.
• Reduce el tamaño de los scripts: Minimiza el tamaño de los archivos JavaScript eliminando el código innecesario, utilizando herramientas de compresión y eliminando bibliotecas o funciones que no se utilizan. Considera utilizar técnicas de modularización para dividir tu código en módulos más pequeños y así reducir la complejidad.
• Interacciones fluidas y receptivas: Asegúrate de que las acciones del usuario tengan una respuesta inmediata. Utiliza técnicas como el preprocesamiento de acciones, la gestión de eventos en segundo plano y la carga progresiva de contenido para que el usuario perciba una experiencia fluida y sin retrasos.
• Evita bloqueadores de JavaScript: Algunos elementos de la página, como ventanas emergentes o elementos de terceros, pueden bloquear el hilo principal del navegador y causar retrasos en la capacidad de respuesta. Identifica y elimina o modifica elementos que puedan afectar negativamente el FID.
• Utiliza herramientas de monitorización y análisis: Realiza un seguimiento del rendimiento de tu sitio web con herramientas como Google Analytics o Lighthouse para identificar áreas problemáticas y obtener información sobre cómo mejorar el FID.

Cómo mejorar CLS (Cumulative Layout Shift)

• Asegúrate de que los tamaños de los elementos sean determinísticos: Establece dimensiones explícitas (ancho y alto) para imágenes, videos y elementos
• Evita cambios de diseño no deseados: Asegúrate de que los elementos de la página no cambien de tamaño, posición o forma de manera inesperada. Esto puede ocurrir cuando se cargan anuncios, imágenes u otros contenidos de manera asincrónica. Reserva espacio para los elementos que se cargarán más adelante o utiliza técnicas como el atributo `width` y `height` para mantener el espacio ocupado mientras se carga el contenido.
• Carga y reserva espacio para contenido incrustado: Si tu página incluye elementos incrustados, como videos de YouTube o widgets de redes sociales, asegúrate de reservar espacio para ellos. De esta manera, cuando se carguen, no causarán cambios inesperados en el diseño y evitarán desplazamientos indeseados.
• Utiliza transiciones y animaciones suaves: Si tienes elementos que se mueven o cambian de tamaño, asegúrate de aplicar transiciones o animaciones suaves para que los cambios sean gradualmente perceptibles para el usuario. Evita cambios bruscos y repentinos que puedan causar un desplazamiento involuntario.
• Realiza pruebas y optimizaciones: Utiliza herramientas como Google PageSpeed Insights o Lighthouse para analizar y medir el CLS de tu sitio web. Identifica los elementos problemáticos que causan cambios de diseño y trabaja en su optimización. Realiza pruebas de rendimiento y optimización para asegurarte de que el CLS se mantenga bajo control.

Recuerda que mejorar estas métricas no solo proporcionará una mejor experiencia para los usuarios, sino que también puede tener un impacto positivo en el posicionamiento de tu sitio web en los resultados de búsqueda para que Google pueda incrementar también sus beneficios.