API de Page Speed para Screaming Frog (Core Web Vitals)
Dime si nunca has hecho esto: para saber cómo de rápido carga tu web, has pasado la home por Page Speed, has visto el resultado y has estimando que ese valor aplica a toda la web.
Bueno, quizá tu no, pero yo lo he hecho durante mucho tiempo. He tomado la home y quizá alguna URL más y en base a sus resultados lo he extrapolado a toda la web.
Lo cual es un grave error porque cada URL tiene un tiempo de carga totalmente distinto que la otra. Y la forma correcta de saber exactamente cómo de rápida o lenta carga toda tu web es pasando toda tu web por Screaming Frog, conectada a la API de Page Speed.
Por qué usar la API de Google Page Speed
Configurar la API de Google Page Speed en Screaming Frog es bastante interesante ya que nos permite saber el rendimiento que tiene nuestra web de manera granular en lo que a Core Web Vitals (CWV) se refiere. Por ello, en este artículo te explico cómo configurarlo y en qué parámetros te tienes que fijar.
Y es que, con esta configuración podemos saber de manera granular qué rendimiento están teniendo cada una de las URLs de nuestro sitio, analizando valores como el LCP (Largest Contentful Paint), el FID (First Input Delay) o el CLS (Cumulative Layaot Shift).
Es cierto que en Google Search Console tenemos un módulo llamado experiencia donde podemos ver también esta información. Pero si eres un apasionado o apasionada de las filas, te aconsejo mejor usar Scremaing Frog.
Configuración de la API de Page Speed con Screaming Frog
Para configurar la API de PagedSpeed en Screaming Frog tenemos que ir a Configuración > Conectar APIs > PageSpeed Insights.
En la ventana que se abre debes obtener la API key para poder ejecutar la herramienta. Para ello, haz clic en el botón de aquí.
Tras ello, haz clic en conectar.
Si el enlace de arriba no te funciona puedes ir directamente a esta URL de Google Cloud y crear la API manualmente (previamente debes haber creado un proyecto).
Una vez creada, debes copiarla y llevarla a Screaming Frog.
Tras ello, debes ir a la pestaña de métricas para elegir las que quieres traer, así como el dispositivo en base al cual traerlas (móvil u ordenador).
Por otro lado, tenemos una sección de métricas monstruosamente grande a seleccionar. Sé que ante la duda, mucha gente marca todas pero no te lo recomiendo porque luego no hay forma de meterle mano a esto.
Yo te aconsejo simplemente marcar las siguientes métricas en Lighthouse Metrics:
- Puntuación de rendimiento.
- First Contentful Paint tiempo (seg).
- Speed Index tiempo (seg).
- Largest Contentful Paint tiempo (seg).
- Total Blocking Time (ms).
- Cumulative Layout Shift.
Ahora, si quieres profundizar un poco más, te indico las siguientes que veo interesantes:
Overview
- Ahorro de tamaño total.
- Ahorro de tiempo en total (ms).
- Total de solicitudes.
- HTML tamaño.
- Imagen tamaño.
- Javascript tamaño.
- Fuente tamaño.
- Multimedia tamaño.
- Otros tamaño.
- Terceros tamaño.
CrUx Metrix
- Evaluación de Core Web Vitals.
- CrUX Largest Contentful Paint tiempo (seg).
- CrUX Interacticion to Next Paint (ms).
- CrUX First Contentful Paint tiempo (seg).
Lighthouse Metrics
- Puntuación de rendimiento.
- First Contentful Paint tiempo (seg).
- Speed Index tiempo (seg).
- Largest Contentful Paint tiempo (seg).
- Total Blocking Time (ms).
- Cumulative Layout Shift.
Oportunidades
- Ahorro al eliminar los recursos que bloquean el renderizado.
- Ahorro al posponer las imágenes fuera de la pantalla (ms).
- Ahorro al coidificar imágenes con eficancia (ms).
- Ahorro al minimizar CSS (ms).
- Reducir el ahorro de CSS no utilizado (ms).
- Ahorro al mostrar imágenes en formato de última generación (ms).
- Ahorro al activar la compresión de texto.
- Ahorro al conectarse previamente a los orígenes requeridos.
- Tiempo de respuesta del servidor (TTFB).
Diagnóstico
- Los elementos de imagen no tienen anchura y altura explícitas.
- Evita los grandes cambios de disposición.
Resultados de la API de PageSpeed
Una vez ha terminado de ejecutarse Screaming Frog, podemos encontrar una ventana resumen con información interesante obtenida del análisis, así como las URLs afectadas y su relación en porcentaje con el total.
Así mismo, también podemos ir a la propia pestaña de pagespeed para ver los resultados directamente, con cada una de las métricas marcadas. Para ello, tenemos que ir a la pestaña de PageSpeed.
Y en este momento se nos abrirá una ventana como la que ves en la imagen de abajo. Con dicho tabla y el panel de la derecha puedes empezar ya a navegar por las diferentes métricas y puntos de mejora.
Así mismo, si quieres profundizar en las métricas de una URL puedes clicar en ella con el botón secundario e ir a velocidad > Page Speed Insights.
De esta forma verás los resultados en mayor detalle (en este caso, con buen resultado gracias a lo bien optimizada que está esta web con el tema ASAP).
Y con eso ya hemos terminado el tutorial la API de PageSpeed con Screaming Frog. Con esto, y la API de Google Search Console creo que tienes mucha información para optimizar y mejorar tu web o blog.
Como siempre, espero que te haya servido de gran utilidad.
Si has llegado hasta aquí… ¡Apúntate a mi Newsletter y sigue aprendiendo cada semana sobre SEO!
Deja una respuesta