{ Pasión por el código }

© Blog Ailon Webs

3 formas de medir Web Vitals en tu página web

Por G. Lara & M. Soutto

medir web vitals
3 formas de medir Web Vitals en tu página web

Uno de los grandes cambios en el SEO de 2021 va a ser la puntuación de Web Vitals de tu página web. A partir de mayo 2021 esta puntuación va a influir en el posicionamiento de tu página web en los resultados de búsqueda. Aún no se sabe cuanto va a afectar pero lo que sí está claro que cuanto mejor puntuación en los Web Vitals tenga tu página web mejor será la experiencia de usuario y mejor será la valoración de Google de tu web.

¿Qué son las Web Vitals?

Son una nueva iniciativa de Google para proporcionarnos una guía unificada que identifican las señales de calidad que son esenciales para brindar una excelente experiencia de usuario en una página web.

Son una serie de métricas que miden muchos aspectos de una página web, para simplificar algo las cosas Google se va a fijar en tres: las Core Web Vitals (principales métricas vitales).

Las Core Web Vitals son tres

  • Carga de la página
  • Tiempo hasta que la página es interactiva
  • Estabilidad visual

Puedes leer todo sobre que son las métricas vitales o Web Vitals en este otro artículo de nuestro blog: Las métricas vitales para medir la experiencia de usuario en una página web

¿Por qué medir Web Vitals en mi web es importante?

Una de las tendencias SEO de 2021 es que Google va a añadir las métricas de experiencia de usuario en las páginas web como uno más de los cientos de indicadores que Google tiene en cuenta al generar resultados de búsqueda. Esto va a afectar al posicionamiento de páginas web en buscadores a partir del mes de mayo 2021.

¿Cómo medir Web Vitals en una página web?

Hay 3 maneras principales para hacerlo:

  • La página web de PageSpeed Insights
  • La extensión de Chrome Lighthouse
  • La API de PageSpeed Insights

1. Medir Web Vitals en la página web de PageSpeed Insights

Esta es la manera más simple de las tres, tienes que seguir estos pasos:

  1. Copiar el url (dirección) de una de tus páginas web.
  2. Ir a este enlace https://developers.google.com/speed/pagespeed/insights/ y pegar el url copiado en el formulario.
  3. Hacer clic en Analizar, esperas un momento y ves el resultado.

Es importante entender que hay 2 puntuaciones generales: una para ordenador y otra para movil. Debajo de la caja del formulario del url verás las dos pestañas Móvil y Ordenador. Normalmente la puntuación para móvil es más baja ya que Google tiene otras métricas para movil.

A continuación, te mostramos dos capturas de pantallas de mediciones reales realizadas sobre una de nuestras páginas.

medir web vitals
Resultado de PageSpeed para ordenador.
medir web vitals
Resultado de PageSpeed para el móvil.

En la parte inferior de esta página web verás los segundos de carga por cada Web Vital (métrica vital) y cuales puedes mejorar.

También puedes ver como afecta cada Web Vital a la puntuación general de la página, para verlo debes hacer clic en el enlace "See calculator". Es interesante porque puedes variar las puntuaciones para ver cuales afectan más a esta página web en concreto para así decidir qué mejorar primero.

medir web vitals
Captura de pantalla de la calculadora de Lighthouse.

También es interesante ver la serie de fotogramas que te muestra la secuencia de carga de tu página web, así puedes hacerte una idea de como carga a cámara lenta y valorar si es como queremos que cargue o hay que hacer cambios.

2. Medir Web Vitals con la extensión de Chrome Lighthouse

Para medir Web Vitals de esta manera necesitas usar el navegador Google Chrome e instalar la extension LightHouse.

Una vez que tengas la extensión instalada:

  1. Navega a la página web que quieres medir en Google Chrome.
  2. Abre Chrome DevTools, usa las combinaciones de teclas Ctrl+Mayúscula+I (Windows) o Cmd+Opción+I (Mac).
  3. Elige las opciones y genera el informe.

En el panel de Chrome DevTools verás una serie de opciones para generar el informe que necesites. Para medir las core Web Vitals recomendamos que elijas "Performance" y que estudies los informes de Mobile y de Desktop (móvil y ordenador).

medir web vitals
Opciones para medir Web Vitals con la extensión de Chrome Lighthouse.

A continuación puedes ver como se vería el resultado de una medición de una de nuestras páginas web usando esta extensión.

medir web vitals
Resultado del informe con la extensión de Chrome Lighthouse.

La ventaja de esta forma de medición de Web Vitals es que puedes hacerlo también en un servidor local en tu mismo ordenador, pero esto sería solo para opciones de desarrollo. Las mediciones importantes son las reales, que son en el entorno web de producción.

3. Medir Web Vitals con la API de PageSpeed Insights

Google nos proporciona una API para medir las Web Vitals. Esta opción es solo para desarrolladores y programadores web, ya que hay que tener unos conocimientos generales sobre la interfaz de línea de comandos y sobre el desarrollo web.

¿Qué es una API?

Una API es una Interfaz de programación de aplicaciones, del ingés Application Programming Interface, es un conjunto de subrutinas, funciones y procedimientos que ofrece cierta biblioteca para ser utilizado por otro software como una capa de abstracción.

Las instrucciones de instalación están en la página web de la API.

La API te devuelve un archivo en formato JSON con todas la pruebas realizadas y las puntuaciones correspondientes. Al igual que las otras herramientas hay un archivo JSON para las pruebas de ordenador y otro de móvil.

¿Qué es el formato JSON?

JSON es un acrónimo de JavaScript Object Notation en inglés que significa "notación de objeto de JavaScript". Es un formato de texto sencillo para el intercambio de datos.

medir web vitals
Parte del código del archivo JSON de respuesta de la API.

Es nuestra opción preferida ya que con ella podemos hacer mediciones generales a todas las urls que componen la página web de un dominio y así sacar conclusiones como ¿cuál es la página más lenta del dominio? ¿qué arreglo general tendrá el máximo impacto en las métricas de todo el dominio? Así podemos mejorar mucho la puntuación Web Vital de un dominio web para mejorar la experiencia de usuario en la página web y el posicionamiento en buscadores.

medir web vitals
Captura de pantalla visualizando parte de la herramienta creada por Ailon Webs para medir Web Vitals.

Conclusiones

Web Vitals va a generar un impacto en como se miden y se desarrollan páginas web a partir de 2021. Es importante comenzar a medir la puntuación de Web Vitals en tu página web y si es necesario planificar como mejorar la puntuación. Debes tener en cuenta que todos los cambios conllevan un tiempo variable de espera hasta que Google los verifica.

Google va a realizar mediciones a nivel de todo el dominio así que medir páginas puntuales no será suficiente, es necesario medir todas las url de un sitio web y valorar si se necesitan mejoras.

En este artículo hemos explicado 3 maneras de medir Web Vitals en tu página web. Si no tienes tiempo o quieres un informe general de la situación de toda tu página web puedes consultarnos y te podemos ofrecer una auditoría completa con la medición de Web Vitals de tu página web, con recomendaciones de mejora. Es importante actuar ya, Google va a incluir las Web Vitals en su algoritmo de posicionamiento y esto puede afectar a los resultados de tu página web.

Consejos

  • Mide las métricas vitales de tu página web.
  • Realiza mediciones en ordenador y también en móvil.
  • No te limites a unos pocos urls, todas las urls cuentan para Google.
  • Google ya ha dicho que medirá TODAS las urls, incluso las que no estén en el Sitemap de tu web o bloqueadas con el robots.txt.
  • Intenta que todas las urls de tu página web estén en verde o lo más cerca posible para no perder posicionamiento en buscadores.
  • Usa profesionales para obtener los mejores resultados, puedes contactarnos, estaremos encantados de atenderte y ayudarte a conseguir los mejores resultados para tu negocio online.

Fuentes

  • Web vitals https://web.dev/learn-web-vitals/
  • Tools for Web Developers. Lighthouse.https://developers.google.com/web/tools/lighthouse
  • Empezar a utilizar la API de PageSpeed Insights https://developers.google.com/speed/docs/insights/v5/get-started

Recibe nuestras promociones

Por favor escriba un email válido
No ha leído y aceptado el aviso de protección de datos

Categorías: Posicionamiento en buscadores

Etiquetas: Web Vitals, seo 2021