Comment utiliser Python pour surveiller et mesurer les performances d’un site Web

Au cours du mois dernier, Google a annoncé une série de progrès sur la façon dont ils mesureront l’expérience utilisateur grâce à des mesures clés de vitesse et de performances.

Par coïncidence, j’ai travaillé sur la création d’un script Python qui utilise l’API Google PageSpeed ​​Insights (PSI) pour collecter des mesures pour plusieurs pages à la fois, sans avoir besoin d’exécuter le test pour chaque URL individuelle.

Après les annonces de Google, je pensais que ce serait le moment idéal pour le partager, ainsi que pour expliquer comment vous pouvez créer ce script Python pour les débutants.

La meilleure chose à propos du script est qu’une fois les bases en place, vous pourrez extraire un certain nombre de mesures différentes qui peuvent être trouvées dans le test de vitesse de page ainsi que dans l’analyse du phare.

Une introduction aux métriques vitales du Web

Début mai, Google a présenté Core Web Vitals, qui est un sous-ensemble de ses principales mesures Web Vitals.

Ces mesures sont utilisées pour fournir des conseils sur la qualité de l’expérience utilisateur sur un site Web.

Google les a décrits comme un moyen de “vous aider à quantifier l’expérience de votre site et à identifier les opportunités d’amélioration”, soulignant davantage leur changement de focalisation sur l’expérience utilisateur.

Les Web Vitals de base sont des mesures centrées sur l’utilisateur du monde réel qui mesurent les aspects clés de l’expérience utilisateur; temps de charge, interactivité et stabilité.

Je ne vais pas entrer dans trop de détails en expliquant cela dans ce post, vous pouvez trouver plus d’informations ici, mais ces nouvelles mesures sont:

• La plus grande peinture de contenu.
• Délai de première entrée.
• Changement de conception cumulatif.

En plus de cela, Google a annoncé la semaine dernière qu’il introduirait un nouveau jeton de classement de recherche qui combinera ces mesures avec les jetons d’expérience de page existants, tels que la compatibilité des appareils mobiles et la sécurité HTTPS, pour s’assurer qu’ils continuent à servir les sites Web. haute qualité pour les utilisateurs

Surveillance de la métrique des performances

Cette mise à jour devrait être déployée en 2021, et Google a confirmé qu’aucune action immédiate n’est requise.

Cependant, pour nous aider à nous préparer à ces changements, ils ont mis à jour les outils utilisés pour mesurer la vitesse des pages, notamment PSI, Google Lighthouse et le rapport de vitesse de la Google Search Console.

Où l’API Pagespeed Insights entre-t-elle en jeu?

PageSpeed ​​Insights de Google est un outil utile pour afficher un résumé des performances des pages Web et utilise des données de terrain et de laboratoire pour générer des résultats.

C’est un excellent moyen d’obtenir un aperçu d’une poignée d’URL, car il est utilisé page par page.

Cependant, si vous travaillez sur un grand site et que vous souhaitez obtenir des informations à grande échelle, l’API peut être utile pour analyser plusieurs pages à la fois, sans avoir besoin de connecter des URL individuellement.

Un script Python pour mesurer les performances

J’ai créé le script Python suivant pour mesurer les mesures de performance clés à grande échelle, pour gagner du temps passé à tester manuellement chaque URL.

Ce script utilise Python pour envoyer des demandes à l’API Google PSI pour collecter et extraire les métriques affichées à la fois dans PSI et Lighthouse.

J’ai décidé d’écrire ce script dans Google Colab car c’est un excellent moyen de commencer à écrire Python et permet un partage facile afin que ce post passe en revue les paramètres à l’aide de Google Colab.

Cependant, il peut également être exécuté localement, avec certains paramètres de téléchargement et de téléchargement de données.

Il est important de noter que certaines étapes peuvent prendre un certain temps, en particulier lorsque chaque URL est exécutée via l’API, afin de ne pas la surcharger de demandes.

Par conséquent, vous pouvez exécuter le script en arrière-plan et y revenir lorsque les étapes sont terminées.

Voyons les étapes nécessaires pour que ce script soit opérationnel.

Étape 1: installez les packages requis

Avant de commencer à écrire du code, nous devons installer certains packages Python qui sont nécessaires avant de pouvoir utiliser le script. Ceux-ci sont faciles à installer à l’aide de la fonction d’importation.

Les packages dont nous aurons besoin sont:

• urllib: Pour travailler avec, ouvrir, lire et analyser des URL.
• json: Vous permet de convertir un fichier JSON en Python ou un fichier Python en JSON.
• pétitions: Une bibliothèque HTTP pour envoyer toutes sortes de requêtes HTTP.
• pandas: Principalement utilisé pour l’analyse et la manipulation de données, nous l’utilisons pour créer des blocs de données.
• heure: Un module pour travailler avec les temps, nous l’utilisons pour fournir un intervalle de temps entre les requêtes.
• enregistrements: À partir de Google Colab, cela vous permettra de télécharger et de télécharger des fichiers.
• io: L’interface par défaut utilisée pour accéder aux fichiers.

# Import required packages 
import json
import requests
import pandas as pd
import urllib
import time
from google.colab import files
import io 

Étape 2: configurer une demande d’API

L’étape suivante consiste à configurer la demande d’API. Des instructions complètes peuvent être trouvées ici, mais essentiellement la commande ressemblera à ceci:

urllib.request.urlopen et ajoutez-le à une variable appelée (Notez que cette méthode est pour convertir et télécharger des fichiers JSON dans Google Colab).

Étape 4: lire le fichier JSON

Le fichier JSON ressemblera généralement à ceci, lorsqu’il est ouvert dans l’éditeur de code de votre choix.

C’est assez difficile à comprendre, mais l’utilisation d’un visualiseur JSON en ligne vous permettra de le transformer en une arborescence lisible.

Le fichier JSON affiche les données de champ, qui sont stockées dans loadingExperience, et les données de laboratoire que vous pouvez trouver sur lighthouseResult.

Pour extraire les métriques souhaitées, nous pouvons utiliser le format de fichier JSON, car nous pouvons voir quelle métrique se trouve sous chaque section.

Par exemple, le premier délai d’entrée se trouve dans loadingExperience.

Alors que First Contentful Paint est à lighthouseResult.

Il existe de nombreuses autres mesures stockées dans les audits LighthouseResult, telles que:

• Indice de vitesse.
• Première peinture heureuse.
• Changement de conception cumulatif.

Étape 5: charger un CSV et le stocker en tant que trame de données Pandas

L’étape suivante consiste à charger un fichier CSV URL que nous voulons exécuter via l’API PSI. Vous pouvez générer une liste des URL de votre site à partir d’un outil d’exploration, comme DeepCrawl.

Étant donné que nous utilisons l’API, je recommanderais d’utiliser un exemple d’URL plus petit défini ici, surtout si vous avez un grand site.

Par exemple, vous pouvez utiliser des pages avec les niveaux de trafic les plus élevés ou des pages qui génèrent le plus de revenus. Alternativement, si votre site contient des modèles, il serait idéal pour tester des ensembles de ceux-ci.

Vous pouvez également ajouter un (Notez que cette méthode permet de télécharger des fichiers CSV sur Google Colab).

Une fois celui-ci chargé, nous utiliserons la bibliothèque Pandas pour convertir le CSV en un DataFrame, que nous pouvons parcourir dans les étapes suivantes.

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

Le DataFrame ressemblera à ceci, en commençant par une indexation nulle.

Étape 6: enregistrer les résultats dans un objet de réponse

L’étape suivante consiste à utiliser ax dans la plage ici, qui représentera les URL que nous exécutons dans la boucle, ainsi que l’objet de réponse empêche les URL de se remplacer au fur et à mesure et nous permet d’enregistrer les données pour son utilisation future.

C’est également là que nous utiliserons la variable d’en-tête de colonne pour définir le paramètre de demande d’URL, avant de le convertir en fichier JSON.

J’ai également défini le temps de veille ici à 30 secondes, afin de réduire le nombre d’appels d’API effectués consécutivement.

Vous pouvez également ajouter une clé API à la fin de la commande URL si vous souhaitez effectuer des demandes plus rapidement.

L’indentation est également importante ici car, comme chaque étape fait partie de la boucle for, elles doivent être indentées dans la commande.

Étape 7: créer un bloc de données pour stocker les réponses

Nous devons également créer un DataFrame qui stocke les métriques que nous voulons extraire de l’objet de réponse.

Un DataFrame est une structure de données de type table, avec des colonnes et des lignes qui stockent des données. Nous devons simplement ajouter une colonne pour chaque métrique et la nommer de manière appropriée, comme suit:

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

Aux fins de ce script, j’ai utilisé les métriques Core Web Vital, ainsi que les métriques de chargement et d’interactivité supplémentaires utilisées dans la version actuelle de Lighthouse.

Ces mesures ont des pondérations différentes qui sont ensuite utilisées dans le score de performance global:

Vous pouvez en savoir plus sur chaque statistique, ainsi que sur la façon d’interpréter les scores, sur leurs pages de destination individuelles liées ci-dessus.

J’ai également choisi d’inclure l’indice de vitesse et la catégorie globale qui fourniront un score lent, moyen ou rapide.

Étape 8: extraire les métriques de l’objet de réponse

Une fois que nous avons enregistré l’objet de réponse, nous pouvons désormais le filtrer et extraire uniquement les mesures souhaitées.

Ici, encore une fois, nous utiliserons une boucle for pour parcourir le fichier objet de réponse et définir une séquence d’index de liste pour renvoyer uniquement les mesures spécifiques.

Pour cela, nous allons définir le nom de la colonne du DataFrame, ainsi que la catégorie spécifique de l’objet de réponse dont nous allons extraire chaque métrique, pour chaque URL.

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

J’ai configuré ce script pour extraire les métriques clés que j’ai mentionnées ci-dessus afin que vous puissiez immédiatement l’utiliser pour collecter ces données.

Cependant, il est possible d’extraire un certain nombre d’autres mesures utiles qui peuvent être trouvées à la fois dans les tests PSI et dans l’analyse Lighthouse.

C’est là que le fichier JSON est utile pour vérifier où chaque métrique se trouve dans la liste.

Par exemple, lors de l’extraction de métriques d’audits de phares, telles que la valeur d’affichage de Time to Interactive, vous utiliseriez les éléments suivants:

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

Encore une fois, il est important de s’assurer que chacun de ces éléments se trouve dans la boucle, sinon ils ne seront pas inclus dans l’itération et un seul résultat sera généré pour une URL.

Notre DataFrame final ressemblera à ceci;

Étape 9: convertir le DataFrame en un fichier CSV

La dernière étape consiste à créer un fichier récapitulatif pour collecter tous les résultats, afin que nous puissions le convertir dans un format que nous pouvons facilement analyser, par exemple un fichier 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, méthode sur chaque colonne.

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

Ensuite, nous utiliserons le Crédits image

Toutes les captures d’écran prises par l’auteur, juin 2020