Sitemap

So verwenden Sie Python zum Überwachen und Messen der Website-Leistung

Im Laufe des letzten Monats hat Google eine Reihe von Fortschritten bei der Messung der Benutzererfahrung durch wichtige Geschwindigkeits- und Leistungsmetriken angekündigt.

Zufälligerweise habe ich daran gearbeitet, ein Python-Skript zusammenzustellen, das die API von Google PageSpeed ​​Insights (PSI) verwendet, um Metriken für eine Reihe von Seiten gleichzeitig zu sammeln, ohne den Test für jede einzelne URL ausführen zu müssen.

Nach den Ankündigungen von Google dachte ich, jetzt wäre der perfekte Zeitpunkt, um es zu teilen und zu erklären, wie Sie dieses anfängerfreundliche Python-Skript erstellen können.

Das Beste an dem Skript ist, dass Sie, sobald Sie die Grundlagen eingerichtet haben, eine Reihe verschiedener Metriken extrahieren können, die im Seitengeschwindigkeitstest sowie in der Lighthouse-Analyse zu finden sind.

Eine Einführung in Web Vital Metrics

Anfang Mai führte Google Core Web Vitals ein, die eine Teilmenge seiner wichtigsten Web Vitals-Metriken darstellen.

Diese Metriken werden verwendet, um Hinweise zur Qualität der Benutzererfahrung auf einer Website zu geben.

Google hat sie als eine Möglichkeit beschrieben, „die Erfahrung Ihrer Website zu quantifizieren und Verbesserungsmöglichkeiten zu identifizieren“, und ihre Verlagerung hin zur Konzentration auf die Benutzererfahrung weiter hervorgehoben.

Core Web Vitals sind reale, benutzerorientierte Metriken, die die wichtigsten Aspekte der Benutzererfahrung messen; Ladezeit, Interaktivität und Stabilität.

Ich werde in diesem Beitrag nicht zu sehr ins Detail gehen, um diese zu erklären – Sie können hier mehr erfahren – aber diese neuen Metriken sind:

  • Größte zufriedene Farbe.
  • Erste Eingangsverzögerung.
  • Kumulative Layoutverschiebung.

Darüber hinaus kündigte Google letzte Woche an, dass sie ein neues Suchrankingsignal einführen werden, das diese Metriken mit bestehenden Seitenerlebnissignalen wie Mobilfreundlichkeit und HTTPS-Sicherheit kombiniert, um sicherzustellen, dass sie weiterhin qualitativ hochwertige Websites anbieten an Benutzer.

Überwachung von Leistungsmetriken

Dieses Update wird voraussichtlich im Jahr 2021 eingeführt und Google hat bestätigt, dass keine sofortigen Maßnahmen ergriffen werden müssen.

Um uns jedoch bei der Vorbereitung auf diese Änderungen zu helfen, haben sie die Tools zur Messung der Seitengeschwindigkeit aktualisiert, darunter PSI, Google Lighthouse und den Geschwindigkeitsbericht der Google Search Console.

Wo kommt die Pagespeed Insights API ins Spiel?

PageSpeed ​​Insights von Google ist ein nützliches Tool, um eine Zusammenfassung der Leistung einer Webseite anzuzeigen, und verwendet sowohl Feld- als auch Labordaten, um Ergebnisse zu generieren.

Es ist eine großartige Möglichkeit, sich einen Überblick über eine Handvoll URLs zu verschaffen, da es Seite für Seite verwendet wird.

Wenn Sie jedoch an einer großen Website arbeiten und Erkenntnisse in großem Umfang gewinnen möchten, kann die API hilfreich sein, um mehrere Seiten gleichzeitig zu analysieren, ohne die URLs einzeln einfügen zu müssen.

Ein Python-Skript zum Messen der Leistung

Ich habe das folgende Python-Skript erstellt, um wichtige Leistungsmetriken in großem Maßstab zu messen und Zeit zu sparen, die für das manuelle Testen jeder URL aufgewendet wird.

Dieses Skript verwendet Python, um Anfragen an die Google PSI-API zu senden, um die Metriken zu sammeln und zu extrahieren, die sowohl in PSI als auch in Lighthouse angezeigt werden.

Ich habe mich entschieden, dieses Skript in Google Colab zu schreiben, da es eine großartige Möglichkeit ist, mit dem Schreiben von Python zu beginnen, und eine einfache gemeinsame Nutzung ermöglicht, sodass dieser Beitrag die Einrichtung mit Google Colab durchläuft.

Es kann jedoch auch lokal ausgeführt werden, mit einigen Anpassungen beim Hoch- und Herunterladen von Daten.

Es ist wichtig zu beachten, dass einige Schritte einige Zeit in Anspruch nehmen können, insbesondere wenn jede URL über die API läuft, um sie nicht mit Anfragen zu überladen.

Daher können Sie das Skript im Hintergrund ausführen und nach Abschluss der Schritte darauf zurückkommen.

Lassen Sie uns die Schritte durchgehen, die erforderlich sind, um dieses Skript zum Laufen zu bringen.

Schritt 1: Installieren Sie die erforderlichen Pakete

Bevor wir mit dem Schreiben von Code beginnen, müssen wir einige Python-Pakete installieren, die erforderlich sind, bevor wir das Skript verwenden können.Diese lassen sich einfach über die Importfunktion installieren.

Die Pakete, die wir brauchen, sind:

  • urllib: Zum Arbeiten mit, Öffnen, Lesen und Analysieren von URLs.
  • json: Ermöglicht Ihnen, eine JSON-Datei in Python oder eine Python-Datei in JSON zu konvertieren.
  • Anfragen: Eine HTTP-Bibliothek zum Senden aller Arten von HTTP-Anfragen.
  • Pandas: Hauptsächlich für die Datenanalyse und -manipulation verwendet, verwenden wir es, um DataFrames zu erstellen.
  • time: Ein Modul zum Arbeiten mit Zeiten, wir verwenden es, um eine Zeitpause zwischen Anfragen bereitzustellen.
  • Dateien: Von Google Colab können Sie damit Dateien hoch- und herunterladen.
  • io: Die Standardschnittstelle für den Zugriff auf Dateien.
# Import required packages import jsonimport requestsimport pandas as pdimport urllibimport timefrom google.colab import filesimport io 

Schritt 2: Richten Sie eine API-Anfrage ein

Der nächste Schritt besteht darin, die API-Anforderung einzurichten.Vollständige Anweisungen finden Sie hier, aber im Wesentlichen sieht der Befehl so aus:

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url={IhrURL}/&strategy=mobile/&key={IhrAPIKey}

Auf diese Weise können Sie Ihre URL, Strategie (Desktop oder Mobil) und API-Schlüssel anhängen.

Um es mit Python zu verwenden, verwenden wir die urllib-Anforderungsbibliothek urllib.request.urlopen und fügen sie einer Variablen namens result hinzu, damit wir die Ergebnisse speichern und innerhalb des Skripts erneut verwenden können.

# Define URL  url = 'https://www.example.co.uk'# API request urlresult = urllib.request.urlopen('https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url={}/&strategy=mobile'.format(url)).read().decode('UTF-8')print(result)

Schritt 3: Testen der API

Um zu testen, ob die API korrekt eingerichtet ist, und um zu verstehen, was während des Tests generiert wird, habe ich eine URL mit der einfachen Methode urllib.request durch die API laufen lassen.

Sobald dies abgeschlossen war, konvertierte ich das Ergebnis in eine JSON-Datei und lud sie herunter, um das Ergebnis anzuzeigen.

# Convert to json formatresult_json = json.loads(result)print(result_json)with open('result.json', 'w') as outfile:  json.dump(result_json, outfile)files.download('result.json')

(Bitte beachten Sie, dass diese Methode zum Konvertieren und Herunterladen von JSON-Dateien in Google Colab dient.)

Schritt 4: Lesen Sie die JSON-Datei

Die JSON-Datei sieht in der Regel etwa so aus, wenn sie im Code-Editor Ihrer Wahl geöffnet wird.

Es ist ziemlich schwer zu verstehen, aber mit einem Online-JSON-Viewer können Sie es in eine lesbare Baumansicht konvertieren.

Die JSON-Datei zeigt Felddaten an, die unter loadingExperience gespeichert sind, und Labordaten, die Sie unter lighthouseResult finden.

Um die gewünschten Metriken zu extrahieren, können wir das Format der JSON-Datei verwenden, da wir sehen können, welche Metrik sich unter jedem Abschnitt befindet.

Zum Beispiel ist First Input Delay unter loadingExperience zu finden.

Während First Contentful Paint unter lighthouseResult zu finden ist.

Es gibt viele andere Metriken, die unter den lighthouseResult-Audits gespeichert werden, wie zum Beispiel:

  • Geschwindigkeitsindex.
  • Erste zufriedene Farbe.
  • Kumulative Layoutverschiebung.

Schritt 5: Laden Sie eine CSV-Datei hoch und speichern Sie sie als Pandas-Datenrahmen

Der nächste Schritt besteht darin, eine CSV-Datei mit URLs hochzuladen, die wir über die PSI-API ausführen möchten.Sie können eine Liste der URLs Ihrer Website mit einem Crawling-Tool wie DeepCrawl generieren.

Da wir die API verwenden, würde ich empfehlen, hier einen kleineren Beispielsatz von URLs zu verwenden, insbesondere wenn Sie eine große Website haben.

Sie könnten beispielsweise Seiten mit den höchsten Zugriffszahlen oder Seiten verwenden, die die meisten Einnahmen generieren.Alternativ, wenn Ihre Website über Vorlagen verfügt, wäre es großartig, Sätze davon zu testen.

Sie können hier auch eine Spaltenkopfvariable hinzufügen, die wir beim Durchlaufen der Liste verwenden.Stellen Sie sicher, dass dies mit dem Namen der Spaltenüberschrift in der hochgeladenen CSV-Datei übereinstimmt:

uploaded = files.upload()#if your column header is something other than 'url' please define it here column_header='url'

(Bitte beachten Sie, dass diese Methode zum Hochladen von CSV-Dateien in Google Colab dient.)

Sobald dies hochgeladen wurde, verwenden wir die Pandas-Bibliothek, um die CSV in einen DataFrame umzuwandeln, den wir in den folgenden Schritten durchlaufen können.

# 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 Dataframedf = pd.read_csv(io.BytesIO(uploaded[filename]))df.head()

Der DataFrame sieht wie folgt aus, beginnend mit der Nullindizierung.

Schritt 6: Speichern Sie die Ergebnisse in einem Antwortobjekt

Der nächste Schritt beinhaltet die Verwendung einer for-Schleife, um den DataFrame von URLs zu durchlaufen, die wir gerade über die PSI-API erstellt haben.

Eine for-Schleife ermöglicht es uns, die hochgeladene Liste zu durchlaufen und den Befehl für jedes Element auszuführen.Dann können wir die Ergebnisse in einem Response-Objekt speichern und in eine JSON-Datei konvertieren.

response_object = {}# Iterate through the dffor x in range(0, len(df)):        # Define request parameter        url = df.iloc[x][column_header]        # Make request        pagespeed_results = urllib.request.urlopen('https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url={}&strategy=mobile'.format(url)).read().decode('UTF-8')        # Convert to json format        pagespeed_results_json = json.loads(pagespeed_results)        # Insert returned json response into response_object        response_object[url] = pagespeed_results_json        time.sleep(30)                print(response_object[url])

Wir verwenden hier x in range, das die URLs darstellt, die wir durch die Schleife laufen lassen, sowie (0, len), wodurch die Schleife alle URLs im DataFrame durchlaufen kann, egal wie viele enthalten sind .

Das Response-Objekt verhindert, dass sich die URLs beim Durchlaufen gegenseitig überschreiben, und ermöglicht es uns, die Daten für die zukünftige Verwendung zu speichern.

Hier verwenden wir auch die Spaltenkopfvariable, um den URL-Anforderungsparameter zu definieren, bevor wir ihn in eine JSON-Datei konvertieren.

Ich habe auch hier die Zeit zum Schlafen auf 30 Sekunden eingestellt, um die Anzahl der nacheinander durchgeführten API-Aufrufe zu reduzieren.

Alternativ können Sie einen API-Schlüssel an das Ende des URL-Befehls anhängen, wenn Sie schnellere Anfragen stellen möchten.

Auch hier ist die Einrückung wichtig, denn da jeder Schritt Teil der for-Schleife ist, müssen sie innerhalb des Befehls eingerückt werden.

Schritt 7: Erstellen Sie einen Datenrahmen zum Speichern der Antworten

Wir müssen auch einen DataFrame erstellen, der die Metriken speichert, die wir aus dem Antwortobjekt extrahieren möchten.

Ein DataFrame ist eine Datenstruktur ähnlich einer Tabelle mit Spalten und Zeilen, die Daten speichern.Wir müssen einfach für jede Metrik eine Spalte hinzufügen und sie entsprechend benennen, wie folgt:

# Create dataframe to store responsesdf_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)

Für dieses Skript habe ich die Core Web Vital-Metriken zusammen mit den zusätzlichen Lade- und Interaktivitätsmetriken verwendet, die in der aktuellen Lighthouse-Version verwendet werden.

Diese Metriken haben jeweils unterschiedliche Gewichtungen, die dann in der Gesamtleistungsbewertung verwendet werden:

Auf den jeweiligen Zielseiten, die oben verlinkt sind, erfahren Sie mehr über die einzelnen Metriken und darüber, wie die Bewertungen zu interpretieren sind.

Ich habe mich auch dafür entschieden, den Geschwindigkeitsindex und die Gesamtkategorie einzubeziehen, die entweder eine langsame, durchschnittliche oder schnelle Punktzahl liefern.

Schritt 8: Extrahieren Sie die Metriken aus dem Antwortobjekt

Sobald wir das Antwortobjekt gespeichert haben, können wir es jetzt filtern und nur die gewünschten Metriken extrahieren.

Hier werden wir erneut eine for-Schleife verwenden, um die Antwortobjektdatei zu durchlaufen und eine Folge von Listenindizes einzurichten, um nur die spezifischen Metriken zurückzugeben.

Dazu definieren wir für jede URL den Spaltennamen aus dem DataFrame sowie die spezifische Kategorie des Antwortobjekts, aus dem wir jede Metrik ziehen werden.

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']

Ich habe dieses Skript eingerichtet, um die oben erwähnten Schlüsselmetriken zu extrahieren, damit Sie es sofort zum Sammeln dieser Daten verwenden können.

Es ist jedoch möglich, eine Reihe anderer nützlicher Metriken herauszuziehen, die sowohl in den PSI-Tests als auch in der Lighthouse-Analyse zu finden sind.

Hier ist die JSON-Datei nützlich, um zu überprüfen, wo sich jede Metrik in der Liste befindet.

Wenn Sie beispielsweise Metriken aus den Lighthouse-Audits extrahieren, wie z. B. den Anzeigewert von Time to Interactive, würden Sie Folgendes verwenden:

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

Auch hier ist es wichtig sicherzustellen, dass sich alle innerhalb der Schleife befinden, da sie sonst nicht in die Iteration aufgenommen werden und nur ein Ergebnis für eine URL generiert wird.

Unser endgültiger DataFrame wird so aussehen;

Schritt 9: Wandeln Sie den DataFrame in eine CSV-Datei um

Der letzte Schritt besteht darin, eine Zusammenfassungsdatei zu erstellen, um alle Ergebnisse zu sammeln, damit wir diese in ein Format umwandeln können, das wir einfach analysieren können, z. B. eine CSV-Datei.

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

(Bitte beachten Sie, dass diese Methode zum Konvertieren und Herunterladen von CSV-Dateien in Google Colab dient.)

Weitere Untersuchung der Daten

Alle von uns exportierten Metriken werden derzeit als Zeichenfolgen gespeichert, bei denen es sich um einen Python-Datentyp für Text und Zeichen handelt.

Da einige der von uns extrahierten Metriken tatsächlich numerische Werte sind, möchten Sie die Zeichenfolgen möglicherweise in numerische Datentypen wie Ganzzahlen und Gleitkommazahlen umwandeln.

Ganzzahlen, auch bekannt als int, sind der Datentyp für ganze Zahlen wie 1 und 10.

Gleitkommazahlen, auch Float genannt, sind Dezimalkommazahlen wie 1,0 und 10,1.

Es gibt zwei Schritte, die wir ausführen müssen, um unsere Zeichenfolgen in Zahlen umzuwandeln. Der erste besteht darin, das Zeichen „s“ (das zur Darstellung von Sekunden verwendet wird) durch ein Leerzeichen zu ersetzen.

Dazu verwenden wir für jede Spalte die Methode .str.replace.

#Replace the 's' with a blank space so we can turn into numbersdf_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', '')

Wir werden dann die Methode .astype() verwenden, um die Strings entweder in Ganzzahlen oder Gleitkommazahlen umzuwandeln:

#Turn strings into intergers or floatsdf_pagespeed_results['Largest_Contentful_Paint'] = df_pagespeed_results.Largest_Contentful_Paint.astype(float)df_pagespeed_results['Cumulative_Layout_Shift'] = df_pagespeed_results.Cumulative_Layout_Shift.astype(int)df_pagespeed_results['First_Contentful_Paint'] = df_pagespeed_results.First_Contentful_Paint.astype(float)df_pagespeed_results['Time_to_Interactive'] = df_pagespeed_results.Time_to_Interactive.astype(float)df_pagespeed_results['Speed_Index'] = df_pagespeed_results.Speed_Index.astype(float)

Wenn wir das getan haben, können Sie die Daten mit verschiedenen Methoden weiter auswerten.

Sie können beispielsweise Datenvisualisierungsbibliotheken wie Matplotlib oder Seaborn verwenden, um die Metriken zu visualisieren und zu messen, wie sie sich im Laufe der Zeit ändern, und Ergebnisse in langsame, mittlere und schnelle Buckets gruppieren.

Ich werde diese in diesem Artikel nicht behandeln, da wir bereits viel behandelt haben, aber Sie können sich gerne an uns wenden, wenn Sie mehr erfahren möchten.

Abschließend

Dieses Skript hat mir letztendlich geholfen, die wichtigsten Seitengeschwindigkeits- und Leistungsmetriken für eine Gruppe von URLs zu messen und die Ergebnisse zu visualisieren, um Seiten zu identifizieren, auf denen Verbesserungen vorgenommen werden müssen.

Es ermöglicht Ihnen auch, die Ergebnisse im Laufe der Zeit zu überwachen und die erzielten Verbesserungen zu quantifizieren.

Ich habe auch ein Skript speziell zur Messung der Perzentile und Kategorien für die drei Core Web Vitals erstellt.Das finden Sie hier.

Ich hoffe, dies war hilfreich für alle, die ihre Leistungstests automatisieren und die PSI-API weiter erkunden möchten.

Bitte zögern Sie nicht, eine Kopie dieser Colab-Datei zu speichern und sie zu verwenden, um Ihre Seitengeschwindigkeit zu messen und zu überwachen, oder folgen Sie den Schritten, um Ihre eigene zu schreiben.Sie können hier auf alle Code-Snippets zugreifen, die ich in diesem Beitrag geteilt habe.

Mehr Ressourcen:


Bildnachweis

Alle Screenshots vom Autor, Juni 2020