Google ofrece la API de PageSpeed Insights para ayudar a los profesionales y desarrolladores de SEO mediante la combinación de datos del mundo real con datos de simulación, proporcionando datos de tiempo de rendimiento de carga relacionados con las páginas web.
La diferencia entre Google PageSpeed Insights (PSI) y Faro es que PSI involucra datos del mundo real y de laboratorio, mientras que Lighthouse realiza una simulación de carga de página modificando la conexión y el agente de usuario del dispositivo.
Otro punto de diferencia es que PSI no proporciona ninguna información relacionada con la accesibilidad web, SEO o aplicaciones web progresivas (PWA), mientras que Lighthouse proporciona todo lo anterior.
Por lo tanto, cuando usamos la API de PageSpeed Insights para la prueba de rendimiento de carga masiva de URL, no tendremos ningún dato de accesibilidad.
Sin embargo, PSI proporciona más información relacionada con el rendimiento de la velocidad de la página, como «Tamaño DOM», «Elemento secundario DOM más profundo», «Recuento total de tareas» y «Contenido DOM cargado».
Una ventaja más de la API de PageSpeed Insights es que otorga nombres diferentes a las «métricas observadas» ya las «métricas reales».
En esta guía, aprenderá:
- Cómo crear un script de Python de nivel de producción.
- Cómo usar las API con Python.
- Cómo construir marcos de datos a partir de respuestas de API.
- Cómo analizar las respuestas de la API.
- Cómo analizar las URL y procesar las respuestas de las solicitudes de URL.
- Cómo almacenar las respuestas de la API con la estructura adecuada.
A continuación se muestra un resultado de ejemplo de la llamada a la API de Page Speed Insights con Python.
Captura de pantalla del autor, junio de 2022
Bibliotecas para usar la API de PageSpeed Insights con Python
Las bibliotecas necesarias para usar la API de PSI con Python se encuentran a continuación.
- Herramientas publicitarias recupera las URL de prueba del mapa del sitio de un sitio web.
- pandas es construir el marco de datos y aplanar la salida JSON de la API.
- Las solicitudes son para realizar una solicitud al punto final de API específico.
- JSON es tomar la respuesta de la API y colocarla en el punto del diccionario específicamente relacionado.
- Datetime es para modificar el nombre del archivo de salida específico con la fecha del momento.
- URLlib es analizar la URL del sitio web del sujeto de prueba.
¿Cómo usar la API de PSI con Python?
Para usar la API de PSI con Python, siga los pasos a continuación.
- Obtenga una clave API de PageSpeed Insights.
- Importe las bibliotecas necesarias.
- Analice la URL del sitio web del sujeto de prueba.
- Tome la fecha del momento para el nombre del archivo.
- Tome las URL en una lista desde un mapa del sitio.
- Elija las métricas que desee de la API de PSI.
- Cree un For Loop para tomar la respuesta de la API para todas las URL.
- Construya el marco de datos con las métricas de la API de PSI elegidas.
- Muestra los resultados en forma de XLSX.
1. Obtenga la clave API de PageSpeed Insights
Utilizar el API de PageSpeed Insights Documentación para obtener la API Key.
Haga clic en el botón «Obtener una clave» a continuación.
Imagen de developer.google.com, junio de 2022
Elija un proyecto que haya creado en Google Developer Console.
Imagen de developer.google.com, junio de 2022
Habilite la API de PageSpeed Insights en ese proyecto específico.
Imagen de developer.google.com, junio de 2022
Deberá utilizar la clave de API específica en sus solicitudes de API.
2. Importa las bibliotecas necesarias
Use las líneas a continuación para importar las bibliotecas fundamentales.
import advertools as adv
import pandas as pd
import requests
import json
from datetime import datetime
from urllib.parse import urlparse3. Analice la URL del sitio web del sujeto de prueba
Para analizar la URL del sitio web en cuestión, use la estructura de código a continuación.
domain = urlparse(sitemap_url)
domain = domain.netloc.split(".")[1]La variable «dominio» es la versión analizada de la URL del mapa del sitio.
El «netloc» representa la sección de dominio de la URL específica. Cuando lo dividimos con el “.” toma la «sección central» que representa el nombre de dominio.
Aquí, «0» es para «www», «1» para «nombre de dominio» y «2» es para «extensión de dominio», si lo dividimos con «.»
4. Tome la fecha del momento para el nombre del archivo
Para tomar la fecha del momento específico de la llamada a la función, use el método «datetime.now».
Datetime.now proporciona la hora específica del momento específico. Utilice el «strftime» con los valores «%Y», «»%m» y «%d». “%Y” es para el año. El «%m» y «%d» son valores numéricos para el mes y el día específicos.
date = datetime.now().strftime("%Y_%m_%d")5. Lleve las URL a una lista desde un mapa del sitio
Para tomar las URL en forma de lista desde un archivo de mapa del sitio, use el bloque de código a continuación.
sitemap = adv.sitemap_to_df(sitemap_url) sitemap_urls = sitemap["loc"].to_list()
Si lees el Auditoría de estado del mapa del sitio de Pythonpuede obtener más información sobre los mapas del sitio.
6. Elija las métricas que desee de la API de PSI
Para elegir las propiedades JSON de respuesta de la API de PSI, debe ver el propio archivo JSON.
Es muy relevante para la lectura, el análisis y el aplanamiento de objetos JSON.
Incluso se relaciona con SEO semánticogracias al concepto de “grafo dirigido” y datos estructurados “JSON-LD”.
En este artículo, no nos centraremos en examinar las jerarquías JSON de la respuesta API de PSI específica.
Puede ver las métricas que he elegido recopilar de la API de PSI. Es más acomodado que la salida predeterminada básica de la API de PSI, que solo proporciona las métricas básicas de Web Vitals, o la interacción del índice de velocidad para la siguiente pintura, el tiempo hasta el primer byte y la primera pintura con contenido.
Por supuesto, también da «sugerencias» al decir «Evite encadenar solicitudes críticas», pero no es necesario poner una oración en un marco de datos.
En el futuro, estas sugerencias, o incluso cada evento de cadena individual, sus valores de KB y MS se pueden tomar en una sola columna con el nombre «psi_suggestions».
Para empezar, puedes consultar las métricas que he elegido, y una parte importante de ellas serán las primeras para ti.
Métricas de la API de PSI, la primera sección se encuentra a continuación.
fid = []
lcp = []
cls_ = []
url = []
fcp = []
performance_score = []
total_tasks = []
total_tasks_time = []
long_tasks = []
dom_size = []
maximum_dom_depth = []
maximum_child_element = []
observed_fcp = []
observed_fid = []
observed_lcp = []
observed_cls = []
observed_fp = []
observed_fmp = []
observed_dom_content_loaded = []
observed_speed_index = []
observed_total_blocking_time = []
observed_first_visual_change = []
observed_last_visual_change = []
observed_tti = []
observed_max_potential_fid = []Esta sección incluye todas las métricas de velocidad de página fundamentales observadas y simuladas, junto con algunas no fundamentales, como «Contenido DOM cargado» o «Primera pintura significativa.”
La segunda sección de PSI Metrics se centra en los posibles ahorros de tiempo y bytes de la cantidad de código no utilizado.
render_blocking_resources_ms_save = []
unused_javascript_ms_save = []
unused_javascript_byte_save = []
unused_css_rules_ms_save = []
unused_css_rules_bytes_save = []Una tercera sección de las métricas de PSI se enfoca en el tiempo de respuesta del servidor, los beneficios o no del uso de imágenes receptivas, el uso de daños.
possible_server_response_time_saving = []
possible_responsive_image_ms_save = []Nota: la puntuación de rendimiento general proviene de «performance_score».
7. Cree un bucle For para tomar la respuesta API para todas las URL
El ciclo for es tomar todas las URL del archivo del mapa del sitio y usar la API de PSI para todas ellas, una por una. El bucle for para la automatización de la API de PSI tiene varias secciones.
La primera sección de la API de PSI para bucle comienza con la prevención de URL duplicadas.
En los mapas del sitio, puede ver una URL que aparece varias veces. Esta sección lo impide.
for i in sitemap_urls[:9]:
# Prevent the duplicate "/" trailing slash URL requests to override the information.
if i.endswith("/"):
r = requests.get(f"https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url={i}&strategy=mobile&locale=en&key={api_key}")
else:
r = requests.get(f"https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url={i}/&strategy=mobile&locale=en&key={api_key}")Recuerde verificar la «api_key» al final del punto final para la API de PageSpeed Insights.
Compruebe el código de estado. En los mapas del sitio, puede haber direcciones URL de código de estado que no sean 200; estos deben ser limpiados.
if r.status_code == 200:
#print(r.json())
data_ = json.loads(r.text)
url.append(i)La siguiente sección agrega las métricas específicas al diccionario específico que hemos creado antes de «_data».
fcp.append(data_["loadingExperience"]["metrics"]["FIRST_CONTENTFUL_PAINT_MS"]["percentile"])
fid.append(data_["loadingExperience"]["metrics"]["FIRST_INPUT_DELAY_MS"]["percentile"])
lcp.append(data_["loadingExperience"]["metrics"]["LARGEST_CONTENTFUL_PAINT_MS"]["percentile"])
cls_.append(data_["loadingExperience"]["metrics"]["CUMULATIVE_LAYOUT_SHIFT_SCORE"]["percentile"])
performance_score.append(data_["lighthouseResult"]["categories"]["performance"]["score"] * 100)
La siguiente sección se centra en el recuento de «tareas totales» y el tamaño de DOM.
total_tasks.append(data_["lighthouseResult"]["audits"]["diagnostics"]["details"]["items"][0]["numTasks"])
total_tasks_time.append(data_["lighthouseResult"]["audits"]["diagnostics"]["details"]["items"][0]["totalTaskTime"])
long_tasks.append(data_["lighthouseResult"]["audits"]["diagnostics"]["details"]["items"][0]["numTasksOver50ms"])
dom_size.append(data_["lighthouseResult"]["audits"]["dom-size"]["details"]["items"][0]["value"])La siguiente sección toma la «Profundidad DOM» y el «Elemento DOM más profundo».
maximum_dom_depth.append(data_["lighthouseResult"]["audits"]["dom-size"]["details"]["items"][1]["value"])
maximum_child_element.append(data_["lighthouseResult"]["audits"]["dom-size"]["details"]["items"][2]["value"])La siguiente sección toma los resultados de las pruebas específicas observadas durante nuestra API de Page Speed Insights.
observed_dom_content_loaded.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["observedDomContentLoaded"])
observed_fid.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["observedDomContentLoaded"])
observed_lcp.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["largestContentfulPaint"])
observed_fcp.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["firstContentfulPaint"])
observed_cls.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["totalCumulativeLayoutShift"])
observed_speed_index.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["observedSpeedIndex"])
observed_total_blocking_time.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["totalBlockingTime"])
observed_fp.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["observedFirstPaint"])
observed_fmp.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["firstMeaningfulPaint"])
observed_first_visual_change.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["observedFirstVisualChange"])
observed_last_visual_change.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["observedLastVisualChange"])
observed_tti.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["interactive"])
observed_max_potential_fid.append(data_["lighthouseResult"]["audits"]["metrics"]["details"]["items"][0]["maxPotentialFID"])La siguiente sección toma la cantidad de código no utilizado y los bytes desperdiciados, en milisegundos junto con los recursos de bloqueo de procesamiento.
render_blocking_resources_ms_save.append(data_["lighthouseResult"]["audits"]["render-blocking-resources"]["details"]["overallSavingsMs"])
unused_javascript_ms_save.append(data_["lighthouseResult"]["audits"]["unused-javascript"]["details"]["overallSavingsMs"])
unused_javascript_byte_save.append(data_["lighthouseResult"]["audits"]["unused-javascript"]["details"]["overallSavingsBytes"])
unused_css_rules_ms_save.append(data_["lighthouseResult"]["audits"]["unused-css-rules"]["details"]["overallSavingsMs"])
unused_css_rules_bytes_save.append(data_["lighthouseResult"]["audits"]["unused-css-rules"]["details"]["overallSavingsBytes"])La siguiente sección es proporcionar los beneficios de la imagen receptiva y el tiempo de respuesta del servidor.
possible_server_response_time_saving.append(data_["lighthouseResult"]["audits"]["server-response-time"]["details"]["overallSavingsMs"])
possible_responsive_image_ms_save.append(data_["lighthouseResult"]["audits"]["uses-responsive-images"]["details"]["overallSavingsMs"])La siguiente sección es hacer que la función continúe funcionando en caso de que haya un error.
else:
continueEjemplo de uso de la API de Page Speed Insights con Python para pruebas masivas
Para usar los bloques de código específicos, colóquelos en una función de Python.
Ejecute el script y obtendrá 29 métricas relacionadas con la velocidad de la página en las columnas a continuación.
Captura de pantalla del autor, junio de 2022
Conclusión
La API de PageSpeed Insights proporciona diferentes tipos de métricas de rendimiento de carga de página.
Demuestra cómo los ingenieros de Google perciben el concepto de rendimiento de carga de la página y posiblemente usan estas métricas como un punto de vista de clasificación, UX y comprensión de la calidad.
El uso de Python para pruebas de velocidad de páginas masivas le brinda una instantánea de todo el sitio web para ayudar a analizar la posible experiencia del usuario, la eficiencia del rastreo, la tasa de conversión y las mejoras en la clasificación.
Más recursos:
Imagen destacada: Dundanim/Shutterstock
Consultar el artículo en la publicación original