Utiliser des outils pour mesurer les performances

Sam Dutton

La création d'un site performant et résilient avec un faible coût en termes de données repose sur plusieurs objectifs principaux.

Pour chaque objectif, vous avez besoin d'un audit.

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

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

Vous trouverez ci-dessous l'approche adaptée à chaque type d'audit.

Enregistrer les demandes de ressources: nombre, taille, type et durée

Lorsque vous auditez un site, un bon point de départ consiste à vérifier les pages à l'aide des outils réseau de votre navigateur. Si vous ne savez pas comment procéder, parcourez le guide de démarrage du panneau réseau Chrome DevTools. 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, il suffit d'effectuer une capture d'écran. Vous pouvez également enregistrer les données de profil au format JSON. Vous trouverez ci-dessous plus d'informations sur l'enregistrement et le partage des résultats d'un test.

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

Voici quelques-unes des principales fonctionnalités et métriques que vous devriez vérifier avec les outils du navigateur:

• Performances de charge: Lighthouse fournit un résumé des métriques de charge. Addy Osmani a écrit un excellent résumé des moments clés utilisateur pour le chargement de la page.
• Les événements de chronologie pour le chargement et l'analyse des ressources, ainsi que pour l'utilisation de la mémoire Si vous souhaitez aller plus loin, exécutez le profilage de mémoire et JavaScript.
• Taille totale de la page et nombre de fichiers.
• Nombre et poids des fichiers JavaScript.
• Les fichiers JavaScript individuels particulièrement volumineux (plus de 100 Ko, par exemple)
• JavaScript inutilisé. Vous pouvez le vérifier à l'aide de l'outil de couverture de Chrome.
• Nombre total et poids des fichiers image.
• Les fichiers image particulièrement volumineux.
• Formats d'image: existe-t-il des fichiers PNG qui peuvent être des JPEG ou des SVG ? WebP est-il utilisé avec des créations de remplacement ?
• L'utilisation ou non de techniques d'image responsive (telles que srcset)
• Taille du fichier HTML.
• Nombre total et poids de fichiers CSS.
• CSS inutilisé. (Dans Chrome, utilisez le panneau de couverture.)
• Vérifiez si d'autres assets sont utilisés de façon problématique, tels que les polices Web (y compris les polices d'icônes).
• Consultez la chronologie des outils de développement pour identifier tout élément qui bloque le chargement de la page.

Si vous travaillez depuis une connexion Wi-Fi rapide ou une connexion mobile rapide, effectuez le test avec une émulation de bande passante faible et de latence élevée. N'oubliez pas d'effectuer des tests sur mobile et sur ordinateur. Certains sites utilisent le reniflage d'UA pour afficher des éléments 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'appareil.

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

Avant d'apporter des modifications, gardez un enregistrement de 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". C'est un moyen simple de vérifier les exigences d'une page Web.

Tester les performances de chargement du premier chargement 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 la mise en cache du contenu statique, le délai de transmission du premier octet et si votre site utilise efficacement les CDN.

Enregistrer les résultats

• WebPagetest: les résultats des tests ont chacun leur propre URL.
• Pagespeed Insights: l'outil Pagespeed Insights en ligne inclut désormais les données du rapport sur l'expérience utilisateur Chrome, qui mettent en évidence des statistiques de performances réelles.
• Lighthouse: enregistrez les rapports du panneau d'audit des outils pour les développeurs Chrome en cliquant sur le bouton de téléchargement :

  

Tester les exigences principales des progressive web apps

Lighthouse vous permet de tester la sécurité, les fonctionnalités, l'accessibilité, les performances et les performances du moteur de recherche. En particulier, Lighthouse vérifie si votre site implémente correctement des fonctionnalités de PWA, telles que des service workers et un fichier manifeste d'application Web.

Lighthouse vérifie également si votre site peut offrir 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, le partager en tant que fichier Gist GitHub: cliquez sur le bouton de partage, sélectionnez "Ouvrir dans la visionneuse", puis cliquez à nouveau sur le bouton de partage dans une nouvelle fenêtre et sur "Enregistrer en tant que Gist".

Utilisez les données analytiques, le suivi des événements et les métriques métier pour suivre vos performances réelles

Si possible, conservez un enregistrement des données d'analyse avant de mettre en œuvre les modifications : taux de rebond, temps passé sur la page, pages de sortie, etc.

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

Si les données analytiques ne sont pas implémentées, le moment est venu ! Les analyses et les métriques commerciales sont le dernier arbitre pour déterminer si votre site fonctionne ou non. Le cas échéant, intégrez le suivi des événements pour les actions de l'utilisateur telles que les clics sur les boutons et les lectures de vidéos. Vous pouvez également mettre en œuvre une analyse de flux d'objectifs, c'est-à-dire les chemins par lesquels vos utilisateurs parcourent les "conversions".

Vous pouvez consulter la page Vitesse du site de Google Analytics pour vérifier la corrélation entre les métriques de performances et les métriques d'entreprise. Par exemple: "Quelle est la vitesse de chargement de la page d'accueil ?" et "L'entrée via 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 les avertissements d'abandon et d'intervention du navigateur. Il s'agit de l'une des nombreuses API permettant d'obtenir des mesures en temps réel auprès d'utilisateurs réels.

Expérience pratique: enregistrement d'écran et vidéo

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

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).

Le chargement des pages d'enregistrement vidéo fonctionne de la même manière que la vue Pellicule dans WebPagetest ou Faire des captures d'écran dans les outils pour les développeurs Chrome. Vous obtenez un enregistrement réel de la vitesse de chargement des composants de page: quels sont les éléments qui sont rapides et lents ? Sauvegardez les enregistrements vidéo et les enregistrements d'écran pour les comparer aux améliorations ultérieures.

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

Quoi d'autre ?

Si nécessaire, obtenez un score Web gonflé. Il s'agit d'un test amusant, mais cela peut également être un moyen convaincant de démontrer une surcharge de code ou de montrer que vous avez apporté des améliorations.

La section Combien coûte mon site ?, ci-dessous, fournit une évaluation approximative du coût du chargement de votre site dans différentes régions.

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