Il existe des outils permettant de contrôler les performances des pages et d’évaluer les améliorations apportées. L’un des meilleurs est PageSpeed Insights. Il est disponible sous forme d’application web et d’onglet Lighthouse dans les DevTools de Chrome (ces 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. En outre, les indicateurs fondamentaux de Google mesurent les performances des pages, ce qui influe sur le PageRank et sur vos efforts d’optimisation des moteurs de recherche.
WordPress gère plus d’un tiers des sites web, mais les performances sont affectées par un hébergement inefficace, des thèmes lents et une dépendance excessive à l’égard des extensions. Vous pouvez résoudre la plupart des problèmes en optant pour un bon hébergeur et en utilisant les meilleures pratiques en matière de performances.
Accéder à Lighthouse
Lancez Lighthouse en ouvrant la page que vous souhaitez examiner et en appuyant sur Ctrl/Cmd + Shift + I ou en choisissant Outils de développeur dans Plus d’outils dans le menu. Passez à l’onglet Lighthouse et cliquez sur le bouton Analyser le chargement de la page. Les résultats s’affichent après quelques secondes :
Vous pouvez approfondir les pourcentages de niveau supérieur pour découvrir des informations supplémentaires et des conseils pour résoudre des problèmes connus. Cet outil est inestimable, mais il présente des inconvénients :
- Vous devez lancer manuellement une exécution pour chaque page que vous testez.
- Il n’est pas facile d’enregistrer l’amélioration ou la détérioration des facteurs 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. Les clients et les gestionnaires qui souhaitent avoir une vue d’ensemble rapide des progrès accomplis risquent d’être dépassés.
- Les exécutions de Lighthouse peuvent être influencées par les vitesses des appareils locaux et du réseau, ce qui peut conduire à des hypothèses erronées.
L’API PageSpeed Insights permet 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 mesures Lighthouse et bien plus encore. Elle vous permet d’automatiser l’exécution des pages, de stocker les données obtenues, d’examiner les changements 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 ne sont pas nécessairement représentatifs de l’expérience réelle des utilisateurs. L’API Performance du navigateur est une meilleure option si 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 le site 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’une visionneuse JSON intégrée, bien que Chrome dispose d’extensions qui offrent la même fonctionnalité. 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 en fonction de vos propres pages et préférences. Le seul paramètre requis est url, par exemple
url=https://mysite.com/page1
Un test d’ordinateur de bureau est exécuté par défaut, mais vous pouvez le demander explicitement avec :
strategy=desktop
ou passer à la version mobile avec :
strategy=mobile
Seuls les tests de performance sont exécutés, à moins que vous n’indiquiez 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 une locale – par exemple 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é Google API si vous avez l’intention d’effectuer 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 construire la chaîne de requête de l’URL en spécifiant les paramètres de votre choix, séparés par des caractères esperluette (&). L’URL API suivante teste la page à l’adresse https://mysite.com/ à l’aide d’un appareil mobile afin d’é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’aide.
Résultats JSON de l’API PageSpeed Insights
Les tests renvoient généralement environ 600 Ko de données JSON, en fonction des catégories choisies, du nombre d’éléments de la page et de la complexité des captures d’écran (intégrées au format base64).
La quantité de données est impressionnante, il y a des doublons et la documentation des résultats n’est pas toujours claire. Le JSON est divisé en quatre sections décrites ci-dessous.
loadingExperience
Il s’agit des mesures calculées pour l’expérience de chargement de la page par l’utilisateur final. Elles comprennent des informations telles que CUMULATIVE_LAYOUT_SHIFT_SCORE, FIRST_CONTENTFUL_PAINT_MS et FIRST_INPUT_DELAY_MS de Core Web Vitals. Les détails et la valeur « category » renvoient à FAST, AVERAGE, SLOW ou NONE 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 toutes les expériences de chargement de page des utilisateurs. Les sections sont identiques à loadingExperience ci-dessus et il est peu probable que les sites moins fréquentés affichent des chiffres différents.
lighthouseResult
Il s’agit de la plus grande section, qui contient toutes les mesures de Lighthouse. Elle fournit des informations sur le test :
- requestedUrl – l’URL que vous avez demandée
- finalUrl – la page 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 – chaîne de l’agent utilisateur du navigateur utilisé pour le test
- environment – informations étendues sur l’agent utilisateur
- configSettings – les paramètres transmis à l’API
Cette section est suivie d’une section « audits » comprenant de nombreuses sections, dont unused-javascript, unused-css-rules, total-byte-weight, redirects, dom-size, largest-contentful-paint-element, server-response-time, network-requests, cumulative-layout-shift, first-meaningful-paint, screenshot-thumbnails, et full-page-screenshot.
La plupart des mesures d’audit comportent une section « details » 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 « screenshot » de la page entière et des miniatures contiennent des données d’image base64 intégrées.
Une section « metrics » fournit un résumé de toutes les mesures dans un tableau « items », 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 la section « categories » qui fournit les scores globaux de Lighthouse pour les catégories choisies transmises par 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 apparaît normalement sous forme de pourcentage dans les rapports Lighthouse. En général, un score de :
- 0.9 à 1,0 est bon
- 0.5 à moins de 0,9 indique qu’une amélioration est nécessaire
- moins de 0,5 : mauvais et nécessite une attention plus urgente
La section « auditRefs » fournit une liste de tous les indicateurs et des pondérations utilisées pour calculer chaque score.
analysisUTCTimestamp
Enfin, l’heure de l’analyse est indiquée. Elle doit être identique à celle indiquée dans lighthouseResult.fetchTime.
Mesures utiles des résultats JSON
Je vous recommande d’enregistrer et d’examiner le résultat JSON dans un éditeur de texte. Certains d’entre eux intègrent des formateurs JSON ou sont disponibles sous forme de modules d’extension. Vous pouvez également utiliser des outils gratuits en ligne tels que :
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.
Résumé des mesures
Notes globales de 0 à 1 :
| Performance | lighthouseResult.categories.performance.score |
| Accessibilité | lighthouseResult.categories.accessibility.score |
| Meilleures pratiques | lighthouseResult.categories.best-practices.score |
| SEO | lighthouseResult.categories.seo.score |
| Progressive Web App (PWA) | lighthouseResult.categories.pwa.score |
Mesures de performance
Il s’agit des scores Core Web Vitals de 0 à 1 :
| First Contentful Paint | lighthouseResult.audits.first-contentful-paint.score |
| First Meaningful Paint | lighthouseResult.audits.first-meaningful-paint.score |
| Largest Contentful äint | lighthouseResult.audits.largest-contentful-paint.score |
| Speed Index | lighthouseResult.audits.speed-index.score |
| Cumulative Layout Shift | lighthouseResult.audits.cumulative-layout-shift.score |
D’autres scores de performances utiles sont disponibles :
| Server response Time | lighthouseResult.audits.server-response-time.score |
| Is crawlable | lighthouseResult.audits.is-crawlable.score |
| Console errors | lighthouseResult.audits.errors-in-console.score |
| Total byte weight | lighthouseResult.audits.total-byte-weight.score |
| DOM size score | lighthouseResult.audits.dom-size.score |
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 – l’unité utilisée pour la taille totale de la page, par exemple 450123
les unités utilisées pour la taille totale de la page, par exemple « byte »
Sinon, « displayValue » contient généralement un message lisible indiquant à la fois le chiffre et l’unité :
- lighthouseResult.audits.server-response-time.displayValue –
un message sur le temps de réponse, par exemple « Root document took 170 ms » - lighthouseResult.audits.dom-size.displayValue –
un message concernant 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 API en direct peuvent être lus et traités dans de nombreux systèmes, y compris Microsoft Excel. (Assez bizarrement, Google Sheets ne prend pas en charge les flux JSON sans plugins supplémentaires 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 cliquez sur OK :
Cliquez sur Connecter dans la boîte de dialogue suivante et conservez le réglage par défaut (Anonyme). Vous accéderez à l’outil Réglages de la requête :
Cliquez sur Enregistrer à droite de la mesure du résultat de lighthouse. Cliquez ensuite sur les catégories et les performances pour explorer la hiérarchie des objets JSON :
Cliquez sur l’icône Dans le tableau haut des options du menu contextuel.
Vous pouvez ensuite cliquer sur la flèche de filtrage 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 de la performance en direct dans votre feuille de calcul :
Vous pouvez suivre le même processus pour d’autres mesures qui vous intéressent.
Créer un tableau de bord des performances web
Cette démonstration Codepen propose un formulaire dans lequel vous pouvez saisir une URL et choisir l’analyse sur ordinateur ou sur mobile pour obtenir des résultats.
Le code crée une URL PageSpeed Insights, appelle l’API, puis restitue les différents résultats dans un tableau récapitulatif plus rapide à consulter qu’un rapport Lighthouse standard :
La fonction asynchrone startCheck() est appelée lorsque le formulaire est envoyé. Elle annule l’événement de soumission 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);Elle 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 en un objet JavaScript utilisable. Un bloc try/catch permet de s’assurer que les échecs sont capturés :
try {
// call API and get result
const
response = await fetch(apiURL),
result = await response.json();L’objet résultat est transmis à une fonction showResult(). Celle-ci extrait les propriétés et les place dans le tableau des résultats ou dans tout autre élément HTML dont l’attribut data-point est défini sur une propriété de l’API PageSpeed, par ex.
<td data-point="lighthouseResult.categories.performance.score"></td>
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 pour permettre l’exécution d’autres tests :
catch(err) {
// API error
console.log(err);
show(status, false);
show(error);
}
fields.disabled = false;
}Autres options de développement
Le code d’exemple 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 en fonction de l’URL testée et de la date et de l’heure actuelles. La plupart des bases de données prennent en charge le JSON, mais MongoDB est idéalement adapté à cette tâche. Une tâche cron peut appeler votre application sur une base temporelle – par exemple une fois par jour aux premières heures du matin.
Une application côté serveur peut alors mettre en œuvre sa propre API REST pour répondre à vos besoins en matière de rapports, par exemple en renvoyant les changements dans des mesures de performance spécifiques entre deux dates. Elle peut être appelée par JavaScript côté client pour afficher des tableaux ou des graphiques illustrant l’amélioration des 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ù les nouvelles données PageSpeed sont disponibles. Après tout, vous ne voudriez pas montrer l’amélioration des performances dans un rapport qui prend des 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 d’un site à l’aide de techniques programmatiques. Les avantages :
- Les tests de performance peuvent être automatisés. Vous ne pouvez pas oublier d’exécuter un test.
- Les résultats sont recueillis sur les serveurs de Google, de sorte que les facteurs liés à la vitesse de l’appareil local et du réseau ont moins d’influence.
- Les mesures comprennent des informations qui ne sont généralement pas disponibles dans Lighthouse.
- Les mesures importantes peuvent être enregistrées et suivies dans le temps pour s’assurer que les performances des pages se sont améliorées à chaque mise à jour.
- Les informations relatives aux performances, à l’accessibilité et au SEO peuvent être affichées dans des rapports simplifiés afin que les développeurs, les responsables et les clients puissent les consulter d’un seul coup d’œil.
Laisser un commentaire