Qué es Core Web Vitals

Son un conjunto de métricas y factores específicos que Google usa, para analizar y considerar la experiencia de un usuario dentro de una página web.

Cuáles son los factores principales de Core Web Vitals

Los Core Web Vitals de Google, tienen en cuenta tres factores principales: 

El tiempo de carga (LCP – Largest Contentful Paint), interactividad de la página web (FID – First Input Delay), y visual (CLS – Cumulative Layout Shift); indicadores que además hacen parte de los informes que nos arroja Search Console y herramientas de análisis como Google PageSpeed Insight ¹

• Tiempo de carga.
  Core web Vitals LCP: (Largest contentful paint)
  

Indicador que mide el rendimiento de carga de la página web. 

Éste se centra en el tiempo en que se demora en cargar el contenido más grande que surge en la pantalla. 

Por ejemplo: los videos o imágenes en nuestro sitio web.

Lo ideal es que para entregar una buena experiencia de usuario y cumplir con los lineamientos de Google, las imágenes o bloques de texto más grandes (LCP) carguen en 2.5 segundos, si tarda más tiempo, se considera un desempeño pobre o que necesita mejoras.

²
De las 5 columnas del ejemplo (carga secuencial del sitio web), la imagen es el elemento más grande (aspecto visual más grande para Google Analytics).

³

En este caso el texto es el aspecto más grande que la imagen (Google considerará como elemento más grande: los bloques de texto).
*Recuerda, evaluar no solo los tiempos de carga de tu página web, sino también de tu versión mobile LCP.

• Interactividad de la página web:
  Core Web Vitals FID (First input delay)

Indicador que mide la interactividad de la página. ¿Realmente tu página web está lista para ser usada al momento que el usuario ingresa?
Este factor tiene que ver con la validación que le da Google al sitio web, con base en el tiempo que está disponible la página para que el usuario pueda interactuar con él.
Por ejemplo: cuando en un ecommerce el usuario hace clic varias veces en un enlace, y el botón aún no está disponible, (interactuando por primera vez en la página).
Se convierte en una razón para calificar de forma negativa la página, ya que está debe cargar en 100 milisegundos y en caso de que presente demoras, hay que revisar cómo se está afectando la experiencia de usuario y si hay problemas en el código javascript o en recursos adicionales.

Consejo: revisa qué funcionalidades tienes en tu sitio web y que pueden estar haciendo que tu página esté lenta ¿Tienes activos el chatbot o ciertos plugins en todas las secciones de tu web?

• Visuales
  Core Web Vitals CLS – Cumulative Layout Shift

Es un indicador que analiza la estabilidad visual de la web.  Tiene que ver con la experiencia del usuario y tiempos de carga.
Así lo que hace Google es analizar el tamaño del elemento que se desplaza y la distancia de desplazamiento. Si resulta muy grande la distancia entre el movimiento inicial y final, la clasificación será negativa.

(manteniendo un CLS menor de 0.1 segundo).

⁴

Por ejemplo: si en una página web, al ingresar el usuario a un comercio electrónico, el botón de compra se va desplazando hacia abajo; se considera una acción negativa, ya que los elementos no deberían moverse “tanto” desde su ubicación inicial.

*Si estás dentro del mundo SEO, vas a tener que aprender acerca de la ejecución de los recursos, elementos web y trabajar con el equipo de desarrollo y front end del sitio web.

Cómo mejorar la puntuación de los Core WebVitals:

A continuación, te compartimos los consejos que estamos seguros van a funcionar para tu empresa:

• Intenta no usar imágenes de fondo en tu sitio web. Recuerda que la mayoría de las personas ingresan desde sus dispositivos móviles, y agregar fondo tiene un impacto muy bajo en la experiencia de usuario mobile.
• Reduce el contenido pesado (menos carruseles de imágenes, recursos gráficos o videos), en la primera parte de tu página web o también llamado: above the fold

⁵

• Haz uso de la: Carga diferida o lazy loading

Este tipo de tecnología o recurso funciona cuando solamente la persona hace scroll en la página web. Solo hasta ese momento se carga el contenido completo.

De hecho, la mayoría de los sitios web hacen que su carga sea simultánea y eso ocasiona que la web sea lenta.

• Utiliza imágenes webP:

Este tipo de imágenes existen hace mucho tiempo, y es un formato de imagen diseñado para la web, pero con un uso poco común.

El punto, es que ahora se usa en web JPG o PNG. Pero debido a las distintas actualizaciones que ha tenido Google para este 2021, puede ocurrir que se vuelva a usar este formato. 

• El peso y tamaño de las imágenes es importante. Por ejemplo: Recuerda no cargar las fotografías directamente desde la cámara fotográfica, esto es una acción negativa para tiempos de carga en el sitio web.  
• Busca ayuda especializada para la optimización CSS y javascript de tu sitio web.
• Recurre a las bibliotecas de JavaScript. Allí podrás encontrar un buen recurso. 
• Incluye solo las fuentes necesarias. Si en tu página se están precargando de 4 a 5 fuentes, la página se hará más lenta.
  
• Usa CDNS, plataformas y servidores de terceros, para reducir tiempos de carga de las imágenes y videos.
  
  

Si quieres conocer más información acerca de los Core Web Vitals y detalles de esta nueva iniciativa de Google. Haz clic aquí. 

¹ Einatec. Core Web Vitals qué es y cómo mejorarlo. Extraído en: https://einatec.com/core-web-vitals-que es/#:~:text=Core%20Web%20Vitals%20es%20un,impacto%20directo%20en%20el%20posicionamiento.

²Hazlo con WordPress. Core Web Vitals: que son, cómo mejorarlas y optimizar tu WordPress. Extraído en: https://www.hazloconwp.com.mx/optimizacion/core-web-vitals-que-son-preparar-wordpress/ 

³ Hazlo con WordPress. Core Web Vitals: que son, cómo mejorarlas y optimizar tu WordPress. Extraído en: https://www.hazloconwp.com.mx/optimizacion/core-web-vitals-que-son-preparar-wordpress/ 

⁴Dos al cubo.Core Web Vitals: ¿Qué es el Cumulative Layout Shift (CLS)?  Extraído en: https://www.dosalcubo.com/core-web-vitals-que-es-cls-thinkindot

⁵ Ryte Wiki. Above the fold. Extraído en: https://es.ryte.com/wiki/Above_the_Fold