Ako používať Python na sledovanie a meranie výkonnosti webových stránok

Počas uplynulého mesiaca spoločnosť Google oznámila niekoľko vylepšení, pokiaľ ide o to, ako zmerajú spokojnosť používateľov prostredníctvom kľúčových ukazovateľov rýchlosti a výkonnosti.

Zhodou okolností som pracoval na vytvorení skriptu Python, ktorý používa rozhranie API rozhrania Google PageSpeed ​​Insights (PSI) na zhromažďovanie metrík na viacerých stránkach naraz, bez toho, aby ste museli testovať pre každú jednotlivú adresu URL.

Po oznámeniach Google som si teraz myslel, že je ten pravý čas na jeho zdieľanie, ako aj na vysvetlenie, ako môžete vytvoriť tento skript Python pre začiatočníkov.

Najlepšia vec na skripte je, že akonáhle budete mať základy na mieste, budete môcť extrahovať množstvo rôznych metrík, ktoré možno nájsť v teste rýchlosti stránky, ako aj v analýze Lighthouse.

Úvod do životne dôležitých metrík webu

Začiatkom mája spoločnosť Google predstavila Core Web Vitals, ktoré sú podmnožinou jej kľúčových metrík Web Vitals.

Tieto metriky slúžia na usmernenie kvality používateľského prostredia na webovej stránke.

Spoločnosť Google ich opísala ako spôsob, ako „pomôcť kvantifikovať skúsenosti s vašimi stránkami a identifikovať príležitosti na zlepšenie“, pričom ďalej zdôrazňuje ich posun k zameraniu sa na skúsenosti používateľov.

Core Web Vitals sú metriky zamerané na používateľov v reálnom svete, ktoré merajú kľúčové aspekty používateľskej skúsenosti; čas nabíjania, interaktivita a stabilita.

Vysvetlením tohto príspevku v tomto príspevku sa nebudem zaoberať príliš podrobnosťami. Viac informácií nájdete tu, ale tieto nové metriky sú:

  • Najväčší obsah.
  • Oneskorenie prvého vstupu.
  • Kumulatívna zmena dizajnu.

Spoločnosť Google okrem toho minulý týždeň oznámila, že predstaví nový token hodnotenia podľa vyhľadávania, ktorý spojí tieto metriky s existujúcimi tokenmi zážitkov zo stránky, ako sú kompatibilita mobilných zariadení a zabezpečenie HTTPS, aby sa zabezpečilo, že budú aj naďalej poskytovať webové stránky. vysoká kvalita pre používateľov

Monitorovanie metrík výkonnosti

Očakáva sa, že táto aktualizácia bude uvedená do prevádzky v roku 2021 a spoločnosť Google potvrdila, že nie sú potrebné žiadne okamžité kroky.

Aby nám však pomohli pripraviť sa na tieto zmeny, aktualizovali nástroje používané na meranie rýchlosti stránky vrátane informácií o produkte PSI, Majáku Google a prehľadu Rýchlosť konzoly Google Search Console.

Kde prichádza do hry rozhranie API služby Pagespeed Insights?

Nástroj PageSpeed ​​Insights od spoločnosti Google je užitočným nástrojom na zobrazenie súhrnu výkonnosti webovej stránky a na generovanie výsledkov využíva terénne aj laboratórne údaje.

Je to vynikajúci spôsob, ako získať prehľad o niekoľkých adresách URL, pretože sa používa stránka po stránke.

Ak však pracujete na veľkom webe a chcete získať rozsiahle informácie, rozhranie API môže byť užitočné pre analýzu viacerých stránok naraz, bez potreby samostatného pripojenia adries URL.

Python skript na meranie výkonu

Vytvoril som nasledujúci skript jazyka Python na meranie kľúčových metrík výkonnosti v mierke, aby som ušetril čas strávený ručným testovaním každej adresy URL.

Tento skript používa Python na odosielanie žiadostí do rozhrania Google PSI API na zhromažďovanie a extrahovanie metrík, ktoré sa zobrazujú v PSI aj Lighthouse.

Rozhodol som sa napísať tento skript v službe Google Colab, pretože je to skvelý spôsob, ako začať písať Python a umožňuje ľahké zdieľanie, takže tento príspevok bude prechádzať nastaveniami pomocou služby Google Colab.

Môže sa však spustiť aj lokálne, s určitými nastaveniami pre nahrávanie a sťahovanie údajov.

Je dôležité si uvedomiť, že niektoré kroky môžu chvíľu trvať, najmä keď je každá adresa URL spustená prostredníctvom rozhrania API, aby sa nepreťažila požiadavkami.

Preto môžete skript spustiť na pozadí a vrátiť sa k nemu po dokončení krokov.

Pozrime sa na kroky potrebné na uvedenie tohto skriptu do prevádzky.

Prešiel 1: Nainštalujte požadované balíčky

Predtým, ako začneme písať akýkoľvek kód, musíme si pred použitím skriptu nainštalovať nejaké balíčky Pythonu, ktoré sú potrebné. Inštalácia je jednoduchá pomocou funkcie importu.

Potrebné balíčky sú:

  • urllib: Ak chcete pracovať, otvoriť, čítať a analyzovať adresy URL.
  • json: Umožňuje vám previesť súbor JSON na Python alebo súbor Python na JSON.
  • petície: Knižnica HTTP na odosielanie všetkých druhov požiadaviek HTTP.
  • pandy: Používajú sa hlavne na analýzu a manipuláciu s údajmi, používame ich na vytváranie dátových rámcov.
  • hodina: Modul na prácu s časmi, ktorý používame na zabezpečenie časového intervalu medzi požiadavkami.
  • záznamy: Z programu Google Colab vám to umožní nahrávať a sťahovať súbory.
  • io: Predvolené rozhranie používané na prístup k súborom.
# Import required packages 
import json
import requests
import pandas as pd
import urllib
import time
from google.colab import files
import io 

Prešiel 2: nakonfigurovať požiadavku API

Ďalším krokom je konfigurácia požiadavky API. Úplné pokyny nájdete tu, ale príkaz bude v zásade vyzerať takto:

urllib.request.urlopen a pridajte ho do premennej s názvom (Uvedomte si, že táto metóda je prevádzať a sťahovať súbory JSON v aplikácii Google Colab).

Prešiel 4: prečítajte si súbor JSON

Súbor JSON bude zvyčajne vyzerať takto, keď sa otvorí v editore kódu podľa vášho výberu.

Prečítajte si súbor JSON

Je to dosť ťažké pochopiť, ale pomocou prehliadača JSON online ho môžete zmeniť na čitateľné stromové zobrazenie.

čitateľný stromový pohľad

V súbore JSON sa zobrazujú polné údaje, ktoré sa ukladajú do programu LoadingExperience, a laboratórne údaje, ktoré nájdete na adrese lighthouseResult.

Na extrahovanie požadovaných metrík môžeme použiť formát súboru JSON, pretože v každej sekcii vidíme, aká metrika je.

Napríklad prvé vstupné oneskorenie sa nachádza pri načítavaní.

Prvý vstupný oneskorenie sa nachádza pri načítavaní

Kým prvá obsahová farba je na majákuVýsledok.

Prvý šťastný obraz je pod majákomVýsledok

Existuje mnoho ďalších metrík uložených v rámci auditov výsledkov majáka, ako napríklad:

  • Index rýchlosti.
  • Prvý šťastný obraz.
  • Kumulatívna zmena dizajnu.

Prešiel 5: nahrajte súbor CSV a uložte ho ako dátový rámec Pandas

Ďalším krokom je načítanie súboru CSV URL, ktorý chceme spustiť prostredníctvom rozhrania PSI API. Zoznam webových adries svojich stránok môžete vygenerovať z prehľadávacieho nástroja, napríklad DeepCrawl.

Keďže používame rozhranie API, odporúčame vám tu použiť menšiu vzorovú adresu URL, najmä ak máte veľkú stránku.

Môžete napríklad použiť stránky s najvyššou úrovňou prevádzky alebo stránky, ktoré generujú najväčšie príjmy. Ak má vaša stránka šablóny, bolo by to ideálne na testovanie ich súprav.

Môžete tiež pridať (Upozorňujeme, že táto metóda slúži na nahrávanie súborov CSV do služby Google Colab).

Po načítaní použijeme knižnicu Pandas na konverziu CSV na DataFrame, ktorú môžeme prejsť v nasledujúcich krokoch.

# Get the filename from the upload so we can read it into a CSV.
for key in uploaded.keys():
  filename = key
# Read the selected file into a Pandas Dataframe
df = pd.read_csv(io.BytesIO(uploaded[filename]))

df.head()

DataFrame bude vyzerať takto, počnúc nulovým indexovaním.

dátový rámec

Prešiel 6: uložte výsledky do objektu odpovede

Ďalším krokom je použitie sekery v tomto rozsahu, ktorá bude predstavovať adresy URL, ktoré prevádzkujeme cez slučku, ako aj objekt odpovede zabráni vzájomnému prepísaniu adries URL a umožní nám uložiť údaje pre jej budúce využitie.

Tu tiež použijeme premennú hlavičky stĺpca na definovanie parametra požiadavky na adresu URL, predtým ako ju skonvertujeme do súboru JSON.

Tu som tiež nastavil čas spánku na 30 sekúnd, aby som znížil počet za sebou idúcich hovorov API.

Ak chcete rýchlejšie zadávať žiadosti, môžete na koniec príkazu URL pridať aj kľúč API.

Odsadenie je tu tiež dôležité, pretože keďže každý krok je súčasťou slučky for, musia sa v rámci príkazu odsadiť.

Prešiel 7: vytvorte dátový rámec na ukladanie odpovedí

Potrebujeme tiež vytvoriť DataFrame, ktorý ukladá metriky, ktoré chceme extrahovať z objektu odpovede.

DataFrame je tabuľková dátová štruktúra so stĺpcami a riadkami, do ktorých sa ukladajú údaje. Potrebujeme jednoducho pridať stĺpec pre každú metriku a vhodne ho pomenovať, napríklad takto:

# Create dataframe to store responses
df_pagespeed_results = pd.DataFrame(columns=
          ['url',
          'Overall_Category',
          'Largest_Contentful_Paint',
          'First_Input_Delay',
          'Cumulative_Layout_Shift',
          'First_Contentful_Paint',
          'Time_to_Interactive',
          'Total_Blocking_Time',
          'Speed_Index'])  

print(df_pagespeed_results)

Na účely tohto skriptu som použil metriky Core Web Vital spolu s ďalšími metrikami načítania a interaktivity, ktoré sa používajú v aktuálnej verzii Lighthouse.

Tieto metriky majú rôzne váhy, ktoré sa potom používajú v celkovom skóre výkonnosti:

Viac informácií o jednotlivých metrikách spolu s interpretáciou skóre nájdete na jednotlivých vstupných stránkach, ktoré sú prepojené vyššie.

Tiež som sa rozhodol zahrnúť index rýchlosti a celkovú kategóriu, ktorá poskytne pomalé, priemerné alebo rýchle skóre.

Prešiel 8: extrahujte metriky z objektu odpovede

Keď máme uložený objekt odpovede, môžeme to teraz filtrovať a extrahovať iba požadované metriky.

Tu opäť použijeme slučku for na slučku cez objektový súbor odpovedí a nastavíme postupnosť indexov zoznamu, aby vrátili iba konkrétne metriky.

Za týmto účelom pre každú webovú adresu definujeme názov stĺpca DataFrame, ako aj konkrétnu kategóriu objektu odpovede, z ktorého získame každú metriku.

for (url, x) in zip(
    response_object.keys(),
    range(0, len(response_object))
):

        # URLs
        df_pagespeed_results.loc[x, 'url'] =
            response_object[url]['lighthouseResult']['finalUrl']

        # Overall Category
        df_pagespeed_results.loc[x, 'Overall_Category'] =
            response_object[url]['loadingExperience']['overall_category']   

        # Core Web Vitals     

        # Largest Contentful Paint    
        df_pagespeed_results.loc[x, 'Largest_Contentful_Paint'] =
        response_object[url]['lighthouseResult']['audits']['largest-contentful-paint']['displayValue']

        # First Input Delay 
        fid = response_object[url]['loadingExperience']['metrics']['FIRST_INPUT_DELAY_MS']
        df_pagespeed_results.loc[x, 'First_Input_Delay'] = fid['percentile']

        # Cumulative Layout Shift    
        df_pagespeed_results.loc[x, 'Cumulative_Layout_Shift'] =
        response_object[url]['lighthouseResult']['audits']['cumulative-layout-shift']['displayValue']

        # Additional Loading Metrics 

        # First Contentful Paint 
        df_pagespeed_results.loc[x, 'First_Contentful_Paint'] =
        response_object[url]['lighthouseResult']['audits']['first-contentful-paint']['displayValue']

        # Additional Interactivity Metrics 

        # Time to Interactive  
        df_pagespeed_results.loc[x, 'Time_to_Interactive'] =
        response_object[url]['lighthouseResult']['audits']['interactive']['displayValue']

        # Total Blocking Time   
        df_pagespeed_results.loc[x, 'Total_Blocking_Time'] =
        response_object[url]['lighthouseResult']['audits']['total-blocking-time']['displayValue']

        # Speed Index
        df_pagespeed_results.loc[x, 'Speed_Index'] =
        response_object[url]['lighthouseResult']['audits']['speed-index']['displayValue']

Tento skript som nakonfiguroval na extrahovanie kľúčových metrík, ktoré som spomenul vyššie, aby ste ich mohli okamžite použiť na zhromažďovanie týchto údajov.

Je však možné získať niekoľko ďalších užitočných metrík, ktoré možno nájsť v testoch PSI aj v analýze Lighthouse.

Tu je súbor JSON užitočný na kontrolu, kde je každá metrika v zozname.

Napríklad pri extrahovaní metrík z auditov Lighthouse, ako je napríklad hodnota zobrazenia času do Interactive, by ste použili nasledujúce:

df_pagespeed_results.loc[x, 'Time_to_Interactive'] =
response_object[url]['lighthouseResult']['audits']['interactive']['displayValue']

Opäť je dôležité zabezpečiť, aby každý z nich spadal do slučky, inak nebudú zahrnuté do iterácie a pre URL sa vygeneruje iba jeden výsledok.

Náš konečný DataFrame bude vyzerať takto;

konečný dátový rámec

Prešiel 9: Skonvertujte DataFrame na súbor CSV

Posledným krokom je vytvorenie súhrnného súboru na zhromaždenie všetkých výsledkov, aby sme ho mohli previesť do formátu, ktorý môžeme ľahko analyzovať, napríklad súbor CSV.

summary = df_pagespeed_results

df_pagespeed_results.head()

#Download csv file 
summary.to_csv('pagespeed_results.csv')
files.download('pagespeed_results.csv')

.str.replace metóda v každom stĺpci.

#Replace the 's' with a blank space so we can turn into numbers
df_pagespeed_results['Largest_Contentful_Paint'] = df_pagespeed_results.Largest_Contentful_Paint.str.replace('s', '')
df_pagespeed_results['First_Contentful_Paint'] = df_pagespeed_results.First_Contentful_Paint.str.replace('s', '')
df_pagespeed_results['Time_to_Interactive'] = df_pagespeed_results.Time_to_Interactive.str.replace('s', '')
df_pagespeed_results['Total_Blocking_Time'] = df_pagespeed_results.Total_Blocking_Time.str.replace('ms', '')
df_pagespeed_results['Speed_Index'] = df_pagespeed_results.Speed_Index.str.replace('s', '')

Potom použijeme Obrázkové kredity

Všetky snímky nasnímané autorom, jún 2020