Proves de rendiment de càrrega massiva amb l’API PageSpeed ​​Insights i Python

Google ofereix l’API PageSpeed ​​Insights per ajudar els professionals i desenvolupadors de SEO barrejant dades del món real amb dades de simulació, proporcionant dades de temps de rendiment de càrrega relacionades amb les pàgines web.

La diferència entre Google PageSpeed ​​Insights (PSI) i Far és que PSI inclou dades del món real i de laboratori, mentre que Lighthouse realitza una simulació de càrrega de pàgines modificant la connexió i l’agent d’usuari del dispositiu.

Un altre punt de diferència és que PSI no proporciona cap informació relacionada amb l’accessibilitat web, el SEO o les aplicacions web progressives (PWA), mentre que Lighthouse ofereix tot l’anterior.

Per tant, quan utilitzem l’API de PageSpeed ​​Insights per a la prova de rendiment de càrrega massiva d’URL, no tindrem dades d’accessibilitat.

No obstant això, PSI proporciona més informació relacionada amb el rendiment de la velocitat de la pàgina, com ara “Mida DOM”, “Element secundari DOM més profund”, “Recompte total de tasques” i “Contingut DOM carregat”.

Un avantatge més de l’API de PageSpeed ​​Insights és que dóna noms diferents a les “mètriques observades” i les “mètriques reals”.

En aquesta guia, aprendràs:

• Com crear un script Python a nivell de producció.
• Com utilitzar les API amb Python.
• Com construir marcs de dades a partir de respostes de l’API.
• Com analitzar les respostes de l’API.
• Com analitzar els URL i processar les respostes de les sol·licituds d’URL.
• Com emmagatzemar les respostes de l’API amb una estructura adequada.

A continuació es mostra un exemple de sortida de la crida a l’API de Page Speed ​​Insights amb Python.

Captura de pantalla de l’autor, juny de 2022

Biblioteques per utilitzar l’API PageSpeed ​​Insights amb Python

Les biblioteques necessàries per utilitzar l’API PSI amb Python es troben a continuació.

• Eines publicitàries recupera els URL de prova del mapa del lloc web.
• Pandes és construir el marc de dades i aplanar la sortida JSON de l’API.
• Les sol·licituds són per fer una sol·licitud al punt final de l’API específic.
• JSON és prendre la resposta de l’API i posar-la al punt de diccionari relacionat específicament.
• Datetime és modificar el nom del fitxer de sortida específic amb la data del moment.
• URLlib és analitzar l’URL del lloc web del subjecte de prova.

Com utilitzar l’API PSI amb Python?

Per utilitzar l’API PSI amb Python, seguiu els passos següents.

• Obteniu una clau de l’API de PageSpeed ​​Insights.
• Importa les biblioteques necessàries.
• Analitzeu l’URL del lloc web del tema de la prova.
• Preneu la data del moment per al nom del fitxer.
• Afegiu els URL a una llista des d’un mapa del lloc.
• Trieu les mètriques que vulgueu de l’API PSI.
• Creeu un bucle For per prendre la resposta de l’API per a tots els URL.
• Construeix el marc de dades amb les mètriques de l’API PSI escollides.
• Mostra els resultats en forma de XLSX.

1. Obteniu la clau de l’API de PageSpeed ​​Insights

Utilitzar el API de PageSpeed ​​Insights Documentació per obtenir la clau de l’API.

Feu clic al botó “Obtenir una clau” a continuació.

Imatge de developers.google.com, juny de 2022

Trieu un projecte que hàgiu creat a Google Developer Console.

Imatge de developers.google.com, juny de 2022

Activeu l’API de PageSpeed ​​Insights en aquest projecte específic.

Imatge de developers.google.com, juny de 2022

Haureu d’utilitzar la clau d’API específica a les vostres sol·licituds d’API.

2. Importa les biblioteques necessàries

Utilitzeu les línies següents per importar les biblioteques fonamentals.

    import advertools as adv
    import pandas as pd
    import requests
    import json
    from datetime import datetime
    from urllib.parse import urlparse

3. Analitzeu l’URL del lloc web del subjecte de la prova

Per analitzar l’URL del lloc web subjecte, utilitzeu l’estructura de codi següent.

  domain = urlparse(sitemap_url)
  domain = domain.netloc.split(".")[1]

La variable “domini” és la versió analitzada de l’URL del mapa del lloc.

El “netloc” representa la secció de domini específica de l’URL. Quan el dividim amb el “.” pren la “secció mitjana” que representa el nom de domini.

Aquí, “0” és per “www”, “1” per “nom de domini” i “2” és per “extensió de domini”, si ho dividim amb “”.

4. Preneu la data del moment per al nom del fitxer

Per prendre la data del moment específic de la trucada de funció, utilitzeu el mètode “datetime.now”.

Datetime.now proporciona l’hora específica del moment concret. Utilitzeu el “strftime” amb els valors “%Y”, “”%m” i “%d”. “%Y” és per a l’any. Els “%m” i “%d” són valors numèrics per al mes i el dia específics.

 date = datetime.now().strftime("%Y_%m_%d")

5. Afegiu els URL a una llista des d’un mapa del lloc

Per incorporar els URL a un formulari de llista des d’un fitxer de mapa del lloc, utilitzeu el bloc de codi següent.

   sitemap = adv.sitemap_to_df(sitemap_url)
   sitemap_urls = sitemap["loc"].to_list()

Si llegiu el Auditoria de salut del mapa del lloc de Pythonpodeu obtenir més informació sobre els mapes del lloc.

6. Trieu les mètriques que voleu de l’API PSI

Per triar les propietats JSON de la resposta de l’API PSI, hauríeu de veure el propi fitxer JSON.

És molt rellevant per a la lectura, l’anàlisi i l’aplanament d’objectes JSON.

Fins i tot està relacionat amb SEO semànticgràcies al concepte de “gràfic dirigit” i dades estructurades “JSON-LD”.

En aquest article, no ens centrarem a examinar les jerarquies JSON específiques de la resposta de l’API PSI.

Podeu veure les mètriques que he triat recopilar de l’API PSI. És més ric que la sortida predeterminada bàsica de l’API PSI, que només proporciona les mètriques de Core Web Vitals o la interacció de l’índex de velocitat a Next Paint, Time to First Byte i First Contentful Paint.

Per descomptat, també ofereix “suggeriments” dient “Evita encadenar peticions crítiques”, però no cal posar una frase en un marc de dades.

En el futur, aquests suggeriments, o fins i tot cada esdeveniment de cadena individual, els seus valors KB i MS es poden incorporar en una sola columna amb el nom “psi_suggestions”.

Per començar, podeu comprovar les mètriques que he escollit, i una quantitat important d’elles serà la primera per a vosaltres.

Mètriques de l’API PSI, la primera secció es troba a continuació.

    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 = []

Aquesta secció inclou totes les mètriques fonamentals de velocitat de la pàgina observades i simulades, juntament amb algunes de no fonamentals, com ara “Contingut DOM carregat” o “Primera pintura significativa.”

La segona secció de PSI Metrics se centra en els possibles estalvis de temps i bytes de la quantitat de codi no utilitzat.

    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ó de les mètriques PSI se centra en el temps de resposta del servidor, els beneficis d’ús d’imatges sensibles o no, l’ús de danys.

    possible_server_response_time_saving = []
    possible_responsive_image_ms_save = []

Nota: la puntuació de rendiment global prové de “performance_score”.

7. Creeu un bucle For per prendre la resposta de l’API per a tots els URL

El bucle for és agafar tots els URL del fitxer de mapa del lloc i utilitzar l’API PSI per a tots un per un. El bucle for per a l’automatització de l’API PSI té diverses seccions.

La primera secció de l’API de PSI per al bucle comença amb la prevenció d’URL duplicats.

Als mapes del lloc, podeu veure un URL que apareix diverses vegades. Aquest apartat ho impedeix.

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}")

Recordeu comprovar la “clau_api” al final del punt final per a l’API de PageSpeed ​​Insights.

Comproveu el codi d’estat. Als mapes del lloc, pot ser que hi hagi URL de codi d’estat que no siguin 200; aquests s’han de netejar.

         if r.status_code == 200:
               #print(r.json())
               data_ = json.loads(r.text)
               url.append(i)

La secció següent afegeix les mètriques específiques al diccionari específic que hem creat abans 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 secció següent se centra en el recompte de “tasques totals” i la mida del 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 secció següent pren la “profunditat DOM” i l'”element DOM més profund”.

               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 secció següent recull els resultats específics de les proves observades durant la nostra API 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 secció següent pren la quantitat de codi no utilitzat i els bytes desaprofitats, en mil·lisegons juntament amb els recursos de bloqueig de renderització.

               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 secció següent és proporcionar avantatges d’imatge sensible i temps de resposta 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 següent secció és fer que la funció continuï funcionant en cas que hi hagi un error.

         else:
           continue

Exemple d’ús de l’API Page Speed ​​Insights amb Python per a proves massives

Per utilitzar els blocs de codi específics, col·loqueu-los en una funció de Python.

Executeu l’script i obtindreu 29 mètriques relacionades amb la velocitat de la pàgina a les columnes següents.

Captura de pantalla de l’autor, juny de 2022

Conclusió

L’API de PageSpeed ​​Insights ofereix diferents tipus de mètriques de rendiment de càrrega de pàgines.

Demostra com els enginyers de Google perceben el concepte de rendiment de càrrega de pàgines i, possiblement, utilitzen aquestes mètriques com a punt de vista de classificació, UX i comprensió de la qualitat.

L’ús de Python per a proves de velocitat de pàgines massives us ofereix una instantània de tot el lloc web per ajudar a analitzar la possible experiència d’usuari, l’eficiència del rastreig, el percentatge de conversions i les millores de classificació.

Més recursos:

Imatge destacada: Dundanim/Shutterstock