Utiliser des outils pour mesurer les performances

Sam Dutton

Plusieurs objectifs clés doivent être atteints pour créer un site performant et résilient à faible coût de données.

Vous devez effectuer un audit pour chaque objectif.

Il existe un large éventail d'outils et de techniques pour auditer des sites Web:

• Outils système
• Outils intégrés au navigateur
• Extensions de navigateur
• Applications de test en ligne
• Outils d'émulation
• Analytics
• Métriques fournies par les serveurs et les systèmes d'entreprise
• Enregistrement de l'écran et vidéo
• Tests manuels

Vous trouverez ci-dessous l'approche appropriée pour chaque type d'audit.

Enregistrer les demandes de ressources: nombre, taille, type et calendrier

Lorsque vous effectuez un audit d'un site, commencez par vérifier les pages à l'aide des outils réseau de votre navigateur. Si vous ne savez pas comment procéder, consultez le guide de démarrage du panneau réseau des outils pour les développeurs Chrome. Des outils similaires sont disponibles pour Firefox, Safari, Internet Explorer et Edge.

N'oubliez pas de conserver un enregistrement des résultats avant d'apporter des modifications. Pour les requêtes réseau, cela peut être aussi simple qu'une capture d'écran. Vous pouvez également enregistrer les données de profil sous forme de fichier JSON. Vous trouverez ci-dessous plus d'informations sur l'enregistrement et le partage des résultats des tests.

Avant de commencer à auditer l'utilisation du réseau, veillez à désactiver le cache du navigateur pour obtenir des statistiques précises sur les performances du premier chargement. Si vous effectuez déjà la mise en cache via un service worker, effacez l'espace de stockage de l'API Cache. Vous pouvez utiliser une fenêtre de navigation privée pour ne pas avoir à désactiver le cache du navigateur ni à supprimer les entrées précédemment mises en cache.

Voici quelques fonctionnalités et métriques principales que vous devez vérifier à l'aide des outils du navigateur:

• Performances de chargement: Lighthouse fournit un récapitulatif des métriques de chargement. Addy Osmani a rédigé un excellent résumé des moments clés de l'utilisateur pour le chargement de la page.
• Événements de chronologie pour le chargement et l'analyse des ressources, ainsi que l'utilisation de la mémoire. Pour aller plus loin, exécutez un profilage de la mémoire et de JavaScript.
• Poids total de la page et nombre de fichiers
• Nombre et poids des fichiers JavaScript.
• Tout fichier JavaScript individuel particulièrement volumineux (par exemple, supérieur à 100 Ko).
• JavaScript inutilisé. Vous pouvez le vérifier à l'aide de l'outil de couverture Chrome.
• Nombre total et poids des fichiers image.
• Fichiers image individuels particulièrement volumineux
• Formats d'image: existe-t-il des PNG pouvant être des JPEG ou des SVG ? WebP est-il utilisé avec des solutions de remplacement ?
• Indique si des techniques d'image responsive (telles que srcset) sont utilisées.
• Taille du fichier HTML.
• Nombre total et poids des fichiers CSS.
• CSS inutilisé. (Dans Chrome, utilisez le panneau de couverture.)
• Recherchez une utilisation problématique d'autres composants, tels que les polices Web (y compris les polices d'icônes).
• Recherchez dans la chronologie de DevTools tout élément qui bloque le chargement de la page.

Si vous travaillez sur un réseau Wi-Fi ou une connexion mobile rapide, effectuez des tests avec une bande passante faible et une émulation de latence élevée. N'oubliez pas de tester sur mobile et sur ordinateur. Certains sites utilisent l'analyse UA pour diffuser des composants et des mises en page différents pour différents appareils. Vous devrez peut-être effectuer des tests sur du matériel réel à l'aide du débogage à distance, et pas seulement avec la simulation d'appareils.

Vérifier la charge de la mémoire et du processeur

Avant d'apporter des modifications, enregistrez l'utilisation de la mémoire et du processeur.

Dans Chrome, vous pouvez accéder au gestionnaire de tâches depuis le menu "Fenêtre". Il s'agit d'un moyen simple de vérifier les exigences d'une page Web.

Tester les performances de la première charge et des suivantes

Lighthouse, WebPagetest et Pagespeed Insights sont utiles pour analyser la vitesse, le coût des données et l'utilisation des ressources. WebPagetest vérifie également le cache de contenu statique, le délai avant le premier octet et si votre site utilise efficacement les CDN.

Enregistrer les résultats

• WebPagetest: chaque résultat de test dispose de son propre URL.
• PageSpeed Insights: l'outil en ligne PageSpeed Insights inclut désormais les données du rapport d'expérience utilisateur Chrome, qui mettent en avant les statistiques de performances réelles.
• Lighthouse: enregistrez les rapports à partir du panneau d'audit des outils pour les développeurs Chrome en cliquant sur le bouton de téléchargement :

  

Tester les exigences de base des progressive web apps

Lighthouse vous aide à tester la sécurité, les fonctionnalités, l'accessibilité, les performances et les performances des moteurs de recherche. Plus précisément, Lighthouse vérifie si votre site implémente correctement les fonctionnalités PWA telles que les service workers et un fichier manifeste d'application Web.

Lighthouse vérifie également si votre site peut fournir une expérience hors connexion acceptable.

Vous pouvez télécharger un rapport Lighthouse au format JSON ou, si vous utilisez l'extension Chrome Lighthouse, partager le rapport en tant que Gist GitHub: cliquez sur le bouton de partage, sélectionnez "Ouvrir dans le lecteur", puis cliquez à nouveau sur le bouton de partage dans la nouvelle fenêtre et sélectionnez "Enregistrer en tant que Gist".

Utiliser des données analytiques, le suivi des événements et des métriques commerciales pour suivre les performances réelles

Si possible, conservez les données analytiques avant d'implémenter des modifications : taux de rebond, durée sur la page, pages de sortie, etc., en fonction de vos exigences métier.

Dans la mesure du possible, enregistrez les métriques commerciales et techniques susceptibles d'être affectées afin de pouvoir comparer les résultats après avoir apporté des modifications. Par exemple, un site d'e-commerce peut suivre le nombre de commandes par minute ou enregistrer des statistiques pour les tests de stress et d'endurance. Les coûts de stockage backend, les exigences en termes de processeur, les coûts de diffusion et la résilience sont susceptibles d'augmenter si vous réduisez le poids de la page et les demandes de ressources.

Si vous n'avez pas encore implémenté d'analyse, c'est le moment de le faire. Les métriques et les analyses commerciales sont les juges ultimes de l'efficacité de votre site. Le cas échéant, incorporez le suivi des événements pour les actions des utilisateurs, comme les clics sur les boutons et les lectures de vidéos. Vous pouvez également implémenter une analyse du parcours vers l'objectif : les chemins par lesquels vos utilisateurs accèdent aux "conversions".

Vous pouvez surveiller la vitesse du site dans Google Analytics pour vérifier comment les métriques de performances sont corrélées aux métriques commerciales. Par exemple: "À quelle vitesse la page d'accueil s'est-elle chargée ?" par rapport à "La page d'accueil a-t-elle généré une vente ?"

Google Analytics utilise les données de l'API Navigation Timing.

Vous pouvez enregistrer des données à l'aide de l'une des API de performances JavaScript ou de vos propres métriques, par exemple:

    const subscribeBtn = document.querySelector('#subscribe');

    subscribeBtn.addEventListener('click', (event) => {
     // Event listener logic goes here...

     const lag = performance.now() - event.timeStamp;
     if (lag > 100) {
      ga('send', 'event', {
       eventCategory: 'Performance Metric'
       eventAction: 'input-latency',
       eventLabel: '#subscribe:click',
       eventValue: Math.round(lag),
       nonInteraction: true,
      });
     }
    });

Vous pouvez également utiliser ReportingObserver pour vérifier l'abandon du navigateur et les avertissements d'intervention. Il s'agit de l'une des nombreuses API permettant d'obtenir des mesures réelles en temps réel auprès d'utilisateurs réels.

Expérience réelle: enregistrement d'écran et vidéo

Enregistrez une vidéo de la page en cours de chargement sur mobile et sur ordinateur. Cette méthode fonctionne encore mieux à des fréquences d'images élevées et si vous ajoutez un affichage du retardateur.

Vous pouvez également enregistrer des enregistrements d'écran. Il existe de nombreuses applications d'enregistrement d'écran pour Android, iOS et les plates-formes de bureau (et des scripts pour faire de même).

L'enregistrement vidéo de la page fonctionne comme la vue pellicule dans WebPagetest ou la capture d'écran dans Chrome DevTools. Vous obtenez un enregistrement réel de la vitesse de chargement des composants de la page: ce qui est rapide et ce qui est lent. Enregistrez des vidéos et des captures d'écran pour les comparer aux améliorations ultérieures.

Une comparaison côte à côte avant/après peut être un excellent moyen de montrer les améliorations.

Quoi d'autre ?

Le cas échéant, obtenez un score d'enflure Web. Il s'agit d'un test amusant, mais il peut également être un moyen convaincant de démontrer l'enflure du code ou de montrer que vous avez apporté des améliorations.

Combien coûte mon site ?, affiché ci-dessous, donne un guide approximatif du coût financier du chargement de votre site dans différentes régions.

De nombreux autres outils autonomes et en ligne sont disponibles: consultez perf.rocks/tools.