Noțiuni introductive cu API-ul Google Page Speed

Publicat: 2019-03-11

Viteza paginii este unul dintre cei mai mari indicatori ai cât timp va petrece cineva pe site-ul dvs. Paginile de încărcare lentă pot duce la rate de respingere mai mari, rate de conversie mai mici și, prin urmare, la venituri mai mici.

Pentru a afla dacă timpii de încărcare vă pot afecta reținerea și conversia publicului, instrumentul Google Page Speed ​​Insights este un loc minunat de început. API-ul Google Page Speed ​​este modul în care puteți să vă conectați la aceste date și să încorporați informații în stiva dvs. de date. L-am folosit pentru a construi propriul nostru instrument de urmărire a analizei Viteza paginii pentru a monitoriza valorile cheie ale experienței utilizatorilor pentru clienții noștri.

Ce este atât de grozav la API-ul Page Speed ​​Insights?

Cu acest instrument, puteți conecta o adresă URL și puteți primi un rezumat al performanței sale. Acest lucru este excelent pentru eșantionarea unui număr mic de adrese URL, dar ce se întâmplă dacă aveți un site web mare și doriți să vedeți o imagine de ansamblu cuprinzătoare a performanței în mai multe secțiuni și tipuri de pagini?

Aici intervine API-ul. API-ul Google Page Speed ​​Insights ne oferă posibilitatea de a analiza performanța pentru multe pagini și de a înregistra rezultatele, fără a fi nevoie să solicităm în mod explicit adresele URL pe rând și să interpretăm rezultatele manual.

Având în vedere acest lucru, am creat un ghid simplu care vă va face să începeți să utilizați API-ul pentru propriul dvs. site web. Odată ce v-ați familiarizat cu procesul descris mai jos, veți vedea cum poate fi utilizat pentru a analiza viteza site-ului dvs. la scară, pentru a urmări cum se schimbă în timp sau chiar pentru a configura instrumente de monitorizare.

Acest ghid presupune o anumită familiaritate cu scripting. Aici folosim Python pentru a interfața cu API-ul și a analiza rezultatele.

Obiective

În această postare vei învăța cum să:

  1. Construiți o interogare API Google Page Speed ​​Insights
  2. Efectuați solicitări API pentru un tabel de adrese URL
  3. Extrageți informații de bază din răspunsul API
  4. Rulați exemplul de script dat în Python

Se instalează

Există câțiva pași pe care va trebui să îi urmați înainte de a interoga API-ul Page Speed ​​Insights cu Python.

  • Configurare API: multe API-uri Google necesită chei API, parole și alte măsuri de autentificare. Cu toate acestea, nu aveți nevoie de toate acestea pentru a începe cu API-ul Google Page Speeds!
  • Instalare Python 3: Dacă nu ați folosit niciodată python până acum, vă recomandăm să începeți cu distribuția Anaconda (versiunea Python 3.x), care instalează python împreună cu biblioteci populare de analiză a datelor, cum ar fi Pandas.

Efectuarea cererilor

Bazele unei cereri

API-ul poate fi interogat la acest punct final folosind cereri GET:

 GET https://www.googleapis.com/pagespeedonline/v5/runPagespeed

Apoi adăugăm parametri suplimentari pentru a specifica adresa URL la care dorim să găsim viteza paginii și tipul de dispozitiv de utilizat, după cum se arată mai jos:

 https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url={url}&strategy={device_type}

Când faceți solicitări, ar trebui să înlocuiți {url} cu adresa URL a paginii codificate în URL de pe site-ul dvs. și {device_type} cu cu dispozitivul mobil sau desktop, pentru a specifica tipul de dispozitiv.

Pachete Python

Pentru a face solicitări, a le asimila și apoi a scrie rezultatele în tabele, vom folosi câteva biblioteci Python:

  • urllib : Pentru a face cererile HTTP.
  • json : pentru a analiza și a citi obiectele răspuns.
  • panda : pentru a salva rezultatele în format CSV.

Construirea interogării

Pentru a face o solicitare API folosind Python, putem folosi metoda urllib.request.urlopen :

 import urllib.request import urllib.parse url = 'http://www.example.com' escaped_url = urllib.parse.quote(url) device_type = 'mobile' # Construct request url contents = urllib.request.urlopen( 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url={}&strategy={}' .format(escaped_url, device_type) ).read().decode('UTF-8')

Această solicitare ar trebui să returneze un răspuns JSON (surprinzător de mare). Vom discuta acest lucru mai detaliat în curând.

Efectuarea mai multor interogări

Un argument de vânzare major al acestui API este că ne permite să obținem viteze de pagină pentru loturi de adrese URL. Să aruncăm o privire la cum se poate face acest lucru cu Python.

O opțiune este să stocăm parametrii cererii ( url și device_type ) într-un CSV, pe care îl putem încărca într-un Pandas DataFrame pentru a itera. Observați mai jos că fiecare solicitare sau pereche unică url + device_type are propriul rând.

Stocați datele în CSV

 URL, device_type 0, https://www.example.com, desktop 1, https://www.example.com, mobile 2, https://www.example.com/blog, desktop 3, https://www.example.com/blog, mobile

Încărcați CSV

 import pandas as pd df = pd.read_csv import pandas as pd df = pd.read_csv (url_file)

Odată ce avem un set de date cu toate adresele URL de solicitat, le putem itera și face o solicitare API pentru fiecare rând. Acesta este prezentat mai jos:

 import time # This is where the responses will be stored response_object = {} # Iterating through df for i in range(0, len(df)): # Error handling try: print('Requesting row #:', i) # Define the request parameters url = df.iloc[i]['URL'] device_type = df.iloc[i]['device_type'] # Making request contents = urllib.request.urlopen( 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url={}&strategy={}' .format(url, device_type) ).read().decode('UTF-8') # Converts to json format contents_json = json.loads(contents) # Insert returned json response into response_object response_object[device_type][url] = contents_json print('Sleeping for 20 seconds between responses.') time.sleep(20) except Exception as e: print('Error:', e) print('Returning empty response for url:', url) response_object[device_type][url] = {}

Citind răspunsul

Înainte de a aplica orice filtre sau formatare asupra datelor, putem stoca mai întâi răspunsurile complete pentru utilizare ulterioară, astfel:

 import json from datetime import datetime f_name ='data/{}-response.json'.format(datetime.now().strftime("%Y-%m-%d_%H:%M:%S")) with open(f_name, 'w') as outfile: json.dump(response_object, outfile, indent=4)

După cum sa menționat mai sus, fiecare răspuns returnează un obiect JSON. Au multe proprietăți diferite legate de adresa URL dată și sunt mult prea mari pentru a fi descifrate fără filtrare și formatare.

Pentru a face acest lucru, vom folosi biblioteca Pandas, ceea ce facilitează extragerea datelor pe care le dorim în format tabel și exportarea în CSV.

Aceasta este structura generală a răspunsului. Datele despre timpii de încărcare au fost reduse la minimum datorită dimensiunii sale.

Structura generală a răspunsului

Printre alte informații, există două surse majore de date privind viteza paginii incluse în răspuns: date de laborator, stocate în „lighthouseResult” și date de câmp, stocate în „loadingExperience”. În această postare, ne vom concentra doar pe datele Field, care sunt adunate pe baza utilizatorilor din lumea reală din browserul Chrome.

În special, vom extrage următoarele valori:

  • Adresa URL solicitată și URL finală
    • Avem nevoie atât de URL-ul solicitat, cât și de cel final rezolvat care a fost auditat pentru a ne asigura că sunt aceleași. Acest lucru ne va ajuta să identificăm că rezultatul a venit de la adresa URL dorită în loc de o redirecționare.

    Putem vedea că ambele adrese URL sunt aceleași în „lighthouseResult” de mai sus.

  • Prima vopsea satisfăcătoare (ms)
    • Acesta este timpul dintre prima navigare a utilizatorului către pagină și momentul în care browserul redă pentru prima dată o bucată de conținut, spunându-i utilizatorului că pagina se încarcă.
    • Această valoare este măsurată în milisecunde.
  • Prima vopsea satisfăcătoare (proporții de lent, mediu, rapid)
    • Aceasta arată procentul de pagini care au timpi de încărcare lenți, medii și rapidi ai First Contentful Paint.

    Timpul de încărcare a primei vopsea Contentful Paint în milisecunde, etichetat „percentilă” și proporție de lent, mediu și rapid.

Toate aceste rezultate pot fi extrase pentru oricare, sau ambele, datele mobile și desktop.

Dacă numim cadrul nostru de date Pandas df_field_responses, iată cum am extrage aceste proprietăți:

 import pandas as pd # Specify the device_type (mobile or desktop) device_type = 'mobile' # Create dataframe to store responses df_field_responses = pd.DataFrame( columns=['requested_url', 'final_url', 'FCM_ms', 'FCP_category', 'FCP_fast', 'FCP_avg', 'FCP_slow' ] ) for (url, i) in zip( response_object[device_type].keys(), range(0, len(df_field_responses)) ): try: print('Trying to insert response for url:', url) # We reuse this below when selecting data from the response fcp_loading = response_object[device_type][url] ['loadingExperience']['metrics']['FIRST_CONTENTFUL_PAINT_MS'] # URLs df_field_responses.loc[i, 'requested_url'] = response_object[device_type][url]['lighthouseResult']['requestedUrl'] df_field_responses.loc[i, 'final_url'] = response_object[device_type][url]['lighthouseResult']['finalUrl'] # Loading experience: First Contentful Paint (ms) df_field_responses.loc[i, 'FCP_ms'] = fcp_loading['percentile'] df_field_responses.loc[i, 'FCP_category'] = fcp_loading['category'] # Proportions: First Contentful Paint df_field_responses.loc[i, 'FCP_fast'] = fcp_loading['distributions'][0]['proportion'] df_field_responses.loc[i, 'FCP_avg'] = fcp_loading['distributions'][1]['proportion'] df_field_responses.loc[i, 'FCP_slow'] = fcp_loading['distributions'][2]['proportion'] print('Inserted for row {}: {}'.format(i, df_field_responses.loc[i])) except Exception as e: print('Error:', e) print('Filling row with Error for row: {}; url: {}'.format(i, url)) # Fill in 'Error' for row if a field couldn't be found df_field_responses.loc[i] = ['Error' for i in range(0, len(df_field_responses.columns))]

Apoi, pentru a stoca cadrul de date, df_field_responses, într-un CSV:

 df_field_responses.to_csv('page_speeds_filtered_responses.csv', index=False)

Rularea scripturilor pe GitHub

Depozitul de pe GitHub conține instrucțiuni despre cum să rulați fișierele, dar aici este o defalcare rapidă.

  1. Înainte de a rula exemplele de scripturi pe GitHub, va trebui să clonați depozitul folosind
    • git clone https://github.com/Ayima/page-speed-blog-post.git
  2. Apoi creați un fișier CSV cu adresele URL de interogat.
  3. Completați fișierul de configurare cu numele fișierului URL.
  4. Comanda pentru a rula scripturile:
 python main.py --config-file config.json

Ceva de reținut:

API-ul are o limită în ceea ce privește numărul de solicitări pe care le puteți face pe zi și pe secundă.

Există mai multe modalități de a vă pregăti pentru aceasta, inclusiv:

  • Gestionarea erorilor: solicitările repetate care returnează o eroare
  • Limitare: în scriptul dvs. pentru a limita numărul de solicitări trimise pe secundă și re-solicitarea dacă o adresă URL eșuează.
  • Obțineți o cheie API dacă este necesar (de obicei, dacă faceți mai mult de o interogare pe secundă).

Sperăm că, după ce ați citit acest ghid, veți putea să începeți să folosiți câteva interogări de bază ale API-ului Google Page Speed ​​Insights. Simțiți-vă liber să ne contactați pe twitter @ayima cu orice întrebări sau dacă întâmpinați probleme!

Cum folosim API-ul Page Speeds la Ayima

Aici, la Ayima, colectăm și stocăm în mod continuu vitezele paginii pentru clienți. Acest lucru ne ajută să fim atenți la sănătatea site-urilor lor web și să identificăm tendințele negative sau pozitive. Prin monitorizarea vitezelor pentru o varietate de pagini, putem vizualiza performanța în funcție de secțiunea de site sau tipul de pagină (de exemplu, paginile de produse VS paginile de categorii pentru site-urile de comerț electronic).

Urmărim și alte valori interesante furnizate de API, inclusiv datele Google Lab, și prezentăm totul într-un tablou de bord interactiv. Pentru mai multe informații despre acest lucru, vă rugăm să ne contactați, ne-ar plăcea să discutăm cu dvs.!

Cod sursă: Puteți găsi proiectul GitHub cu un exemplu de script de rulat aici.