Comment utiliser l'API PageSpeed ​​Insights pour surveiller les performances des pages

Il existe des outils pour vous aider à surveiller les performances des pages et à évaluer vos améliorations. L'un des meilleurs est PageSpeed ​​Insights. Il est disponible en tant qu'application Web et en tant qu'onglet Lighthouse dans les DevTools de Chrome (les mêmes DevTools sont également disponibles dans Edge, Opera, Brave et Vivaldi).

Les performances des pages Web sont plus importantes que jamais. Les utilisateurs s'attendent à une expérience fluide et réactive qui rivalise avec les applications de bureau. De plus, les Core Web Vitals de Google mesurent les performances des pages - ils influencent le PageRank et vos efforts d'optimisation des moteurs de recherche.

WordPress exécute plus d'un tiers de tous les sites Web, mais les performances sont affectées par un hébergement inefficace, des thèmes lents et une dépendance excessive aux plugins. Vous pouvez résoudre la plupart des problèmes en passant à un bon hébergeur et en utilisant les meilleures techniques de performance.

Accéder au phare

Démarrez Lighthouse en ouvrant la page que vous souhaitez examiner et en appuyant sur Ctrl/Cmd + Maj + I ou en choisissant Outils de développement dans Plus d'outils dans le menu. Passez à l'onglet Phare et cliquez sur le bouton Analyser le chargement de la page . Les résultats sont affichés après quelques secondes :

Vous pouvez explorer les pourcentages de niveau supérieur pour découvrir des informations supplémentaires et des conseils qui traitent des problèmes connus. L'outil est inestimable mais il y a des inconvénients:

• Vous devez démarrer manuellement une exécution pour chaque page que vous testez.
• Il n'est pas facile d'enregistrer comment les facteurs se sont améliorés ou détériorés au fil du temps.
• Il y a beaucoup de données à vérifier et il est facile de se tromper.
• Les détails techniques sont fournis aux développeurs. C'est peut-être écrasant pour les clients et les gestionnaires qui veulent un aperçu rapide des progrès.
• Les exécutions phares peuvent être influencées par les vitesses des périphériques locaux et du réseau, ce qui pourrait conduire à de fausses hypothèses.

L'API PageSpeed ​​Insights fournit un moyen de résoudre ces problèmes afin que les tests puissent être automatisés, enregistrés et comparés.

Qu'est-ce que l'API PageSpeed Insights ?

Google fournit une API REST PageSpeed ​​Insights gratuite qui renvoie des données au format JSON contenant toutes les métriques Lighthouse et plus encore. Il vous permet d'automatiser l'exécution des pages, de stocker les données résultantes, d'examiner les modifications au fil du temps et d'afficher les informations exactes dont vous avez besoin.

L'API PageSpeed ​​Insights émule la façon dont Google voit votre site. Vous pouvez exécuter un rapport tous les quelques jours ou chaque fois que vous publiez une mise à jour des performances.

Les résultats sont utiles mais pas nécessairement indicatifs de l'expérience utilisateur réelle. L'API de performances du navigateur est une meilleure option lorsque vous souhaitez surveiller les performances réelles sur tous les appareils et réseaux de vos utilisateurs.

Démarrage rapide de l'API PageSpeed Insights

Copiez l'adresse suivante dans votre navigateur Web et modifiez l' url pour évaluer les performances de votre page :

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/

Firefox est idéal car il dispose d'un visualiseur JSON intégré, bien que Chrome ait des extensions qui offrent les mêmes fonctionnalités. Le score global de performance de Lighthouse est mis en évidence ci-dessous :

Vous pouvez modifier la chaîne de requête de l'URL de l'API pour vos propres pages et préférences. Le seul paramètre requis est url , par exemple

url=https://mysite.com/page1

Un test de bureau est exécuté par défaut mais vous pouvez le demander explicitement avec :

strategy=desktop

ou passez au mobile avec :

strategy=mobile

Seuls les tests de performances sont exécutés, sauf si vous spécifiez une ou plusieurs catégories d'intérêt :

category=performance
category=accessibility
category=best-practices
category=seo
category=pwa

Une langue spécifique peut être définie en définissant des paramètres régionaux, tels que le français :

locale=fr-FR

et les détails de la campagne Google Analytics peuvent être définis avec :

utm_campaign=<campaign>
utm_source=<source>

Le service est gratuit pour les demandes peu fréquentes, mais vous devrez vous inscrire pour obtenir une clé API Google si vous avez l'intention d'exécuter de nombreux tests à partir de la même adresse IP sur une courte période. La clé est ajoutée à l'URL avec :

key=<api-key>

Vous pouvez créer la chaîne de requête de l'URL en spécifiant vos paramètres choisis séparés par des caractères esperluette (&). L'URL d'API suivante teste la page sur https://mysite.com/ à l'aide d'un appareil mobile pour évaluer les performances et les critères d'accessibilité :

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://mysite.com/&strategy=mobile&category=performance&category=accessibility

Vous pouvez créer vos propres URL ou utiliser l'outil de création d'URL de l'API Google PageSpeed ​​si vous avez besoin d'une assistance supplémentaire.

Résultats JSON de l'API PageSpeed Insights

Les tests renverront généralement environ 600 Ko de données JSON en fonction des catégories que vous avez choisies, du nombre d'actifs dans la page et de la complexité des captures d'écran (intégrées au format base64).

La quantité de données est décourageante, il y a des dédoublements et la documentation des résultats n'est pas toujours claire. Le JSON est divisé en quatre sections comme décrit ci-dessous.

chargementExperience

Il s'agit de mesures calculées pour l'expérience de chargement de page de l'utilisateur final. Il inclut des informations telles que les Core Web Vitals CUMULATIVE_LAYOUT_SHIFT_SCORE, FIRST_CONTENTFUL_PAINT_MS et FIRST_INPUT_DELAY_MS. Les détails et une valeur de « catégorie » renvoient RAPIDE, MOYENNE, LENTE ou AUCUNE si aucune mesure n'a été prise. Exemple:

 "loadingExperience": { "metrics": { "CUMULATIVE_LAYOUT_SHIFT_SCORE": { "percentile": 0, "distributions": [ { "min": 0, "max": 10, "proportion": 0.970 }, { "min": 10, "max": 25, "proportion": 0.017 }, { "min": 25, "proportion": 0.012 } ], "category": "FAST" },

originLoadingExperience

Il s'agit de mesures agrégées calculées pour les expériences de chargement de page de tous les utilisateurs. Les sections sont identiques à loadingExperience ci-dessus et il est peu probable que les sites avec moins de trafic présentent une différence de chiffres.

phareRésultat

Il s'agit de la plus grande section et contient toutes les métriques Lighthouse. Il fournit des informations sur le test:

• requestUrl - l'URL que vous avez demandée
• finalUrl – la page réelle testée après avoir suivi toutes les redirections
• lighthouseVersion – la version du logiciel
• fetchTime - l'heure à laquelle le test a été exécuté
• userAgent – ​​la chaîne de l'agent utilisateur du navigateur utilisé pour le test
• environnement - informations étendues sur l'agent utilisateur
• configSettings - les paramètres transmis à l'API

Ceci est suivi d'une section "audits" avec de nombreuses sections, y compris unused-javascript, unused-css-rules, total-byte-weight, redirections, dom-size, most-contentful-paint-element, server-response-time, network -demandes, changement de mise en page cumulatif, peinture de premier sens, vignettes de capture d'écran et capture d'écran pleine page.

La plupart des métriques d'audit fournissent une section « détails » qui contient des facteurs tels que « overallSavingsBytes » et « overallSavingsMs » qui évaluent les avantages de la mise en œuvre d'une amélioration des performances.

Les sections "capture d'écran" pleine page et miniature contiennent des données d'image base64 intégrées.

Une section "métriques" fournit un résumé de toutes les métriques dans un tableau "éléments", par exemple

 "metrics": { "id": "metrics", "title": "Metrics", "description": "Collects all available metrics.", "score": null, "scoreDisplayMode": "informative", "details": { "type": "debugdata", "items": [{ "observedFirstVisualChange": 234, "observedFirstContentfulPaint": 284, "interactive": 278, "observedFirstPaintTs": 1579728174422, "observedDomContentLoaded": 314, // ... etc ... }] }, "numericValue": 278, "numericUnit": "millisecond" },

La section "audits" est suivie de "catégories" qui fournissent des scores globaux Lighthouse pour les catégories choisies transmises sur l'URL de l'API :

 "categories": { "performance": { "id": "performance", "title": "Performance", "score": 0.97, "auditRefs": [ //...

Le « score » est un nombre compris entre 0 et 1 qui est normalement affiché sous forme de pourcentage dans les rapports Lighthouse. En général, un score de :

• 0,9 à 1,0 c'est bien
• 0,5 à moins de 0,9 indique qu'une amélioration est nécessaire
• inférieur à 0,5 est médiocre et nécessite une attention plus urgente

La section « auditRefs » fournit une liste de toutes les métriques et des pondérations utilisées pour calculer chaque score.

analyseUTCTimestamp

Enfin, le temps d'analyse est rapporté. Celle-ci doit être identique à l'heure indiquée dans lighthouseResult.fetchTime.

Métriques de résultat JSON utiles

Je vous recommande de sauvegarder et d'examiner le résultat JSON dans un éditeur de texte. Certains ont des formateurs JSON intégrés ou disponibles sous forme de plugins. Alternativement, vous pouvez utiliser des outils en ligne gratuits tels que :

• Formateur et validateur JSON
• Formateur JSON
• jsonformatter.io

Les mesures suivantes sont susceptibles d'être utiles. N'oubliez pas de définir les options de catégorie associées sur l'URL si nécessaire.

Métriques récapitulatives

Notes globales de 0 à 1 :

Indicateurs de performance

Ceux-ci incluent les scores Core Web Vitals de 0 à 1 :

D'autres scores de performances utiles incluent :

Vous pouvez généralement obtenir des chiffres et des unités réels tels que :

• lighthouseResult.audits.total-byte-weight.numericValue –
  la taille totale de la page, par exemple 450123
• lighthouseResult.audits.total-byte-weight.numericUnit –
  les unités utilisées pour la taille totale de la page, par exemple "octet"

Alternativement, "displayValue" contient généralement un message lisible avec à la fois le chiffre et l'unité :

• lighthouseResult.audits.server-response-time.displayValue –
  un message sur le temps de réponse, par exemple "Le document racine a pris 170 ms"
• lighthouseResult.audits.dom-size.displayValue –
  un message sur le nombre d'éléments dans le DOM, par exemple "543 éléments"

Créer un tableau de bord des performances sans code

Les flux d'API en direct peuvent être lus et traités dans de nombreux systèmes, y compris Microsoft Excel. (Un peu bizarrement, Google Sheets ne prend pas en charge les flux JSON sans autres plugins ou code macro. Il prend en charge XML.)

Pour importer le score de performance globale en direct dans Excel, démarrez une nouvelle feuille de calcul, passez à l'onglet Données et cliquez sur À partir du Web . Saisissez l'URL de votre API PageSpeed ​​Insights et appuyez sur OK :

Cliquez sur Connecter dans la boîte de dialogue suivante et conservez le paramètre par défaut (Anonyme). Vous accéderez à l'outil Paramètres de requête :

Cliquez sur Enregistrer à droite de la métrique de résultat phare . Cliquez ensuite de la même manière sur les catégories et les performances pour explorer la hiérarchie des objets JSON :

Cliquez sur l'icône Dans le tableau en haut à partir des options du menu contextuel.

Vous pouvez ensuite cliquer sur la flèche du filtre dans l'en-tête du tableau pour supprimer tout ce qui n'est pas le score avant de cliquer sur OK :

Enfin, cliquez sur Fermer et charger pour afficher le score des performances en direct dans votre feuille de calcul :

Vous pouvez suivre le même processus pour d'autres mesures d'intérêt.

Créer un tableau de bord des performances Web

Cette démonstration Codepen fournit un formulaire dans lequel vous pouvez entrer une URL et choisir une analyse de bureau ou mobile pour obtenir des résultats.

Le code crée une URL PageSpeed ​​Insights, appelle l'API, puis affiche divers résultats dans un tableau récapitulatif plus rapide à afficher qu'un rapport Lighthouse standard :

La fonction asynchrone startCheck() est appelée lorsque le formulaire est soumis. Il annule l'événement submit et masque les résultats précédents :

 // make API request async function startCheck(e) { e.preventDefault(); show(resultTable, false); show(status); show(error, false);

Il construit ensuite apiURL à partir des données du formulaire et désactive les champs :

 const form = e.target, fields = form.firstElementChild, data = new FormData(form), qs = decodeURIComponent( new URLSearchParams(data).toString() ), apiURL = form.action + '?' + qs; fields.disabled = true;

L'API Fetch est utilisée pour appeler l'URL PageSpeed, obtenir la réponse et analyser la chaîne JSON dans un objet JavaScript utilisable. Un bloc try/catch garantit que les échecs sont capturés :

 try { // call API and get result const response = await fetch(apiURL), result = await response.json();

L'objet de résultat est passé à une fonction showResult() . Cela extrait les propriétés et les place dans la table de résultats ou tout autre élément HTML dont l'attribut de point de données est défini sur une propriété de l'API PageSpeed, par exemple

<td data-point="lighthouseResult.categories.performance.score"></td>

La fin du bloc try :

 // output result showResult(result); show(status, false); show(resultTable); }

Enfin, un bloc catch gère les erreurs et les champs du formulaire sont réactivés afin que d'autres tests puissent être exécutés :

 catch(err) { // API error console.log(err); show(status, false); show(error); } fields.disabled = false; }

Autres options de développement

L'exemple de code ci-dessus récupère un résultat de l'API PageSpeed ​​Insights lorsque vous le demandez. Le rapport est plus configurable que Lighthouse mais l'exécution reste un processus manuel.

Si vous avez l'intention de développer votre propre tableau de bord, il peut être pratique de créer une petite application qui appelle l'API PageSpeed ​​Insights et stocke le JSON résultant dans un nouvel enregistrement de base de données par rapport à l'URL testée et à la date/heure actuelle. La plupart des bases de données prennent en charge JSON, bien que MongoDB soit parfaitement adapté à la tâche. Un travail cron peut appeler votre application sur une base chronométrée - peut-être une fois par jour pendant les premières heures du matin.

Une application côté serveur peut alors implémenter sa propre API REST selon vos besoins de reporting, par exemple renvoyer les modifications de métriques de performances spécifiques entre deux dates. Il peut être appelé par JavaScript côté client pour afficher des tableaux ou des graphiques qui illustrent les améliorations de performances au fil du temps.

Si vous souhaitez créer des rapports complexes avec des quantités importantes de données, il est préférable de pré-calculer les chiffres une fois par jour au moment où de nouvelles données PageSpeed ​​sont disponibles. Après tout, vous ne voulez pas montrer comment les performances s'améliorent sur un rapport qui prend quelques minutes à générer !

Résumé

L'outil Lighthouse de Chrome est fabuleux, mais c'est une corvée d'évaluer fréquemment de nombreuses pages. L'API PageSpeed ​​Insights vous permet d'évaluer les performances du site à l'aide de techniques programmatiques. Les avantages:

• Les tests de performance peuvent être automatisés. Vous ne pouvez pas oublier de faire un test.
• Les résultats sont collectés sur les serveurs de Google, de sorte que les facteurs de vitesse de l'appareil local et du réseau ont moins d'influence.
• Les métriques incluent des informations qui ne sont généralement pas disponibles dans Lighthouse.
• Des métriques importantes peuvent être enregistrées et surveillées au fil du temps pour s'assurer que les performances de la page se sont améliorées à chaque mise à jour.
• Les informations sur les performances, l'accessibilité et le référencement peuvent être affichées dans des rapports simplifiés afin qu'elles soient disponibles en un coup d'œil pour les développeurs, les gestionnaires et les clients.