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.

LCP - FID - CLS

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.

Lire le fichier JSON

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

vue arborescente 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.

Le premier délai d'entrée se trouve dans loadingExperience

Alors que First Contentful Paint est Ă  lighthouseResult.

Le premier tableau heureux est sous le phare

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.

trame de données

É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;

trame de données finale

É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