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éduire les coûts de données pour les utilisateurs disposant de forfaits de données limités • Réduire les exigences de stockage des applications Web (particulièrement important pour les utilisateurs d'appareils aux spécifications limitées) • Réduire les coûts d'hébergement et de diffusion • Améliorer les performances, la fiabilité et la résilience de la diffusion | Définissez un budget de poids de page: par exemple, le premier chargement 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 qui pourraient ê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éduire les problèmes de latence • Réduire les coûts de diffusion • Améliorer les performances, la fiabilité et la résilience de la diffusion | Recherchez les requêtes excessives ou inutiles pour tout type de ressource. Par exemple: fichiers chargés de manière répétée, 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 | Les appareils mobiles disposent d'un processeur limité, en particulier les appareils bas de gamme. | Recherchez des scripts JavaScript lourds. Recherchez du code JavaScript et CSS inutilisé à 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 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.