Core Web Vitals - ¿Qué son y cómo mejorarlos?

Google presentó un nuevo programa en 2020, que se llama Web Vitals. Esto se refiere a una técnica que ofrece orientación sobre señales de calidad. Según Google, estas métricas son cruciales para brindar una excelente experiencia de usuario en la web. En mayo de 2021, Google comenzó a utilizar Core Web Vitals como métrica para la clasificación de búsqueda en su plataforma.

¿Qué son Core Web Vitals?

Core Web Vitals son métricas para medir la experiencia del usuario en un sitio. Miden qué tan rápido los usuarios pueden interactuar con un sitio web y qué resultados obtienen en función de su búsqueda. Core Web Vitals funciona como señales que evalúan qué tan fácil y fluido es para los visitantes del sitio navegar a través de un sitio.

Cuando mejore su sitio y la experiencia del usuario, la experiencia de su página obtendrá una puntuación más alta utilizando las métricas de Core Web Vitals. Google identifica tres métricas de Core Web Vitals que los propietarios de sitios deben conocer e incorporar. Estos se enumeran a continuación:

Carga: también conocida como pintura con contenido más grande (LCP), la carga mide la velocidad a la que se cargan y muestran los elementos más grandes en un sitio. Estos elementos incluyen animaciones, videos, texto, imágenes y otros.

Interactividad: Google llama a esto Cambio de diseño acumulativo (CLS) y garantiza que las páginas de un sitio web no tengan características inesperadas o movimientos confusos que puedan distraer o molestar a los usuarios cuando consumen el contenido de su sitio.

Estabilidad visual: esto se conoce técnicamente como First Input Delay (FID) y refleja el nivel de capacidad de respuesta de las páginas de un sitio cuando los visitantes del sitio interactúan por primera vez con ellas. FID también mide la velocidad a la que un navegador puede generar resultados para los usuarios en su sitio.

Cómo mejorar Core Web Vitals en su sitio web

Lo primero que debe hacer es ejecutar un análisis rápido del rendimiento del sitio web para ver cómo le va a su sitio web en las métricas fundamentales de la web. Puedes utilizar diferentes herramientas para este análisis, incluyendo Google Search Console y Page Speed ​​Insights, entre otras. Después de ejecutar el análisis, es posible que descubra que necesita implementar algunos de los siguientes consejos para ayudarlo a mejorar su sitio.

• Reducir la ejecución de JavaScript

Una calificación FID baja significa que la página de su sitio web interactúa con los visitantes durante más de 300 milisegundos. Cuando reduce y optimiza su ejecución de JavaScript, reduce el período de tiempo entre el momento en que su navegador ejecuta códigos JavaScript. El resultado de esto es un plazo de ejecución reducido. Google recomienda diferir JavaScript no utilizado para reducir la ejecución. Para saber si su sitio tiene algún JS sin usar, siga los pasos a continuación:

• Vaya a su sitio y haga clic derecho en cualquier lado y luego seleccione "Inspeccionar"

• Haga clic en la pestaña "Fuentes" y marque los tres puntos en la parte inferior. Agregue una herramienta de "Cobertura" y haga clic en la función de carga. Espere a que se complete la carga y podrá ver el volumen de JS no utilizado en su página.

Con este conocimiento, puede comenzar a reducir la ejecución de JS. Una forma de reducir la ejecución es usar la división de código. ¿Como funciona esto? Divide el paquete de JavaScript en partes más pequeñas. Los JS incluidos son archivos combinados que se agrupan para evitar que se necesiten demasiadas solicitudes HTTP para cargar una página web.

Comprimir y optimizar imágenes

Para muchos sitios web, las imágenes son los elementos más grandes de sus páginas. Para asegurarse de que su sitio web pase las métricas de carga, debe considerar optimizar las imágenes en su sitio. Con esto, tu página web se vuelve más liviana y la velocidad de carga aumentará significativamente.

Una página más ligera también mejorará la experiencia del usuario, la puntuación LCP y la clasificación en los resultados de los motores de búsqueda. Para reducir el tamaño de su página, comprima las imágenes usando una herramienta como Tiny JPG. Reducir el tamaño total de su página no afectará la resolución y la calidad, pero mejorará los resultados de LCP de su sitio.

Le recomendamos que utilice el formato PNG para gráficos y JPG para imágenes apaisadas. Además de comprimir imágenes, también puede activar CDN (Red de entrega de contenido) para las imágenes de su sitio.

Content Delivery Network es un grupo de servidores en todo el mundo que almacena contenido de la web. Estos servidores están distribuidos en diferentes ubicaciones; las imágenes se pueden entregar desde el servidor más cercano al usuario de una manera más rápida.

Implementar carga diferida

La implementación de la carga diferida es muy importante cuando se muestran imágenes en su sitio. Cuando utiliza esta técnica, su puntaje de vitales web central y la experiencia del usuario en su sitio no se verán afectados negativamente. Entonces, ¿qué es la carga diferida? La carga diferida permite que su sitio cargue imágenes en el mismo momento en que un usuario se desplaza hacia abajo en la página. Esto garantiza que la velocidad de carga de su sitio no se vea comprometida y que pueda lograr un nivel de puntuación LCP superior. Hay muchos beneficios asociados con la carga diferida. Incluyen:

• Rendimiento mejorado del sitio

• Restricción de uso de ancho de banda

• SEO mejorado en el sitio

• Retenga a los visitantes del sitio y minimice la tasa de rebote

Si opera un sitio web con páginas que contienen muchos videos, animaciones, imágenes y otros elementos pesados, es importante utilizar la carga diferida. Después de implementar este consejo, puede comparar su puntaje LCP anterior con el nuevo que obtiene después de implementar la carga diferida.

Use dimensiones apropiadas para incrustaciones e imágenes

La puntuación CLS superior a 0,1 se considera deficiente. Los principales culpables de una puntuación tan baja son los elementos pesados, como incrustaciones, anuncios e imágenes sin dimensión. Para mejorar la puntuación CLS de su sitio, preste atención a las dimensiones. Cuando utiliza un ancho y alto precisos para imágenes e incrustaciones, se vuelve más fácil para el navegador asignar el volumen correcto de espacio en la página durante el proceso de carga. Asegúrese de establecer las dimensiones adecuadas para las imágenes e incrustaciones al insertar videos de YouTube en su sitio web. Aquí se explica cómo cambiar el tamaño de los videos de YouTube para mostrarlos en su sitio.

• Vaya a YouTube y abra el video que desea incrustar en su sitio.

• Busque el botón de compartir y seleccione la opción <> Incrustar.

• Verá todos los detalles sobre el video, incluida la dimensión. Copie el código y péguelo en el backend de su sitio. Esto lo cambiará al ancho y alto correctos para que encaje en su sitio correctamente.

Pensamientos finales

Estos son los principales consejos que puede utilizar para mejorar los principales elementos vitales de su sitio web. En esta publicación, hemos analizado los conceptos básicos de los principales web vitals y los consejos que puede emplear para mejorar sus puntajes. Las puntuaciones mejoradas significan que su clasificación aumentará en los resultados de búsqueda y habrá una tasa significativa en la tasa de rebote en su sitio.