Premiers pas avec l'API Page Speed ​​de Google

Publié: 2019-03-11

La vitesse de la page est l'un des principaux indicateurs du temps que quelqu'un passera sur votre site. Le chargement lent des pages peut entraîner des taux de rebond plus élevés, des taux de conversion plus faibles et, par conséquent, une baisse des revenus.

Pour savoir si les temps de chargement peuvent affecter la rétention et la conversion de votre audience, l'outil Page Speed ​​Insights de Google est un excellent point de départ. L'API Page Speed ​​de Google vous permet de vous connecter à ces données et d'intégrer des informations dans votre pile de données. Nous l'avons utilisé pour créer notre propre outil de suivi d'analyse Page Speed ​​afin de surveiller les principaux indicateurs d'expérience utilisateur pour nos clients.

Qu'y a-t-il de si génial avec l'API Page Speed ​​​​Insights ?

Avec cet outil, vous pouvez brancher une URL et recevoir un résumé de ses performances. C'est idéal pour échantillonner une poignée d'URL, mais que se passe-t-il si vous avez un site Web volumineux et que vous souhaitez obtenir un aperçu complet des performances de plusieurs sections et types de pages ?

C'est là que l'API entre en jeu. L'API Page Speed ​​Insights de Google nous donne la possibilité d'analyser les performances de nombreuses pages et d'enregistrer les résultats, sans avoir à demander explicitement les URL une par une et à interpréter les résultats manuellement.

Dans cet esprit, nous avons élaboré un guide simple qui vous permettra de commencer à utiliser l'API pour votre propre site Web. Une fois que vous vous serez familiarisé avec le processus décrit ci-dessous, vous verrez comment il peut être utilisé pour analyser la vitesse de votre site à grande échelle, suivre son évolution au fil du temps ou même mettre en place des outils de surveillance.

Ce guide suppose une certaine familiarité avec les scripts. Ici, nous utilisons Python pour nous interfacer avec l'API et analyser les résultats.

Objectifs

Dans cet article, vous apprendrez à :

  1. Construire une requête API Google Page Speed ​​Insights
  2. Faire des requêtes API pour un tableau d'URL
  3. Extraire les informations de base de la réponse de l'API
  4. Exécutez l'exemple de script donné en Python

Mise en place

Vous devrez suivre quelques étapes avant d'interroger l'API Page Speed ​​​​Insights avec Python.

  • Configuration de l'API : de nombreuses API Google nécessitent des clés API, des mots de passe et d'autres mesures d'authentification. Cependant, vous n'avez besoin de rien de tout cela pour démarrer avec l'API Google Page Speeds !
  • Installation de Python 3 : Si vous n'avez jamais utilisé Python auparavant, nous vous recommandons de commencer avec la distribution Anaconda (version Python 3.x), qui installe Python avec des bibliothèques d'analyse de données populaires telles que Pandas.

Faire les demandes

Les bases d'une demande

L'API peut être interrogée sur ce point de terminaison à l'aide de requêtes GET :

 GET https://www.googleapis.com/pagespeedonline/v5/runPagespeed

Nous ajoutons ensuite des paramètres supplémentaires pour spécifier l'URL dont nous voulons trouver la vitesse de la page et le type d'appareil à utiliser, comme indiqué ci-dessous :

 https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url={url}&strategy={device_type}

Lorsque vous effectuez des demandes, vous devez remplacer {url} par l'URL de la page encodée en URL de votre site Web, et {device_type} par mobile ou ordinateur de bureau, pour spécifier le type d'appareil.

Paquets Python

Afin de faire des requêtes, de les ingérer puis d'écrire les résultats dans des tables, nous allons utiliser quelques bibliothèques python :

  • urllib : Pour effectuer les requêtes HTTP.
  • json : pour analyser et lire les objets de réponse.
  • pandas : Pour enregistrer les résultats au format CSV.

Construction de la requête

Pour faire une requête API en Python, nous pouvons utiliser la méthode urllib.request.urlopen :

 import urllib.request import urllib.parse url = 'http://www.example.com' escaped_url = urllib.parse.quote(url) device_type = 'mobile' # Construct request url contents = urllib.request.urlopen( 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url={}&strategy={}' .format(escaped_url, device_type) ).read().decode('UTF-8')

Cette requête doit renvoyer une réponse JSON (étonnamment grande). Nous en discuterons plus en détail sous peu.

Faire plusieurs requêtes

L'un des principaux arguments de vente de cette API est qu'elle nous permet d'augmenter la vitesse des pages pour des lots d'URL. Voyons comment cela peut être fait avec Python.

Une option consiste à stocker les paramètres de la requête ( url et device_type ) dans un CSV, que nous pouvons charger dans un Pandas DataFrame pour effectuer une itération. Notez ci-dessous que chaque requête ou paire unique url + device_type a sa propre ligne.

Stocker les données au format CSV

 URL, device_type 0, https://www.example.com, desktop 1, https://www.example.com, mobile 2, https://www.example.com/blog, desktop 3, https://www.example.com/blog, mobile

Charger le CSV

 import pandas as pd df = pd.read_csv import pandas as pd df = pd.read_csv (url_file)

Une fois que nous avons un ensemble de données avec toutes les URL à demander, nous pouvons les parcourir et faire une demande d'API pour chaque ligne. Ceci est illustré ci-dessous :

 import time # This is where the responses will be stored response_object = {} # Iterating through df for i in range(0, len(df)): # Error handling try: print('Requesting row #:', i) # Define the request parameters url = df.iloc[i]['URL'] device_type = df.iloc[i]['device_type'] # Making request contents = urllib.request.urlopen( 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url={}&strategy={}' .format(url, device_type) ).read().decode('UTF-8') # Converts to json format contents_json = json.loads(contents) # Insert returned json response into response_object response_object[device_type][url] = contents_json print('Sleeping for 20 seconds between responses.') time.sleep(20) except Exception as e: print('Error:', e) print('Returning empty response for url:', url) response_object[device_type][url] = {}

Lire la réponse

Avant d'appliquer des filtres ou de formater les données, nous pouvons d'abord stocker les réponses complètes pour une utilisation future comme ceci :

 import json from datetime import datetime f_name ='data/{}-response.json'.format(datetime.now().strftime("%Y-%m-%d_%H:%M:%S")) with open(f_name, 'w') as outfile: json.dump(response_object, outfile, indent=4)

Comme mentionné ci-dessus, chaque réponse renvoie un objet JSON. Ils ont de nombreuses propriétés différentes liées à l'URL donnée et sont beaucoup trop volumineux pour être déchiffrés sans filtrage ni formatage.

Pour ce faire, nous utiliserons la bibliothèque Pandas, qui permet d'extraire facilement les données souhaitées sous forme de tableau et de les exporter au format CSV.

C'est la structure générale de la réponse. Les données sur les temps de chargement ont été minimisées en raison de leur taille.

Structure générale de la réponse

Entre autres informations, il existe deux principales sources de données de vitesse de page incluses dans la réponse : les données de laboratoire, stockées dans "lighthouseResult" et les données de terrain, stockées dans "loadingExperience". Dans cet article, nous nous concentrerons uniquement sur les données de terrain, qui proviennent de la foule en fonction des utilisateurs du monde réel sur le navigateur Chrome.

En particulier, nous allons extraire les métriques suivantes :

  • URL demandée et URL finale
    • Nous avons besoin à la fois de l'URL demandée et de l'URL résolue finale qui ont été auditées pour nous assurer qu'elles sont identiques. Cela nous aidera à identifier que le résultat provient de l'URL prévue au lieu d'une redirection.

    Nous pouvons voir que les deux URL sont identiques dans 'lighthouseResult' ci-dessus.

  • Première peinture de contenu (ms)
    • Il s'agit du temps entre la première navigation de l'utilisateur sur la page et le moment où le navigateur affiche pour la première fois un élément de contenu, indiquant à l'utilisateur que la page est en cours de chargement.
    • Cette métrique est mesurée en millisecondes.
  • First Contentful Paint (proportions de lente, moyenne, rapide)
    • Cela montre le pourcentage de pages qui ont des temps de chargement lents, moyens et rapides de First Contentful Paint.

    Temps de chargement de First Contentful Paint en millisecondes, étiqueté «centile» et proportion de lent, moyen et rapide.

Tous ces résultats peuvent être extraits pour l'une ou l'autre, ou les deux, des données mobiles et de bureau.

Si nous appelons notre dataframe Pandas df_field_responses, voici comment nous extrairions ces propriétés :

 import pandas as pd # Specify the device_type (mobile or desktop) device_type = 'mobile' # Create dataframe to store responses df_field_responses = pd.DataFrame( columns=['requested_url', 'final_url', 'FCM_ms', 'FCP_category', 'FCP_fast', 'FCP_avg', 'FCP_slow' ] ) for (url, i) in zip( response_object[device_type].keys(), range(0, len(df_field_responses)) ): try: print('Trying to insert response for url:', url) # We reuse this below when selecting data from the response fcp_loading = response_object[device_type][url] ['loadingExperience']['metrics']['FIRST_CONTENTFUL_PAINT_MS'] # URLs df_field_responses.loc[i, 'requested_url'] = response_object[device_type][url]['lighthouseResult']['requestedUrl'] df_field_responses.loc[i, 'final_url'] = response_object[device_type][url]['lighthouseResult']['finalUrl'] # Loading experience: First Contentful Paint (ms) df_field_responses.loc[i, 'FCP_ms'] = fcp_loading['percentile'] df_field_responses.loc[i, 'FCP_category'] = fcp_loading['category'] # Proportions: First Contentful Paint df_field_responses.loc[i, 'FCP_fast'] = fcp_loading['distributions'][0]['proportion'] df_field_responses.loc[i, 'FCP_avg'] = fcp_loading['distributions'][1]['proportion'] df_field_responses.loc[i, 'FCP_slow'] = fcp_loading['distributions'][2]['proportion'] print('Inserted for row {}: {}'.format(i, df_field_responses.loc[i])) except Exception as e: print('Error:', e) print('Filling row with Error for row: {}; url: {}'.format(i, url)) # Fill in 'Error' for row if a field couldn't be found df_field_responses.loc[i] = ['Error' for i in range(0, len(df_field_responses.columns))]

Ensuite, pour stocker la trame de données, df_field_responses, dans un CSV :

 df_field_responses.to_csv('page_speeds_filtered_responses.csv', index=False)

Exécuter les scripts sur GitHub

Le référentiel sur GitHub contient des instructions sur la façon d'exécuter les fichiers, mais voici une ventilation rapide.

  1. Avant d'exécuter les exemples de scripts sur GitHub, vous devrez cloner le référentiel à l'aide de
    • git clone https://github.com/Ayima/page-speed-blog-post.git
  2. Créez ensuite un fichier CSV avec les URL à interroger.
  3. Remplissez le fichier de configuration avec le nom du fichier URL.
  4. Commande pour exécuter les scripts :
 python main.py --config-file config.json

Quelque chose à garder à l'esprit:

L'API a une limite quant au nombre de requêtes que vous pouvez faire par jour et par seconde.

Il existe plusieurs façons de se préparer à cela, notamment:

  • Gestion des erreurs : répéter les requêtes qui renvoient une erreur
  • Throttling : dans votre script pour limiter le nombre de requêtes envoyées par seconde, et redemander si une URL échoue.
  • Obtenez une clé API si nécessaire (généralement si vous faites plus d'une requête par seconde).

J'espère qu'après avoir lu ce guide, vous serez en mesure d'être opérationnel avec quelques requêtes de base de l'API Google Page Speed ​​Insights. N'hésitez pas à nous contacter sur twitter @ayima pour toute question ou si vous rencontrez des problèmes !

Comment nous utilisons l'API Page Speeds chez Ayima

Chez Ayima, nous collectons et entreposons en permanence les vitesses de page pour les clients. Cela nous aide à garder un œil sur la santé de leurs sites Web et à identifier les tendances négatives ou positives. En surveillant les vitesses pour une variété de pages, nous sommes en mesure de visualiser les performances par section de site ou type de page (par exemple, les pages de produits VS les pages de catégories pour les sites Web de commerce électronique).

Nous suivons également d'autres mesures intéressantes fournies par l'API, y compris les données Google Lab, et présentons le tout dans un tableau de bord interactif. Pour plus d'informations à ce sujet, n'hésitez pas à nous contacter, nous serions ravis de discuter avec vous !

Code source : vous pouvez trouver le projet GitHub avec un exemple de script à exécuter ici.