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