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.

Consejo
La verdad sea dicha, creo que esta API no es tan importante con la API de Search Console en Screaming Frog. Pero aun así, creo que es interesante ya que nos podemos llevar interesantes sorpresas.

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.

pagespeed screaming frog

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í.

spi pagespeed con Screaming frog

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).

Crear API en Google Cloud

Una vez creada, debes copiarla y llevarla a Screaming Frog.

como crear api en Google Cloud

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).

Consejo
En base a la directiva Mobile First Index de Google, te aconsejo usar el dispositivo Móvil, mas allá de por el hecho de que el rendimiento suele ser peor.

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.
Consejo
En base a la información de arriba tienes bastante con lo que trabajar, y si alguna no pasa la prueba, con el botón derecho ya podrás ampliar información y verlo en más detalle.

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.

¡No te quedes atrás en Google!

Únete a mi lista y recibe tips de SEO periódicamente.

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.

conectar screaming frog con page speed

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.

screaming frog core web vitals

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.

Page speed con screaming frog

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.

comprobar wpo en Screaming frog

De esta forma verás los resultados en mayor detalle.

wpo page speed insights

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.

Sergio Canales SEO

Si has llegado hasta aquí… ¡Apúntate a mi Newsletter y sigue aprendiendo cada semana sobre SEO!

Sergio Canales

Ingeniero industrial y amante del SEO para nichos. Me encanta crear proyectos, posicionalos y monetizarlos

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir