Usando la API de PageSpeed Insights con Javascript

Kike.pe
Zurvin

--

A quién no le han pedido alguna vez entregar un reporte del rendimiento de una web. Y si ya te ha tocado realizarlo seguro ya pasaste por muchas webs como gtmetrix.com o por la ya mencionada PageSpeed Insights de Google.

Hace un par de meses me pidieron generar un reporte semanal del rendimiento de la web, con 3 aspectos principales:

  • Tiempo de carga de la web
  • Tamaño de la web en Mb
  • Número total de peticiones requests

Cada semana tenía que entrar a estas páginas para generar un reporte y si se quiere trabajar con más de una web la tarea toma más tiempo.

Mis amigos ya me conocen que para estos tipos de trabajos prefiero optimizar y hacer que todo se haga de manera automática.

Entonces pensé: Y si hay alguna manera de que estos reportes se hagan solos. Y si se pudiera sacar el reporte diariamente sin tener que entrar a dichas web.

Investigando vi que Google tiene habilitada esta api en mención el cual explico como implementarlo para analizar una web con javascript.

De seguro esta imagen te resulta familiar. Esta página mide el rendimiento total de la web que estemos analizando y la información que provee es muy extensa como el tiempo de carga de la web, imagen con el peso más alto y hasta qué archivos javascript o css se pueden minimizar para mejorar el rendimiento.

Empecemos, con un simple fetch invocamos al api:

Se requiere crear una apiKey, lo puedes hacer en el link que dejo al final del post o en la página de credenciales y luego reemplazarlo en el código. El json en el console muestra toda la información del resultado del análisis. La consulta puede demorar un poco ya que la data resultante contiene demasiada información.

Demo:

Dejo el demo que hice en stackblitz solo con información relevante. Lo ideal es generar el apikey y añadirlo a la url de consulta como key=XXXXXXXXXX

Este puede ser un punto de partida para diferentes desarrollos y necesidades.

Actualmente trabajo en un servicio en NodeJS que haga estas consultas automáticas a cada hora y guarde la información en una BD SQL Server.

Muy aparte estoy trabajando en el front con Angular para mostrar esa data a modo de dashboard con gráficos de Google Charts para hacer comparaciones entre fechas y más.

Como digo, las aplicaciones son infinitas y quiero que tomes este post como punto de partida a algo mucho más grande. ¡El cielo es el límite!

Hasta el próximo post y recuerda nunca dejes de aprender.

👨🏻‍💻 Enjoy code!

--

--

Kike.pe
Zurvin
Editor for

Fullstack Developer Analyst. Javascript lover and on the path of continuous learning.