Utiliser des outils pour mesurer les performances

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.

Objectif Why? Que devez-vous tester ?
Assurer la confidentialité, la sécurité et l'intégrité des données, et permettre une utilisation efficace des API Pourquoi le protocole HTTPS est important Le protocole HTTPS est implémenté pour toutes les pages/routes et ressources du site.
Améliorer les performances de chargement 53 % des utilisateurs quittent les sites qui mettent plus de trois secondes à se charger. JavaScript et CSS pouvant être chargés de manière asynchrone ou différée. Définissez des objectifs pour le temps de latence interactive et la taille de la charge utile (par exemple, le TTI sur 3G). Définissez un budget de performances.
Réduire la taille de la page • Réduisez les coûts liés aux données pour les utilisateurs avec des forfaits de données plafonnés • Réduisez les besoins de stockage des applications Web, particulièrement important pour les utilisateurs d'appareils peu performants • Réduisez les coûts d'hébergement et de livraison • Améliorez les performances, la fiabilité et la résilience du service Définissez un budget de page: par exemple, le chargement initial doit être inférieur à 400 Ko. Recherchez des scripts JavaScript lourds. Vérifiez les tailles de fichiers pour identifier les images, fichiers multimédias, fichiers HTML, CSS et JavaScript trop volumineux. Recherchez les images pouvant être chargées de manière différée et recherchez du code inutilisé à l'aide d'outils de couverture.
Réduire les demandes de ressources • Réduisez les problèmes de latence. Recherchez les requêtes excessives ou inutiles pour n'importe quel type de ressource. Par exemple : fichiers chargés à plusieurs reprises, JavaScript chargé dans plusieurs versions, CSS qui n'est jamais utilisé, images qui ne sont jamais consultées (ou qui pourraient être chargées de manière différée).
Optimiser l'utilisation de la mémoire La mémoire peut devenir le nouveau goulot d'étranglement, en particulier sur les appareils mobiles. Utilisez le gestionnaire de tâches de Chrome pour comparer l'utilisation de la mémoire de votre site à celle d'autres sites lorsque vous chargez la page d'accueil et que vous utilisez d'autres fonctionnalités du site.
Réduire la charge du processeur Le processeur des appareils mobiles est limité, en particulier pour les appareils de faible spécification Recherchez des scripts JavaScript lourds. Recherchez les codes JavaScript et CSS inutilisés à l'aide d'outils de couverture. Recherchez une taille DOM excessive et des scripts qui s'exécutent inutilement lors du premier chargement. Recherchez du code JavaScript chargé dans plusieurs versions ou des bibliothèques qui pourraient être évitées avec une refactorisation mineure.

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 durée

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 vous assurer d'obtenir des statistiques précises sur les performances de premier chargement. Si vous effectuez déjà la mise en cache via un service worker, videz 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ésumé des métriques de charge. 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.
  • Les fichiers image individuels particulièrement volumineux.
  • Formats d'image: existe-t-il des PNG qui pourraient être au format JPEG ou 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 avec une connexion Wi-Fi ou mobile rapide, effectuez un test avec une émulation à faible bande passante et à latence élevée. N'oubliez pas de tester sur mobile et sur ordinateur. Certains sites utilisent l'analyse UA pour diffuser différents composants et mises en page 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.

Gestionnaire de tâches Chrome affichant l'utilisation de la mémoire et du processeur pour les quatre onglets du navigateur ouverts
Gestionnaire des tâches de Chrome : attention aux gouffres de mémoire et de CPU !

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 temps de chargement du premier octet et si votre site utilise efficacement les CDN.

Enregistrer les résultats

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

Capture d'écran montrant comment exporter un rapport Chrome Lighthouse en tant que gist
Exporter un rapport vers un gist à partir de l'extension Chrome Lighthouse : cliquez sur le bouton de partage

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'apporter 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 de processeur, les coûts de diffusion et la résilience sont susceptibles de s'améliorer si vous réduisez le poids des pages et les demandes de ressources.

Si les analyses ne sont pas implémentées, le moment est venu ! C'est à vous de juger si votre site fonctionne, ni en termes de statistiques et d'analyses. 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 empruntés par vos utilisateurs pour atteindre les "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 ?"

Capture d'écran montrant la vitesse du site dans Google Analytics

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. Cela fonctionne encore mieux avec des fréquences d'images élevées et si vous ajoutez un affichage de minuteur.

Vous pouvez également enregistrer des vidéos 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 Web Bloat Score. Il s'agit d'un test amusant, mais il peut également s'agir d'un moyen convaincant d'illustrer la surcharge de 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.

Capture d'écran de whatdoesmysitecost.com

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