So erstellen Sie eine Website oder ein Blog im Jahr 2020 - Kostenlose und einfache Anleitung zum Erstellen einer Website

Verwendung von Python zur Überwachung und Messung der Website-Leistung

Verwendung von Python zur Überwachung und Messung der Website-Leistung

Im vergangenen Monat hat Google eine Reihe von Verbesserungen angekündigt, wie die Nutzererfahrung anhand der wichtigsten Geschwindigkeits- und Leistungsmetriken gemessen werden kann.

Zufälligerweise habe ich an der Erstellung eines Python-Skripts gearbeitet, das die PSI-API (Google PageSpeed ​​Insights) verwendet, um Metriken für mehrere Seiten gleichzeitig zu erfassen, ohne den Test für jede einzelne URL ausführen zu müssen.

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

Das Beste am Skript ist, dass Sie, sobald Sie die Grundlagen eingerichtet haben, eine Reihe verschiedener Metriken extrahieren können, die sowohl im Seitengeschwindigkeitstest als auch in der Leuchtturmanalyse enthalten sind.

Eine Einführung in wichtige Webmetriken

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

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

Google hat sie als eine Möglichkeit beschrieben, “Ihre Website-Erfahrung zu quantifizieren und Verbesserungsmöglichkeiten zu identifizieren”, und ihre Verlagerung, sich auf die Nutzererfahrung zu konzentrieren, weiter hervorzuheben.

Core Web Vitals sind benutzerzentrierte Messdaten aus der Praxis, die wichtige Aspekte der Benutzererfahrung messen. Ladezeit, Interaktivität und Stabilität.

Ich werde nicht zu sehr ins Detail gehen, indem ich dies in diesem Beitrag erkläre. Weitere Informationen finden Sie hier, aber diese neuen Metriken sind:

  • Das größte inhaltliche Gemälde.
  • Verzögerung bei der ersten Eingabe.
  • Kumulative Designänderung.

LCP - FID - CLS

Darüber hinaus hat Google letzte Woche angekündigt, ein neues Token für das Suchranking einzuführen, das diese Metriken zusammen mit vorhandenen Token für die Seitenerfahrung wie Kompatibilität mit Mobilgeräten und HTTPS-Sicherheit kombiniert, um sicherzustellen, dass weiterhin Websites bereitgestellt werden hohe Qualität für die Benutzer

Überwachung der Leistungsmetrik

Dieses Update wird voraussichtlich 2021 eingeführt. Google hat bestätigt, dass keine sofortigen Maßnahmen erforderlich sind.

Um uns auf diese Änderungen vorzubereiten, wurden die Tools zur Messung der Seitengeschwindigkeit aktualisiert, darunter PSI, Google Lighthouse und der Geschwindigkeitsbericht der Google Search Console.

Wo kommt die Pagespeed Insights API ins Spiel?

Googles PageSpeed ​​Insights ist ein nützliches Tool zum Anzeigen einer Zusammenfassung der Webseitenleistung 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 diese Seite für Seite verwendet werden.

Wenn Sie jedoch an einer großen Site arbeiten und umfangreiche Informationen erhalten möchten, kann die API hilfreich sein, um mehrere Seiten gleichzeitig zu analysieren, ohne dass URLs einzeln verbunden werden müssen.

Ein Python-Skript zum Messen der Leistung

Ich habe das folgende Python-Skript erstellt, um wichtige Leistungsmetriken im Maßstab zu messen und Zeit beim manuellen Testen jeder URL zu sparen.

Dieses Skript verwendet Python, um Anforderungen 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 beschlossen, dieses Skript in Google Colab zu schreiben, da es eine großartige Möglichkeit ist, Python zu schreiben, und eine einfache Freigabe ermöglicht, sodass dieser Beitrag die Einstellungen mit Google Colab durchläuft.

Es kann jedoch auch lokal ausgeführt werden, mit einigen Einstellungen zum 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 ausgeführt wird, um sie nicht mit Anforderungen zu überladen.

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

Sehen wir uns die Schritte an, 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 sind mit der Importfunktion einfach zu installieren.

Die Pakete, die wir brauchen werden, sind:

  • urllib: Zum Arbeiten, Öffnen, Lesen und Analysieren von URLs.
  • json: Ermöglicht das Konvertieren einer JSON-Datei in Python oder einer Python-Datei in JSON.
  • Petitionen: Eine HTTP-Bibliothek zum Senden aller Arten von HTTP-Anforderungen.
  • Pandas: Wir werden hauptsächlich zur Datenanalyse und -manipulation verwendet, um Datenrahmen zu erstellen.
  • Stunde: Ein Modul, mit dem mit Zeiten gearbeitet werden kann. Wir verwenden es, um ein Zeitintervall zwischen Anforderungen bereitzustellen.
  • Aufzeichnungen: Mit Google Colab können Sie Dateien hochladen und herunterladen.
  • io: Die Standardschnittstelle für den Zugriff auf Dateien.
# Import required packages 
import json
import requests
import pandas as pd
import urllib
import time
from google.colab import files
import io

Schritt 2: Konfigurieren Sie eine API-Anforderung

Der nächste Schritt besteht darin, die API-Anforderung zu konfigurieren. Vollständige Anweisungen finden Sie hier, aber im Wesentlichen sieht der Befehl folgendermaßen aus:

urllib.request.urlopen und fügen Sie es einer Variablen mit dem Namen hinzu (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 im Allgemeinen so aus, wenn sie im Code-Editor Ihrer Wahl geöffnet wird.

Lesen Sie die JSON-Datei

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

lesbare Baumansicht

In der JSON-Datei werden Felddaten angezeigt, die in loadExperience gespeichert sind, sowie Labordaten, die Sie unter lighthouseResult finden.

Um die gewünschten Metriken zu extrahieren, können wir das JSON-Dateiformat verwenden, da wir sehen können, welche Metrik sich in den einzelnen Abschnitten befindet.

Die erste Eingangsverzögerung wird beispielsweise in loadExperience gefunden.

Die erste Eingangsverzögerung finden Sie in loadExperience

Während First Contentful Paint bei lighthouseResult ist.

Das erste fröhliche Gemälde steht unter LighthouseResult

Unter lighthouseResult-Audits werden viele andere Metriken gespeichert, z.

  • Geschwindigkeitsindex.
  • Erstes fröhliches Malen.
  • Kumulative Designänderung.

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

Der nächste Schritt ist das Laden einer URL-CSV-Datei, die über die PSI-API ausgeführt werden soll. Sie können eine Liste Ihrer Site-URLs mit einem Crawler-Tool wie DeepCrawl erstellen.

Da wir die API verwenden, würde ich empfehlen, hier eine kleinere Beispiel-URL zu verwenden, insbesondere wenn Sie eine große Site haben.

Sie können beispielsweise Seiten mit dem höchsten Verkehrsaufkommen oder Seiten mit dem höchsten Umsatz verwenden. Wenn Ihre Site über Vorlagen verfügt, ist sie alternativ ideal zum Testen von Sätzen dieser Vorlagen.

Sie können auch eine hinzufügen (Beachten Sie, dass diese Methode zum Hochladen von CSV-Dateien in Google Colab dient).

Sobald dies geladen ist, werden wir die Pandas-Bibliothek verwenden, um die CSV in einen DataFrame zu konvertieren, den wir in den folgenden Schritten ausführen 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 Dataframe
df = pd.read_csv(io.BytesIO(uploaded[filename]))

df.head()

Der DataFrame sieht folgendermaßen aus, beginnend mit der Nullindizierung.

Datenrahmen

Schritt 6: Speichern Sie die Ergebnisse in einem Antwortobjekt

Der nächste Schritt besteht darin, ax in dem Bereich hier zu verwenden, der die URLs darstellt, die wir durch die Schleife laufen, sowie das Antwortobjekt verhindert, dass sich die URLs im Laufe der Zeit gegenseitig überschreiben, und ermöglicht es uns, die Daten für zu speichern seine zukünftige Verwendung.

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

Ich habe hier auch die Ruhezeit auf 30 Sekunden eingestellt, um die Anzahl der API-Aufrufe nacheinander zu verringern.

Alternativ können Sie am Ende des URL-Befehls einen API-Schlüssel hinzufügen, wenn Sie Anforderungen schneller stellen möchten.

Das Einrücken ist auch hier wichtig, da sie, da jeder Schritt Teil der for-Schleife ist, innerhalb des Befehls eingerückt werden müssen.

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 tabellenartige Datenstruktur mit Spalten und Zeilen, in denen Daten gespeichert werden. Wir müssen einfach eine Spalte für jede Metrik hinzufügen und sie entsprechend benennen, wie folgt:

# 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)

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

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

Weitere Informationen zu den einzelnen Metriken sowie zur Interpretation der Ergebnisse finden Sie auf den oben verlinkten einzelnen Zielseiten.

Ich habe mich auch dafür entschieden, den Geschwindigkeitsindex und die Gesamtkategorie einzuschließen, die 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.

Auch hier verwenden wir eine for-Schleife, um die Antwortobjektdatei zu durchlaufen und eine Folge von Listenindizes festzulegen, um nur die spezifischen Metriken zurückzugeben.

Dazu definieren wir den Namen der Spalte des DataFrame sowie die spezifische Kategorie des Antwortobjekts, aus dem wir jede Metrik für jede URL extrahieren.

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 so konfiguriert, dass die oben genannten Schlüsselmetriken extrahiert werden, damit Sie diese Daten sofort zum Sammeln verwenden können.

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

Hier ist die JSON-Datei hilfreich, um zu überprüfen, wo sich die einzelnen Metriken in der Liste befinden.

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

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

Auch hier ist es wichtig sicherzustellen, dass jede dieser Optionen in die Schleife fällt, da sie sonst nicht in die Iteration einbezogen werden und nur ein Ergebnis für eine URL generiert wird.

Unser endgültiger DataFrame wird so aussehen.

endgültiger Datenrahmen

Schritt 9: Konvertieren Sie den DataFrame in eine CSV-Datei

Der letzte Schritt besteht darin, eine Zusammenfassungsdatei zu erstellen, um alle Ergebnisse zu sammeln, damit wir sie in ein Format konvertieren können, das wir leicht analysieren können, beispielsweise eine CSV-Datei.

summary = df_pagespeed_results

df_pagespeed_results.head()

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

.str.replace-Methode für jede Spalte.

#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', '')

Dann werden wir die verwenden Bildnachweis

Alle Screenshots vom Autor, Juni 2020