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

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