La création d'un site performant et résilient avec un faible coût de données repose sur plusieurs objectifs principaux.
Pour chaque objectif, vous devez effectuer un audit.
| Objectif | Pourquoi ? | Que faut-il tester ? |
|---|---|---|
| Assurez la confidentialité, la sécurité et l'intégrité des données, et permettez une utilisation efficace des API | Pourquoi le protocole HTTPS est-il important ? | HTTPS implémenté pour toutes les pages/routes et tous les éléments 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 délai avant interactivité et la taille de la charge utile (par exemple, le TTI sur la 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 besoins de stockage des applications Web, ce qui est 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 taille de page : par exemple, un premier chargement inférieur à 400 ko. Vérifiez si le code JavaScript est lourd. Vérifiez la taille des fichiers pour identifier les images, les contenus multimédias, le code HTML, le code CSS et le code JavaScript trop volumineux. Recherchez les images qui pourraient être chargées en différé et vérifiez si du code n'est pas utilisé à l'aide d'outils de couverture. |
| Réduire les requêtes de ressources | • Réduire les problèmes de latence • Réduire les coûts de mise en service • Améliorer les performances, la fiabilité et la résilience de la mise en service | Recherchez les requêtes excessives ou inutiles pour tout type de ressource. Par exemple : fichiers chargés à plusieurs reprises, JavaScript chargé dans plusieurs versions, CSS jamais utilisé, images jamais affichées (ou pouvant ê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 des tâches de Chrome pour comparer l'utilisation de la mémoire de votre site avec celle d'autres sites lors du chargement de la page d'accueil et de l'utilisation d'autres fonctionnalités du site. |
| Réduire la charge du processeur | Les appareils mobiles ont un processeur limité, en particulier les appareils bas de gamme. | Vérifiez si le code JavaScript est lourd. Recherchez les ressources JavaScript et CSS inutilisées à l'aide des outils de couverture. Vérifiez si la taille du DOM est excessive et si des scripts 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 grâce à un refactoring mineur. |
Il existe un large éventail d'outils et de techniques pour auditer les 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 d'écran et vidéo
- Tests manuels
Vous trouverez ci-dessous l'approche adaptée à chaque type d'audit.
Enregistrer les requêtes de ressources : nombre, taille, type et timing
Pour commencer à auditer un site, il est conseillé de 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, il peut s'agir d'une simple capture d'écran. Vous pouvez également enregistrer les données de profil dans un fichier JSON. Vous trouverez ci-dessous plus d'informations sur l'enregistrement et le partage des résultats de test.
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 lors du premier chargement. Si vous utilisez 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 à vous soucier de désactiver le cache du navigateur ou de supprimer les entrées précédemment mises en cache.
Voici quelques fonctionnalités essentielles et métriques que vous devriez vérifier à l'aide des outils du navigateur :
- Performances de chargement : Lighthouse fournit un résumé 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 page.
- Événements de la chronologie pour le chargement et l'analyse des ressources, et l'utilisation de la mémoire. Si vous souhaitez aller plus loin, exécutez le profilage de la mémoire et de JavaScript.
- Taille totale de la page et nombre de fichiers.
- Nombre et poids des fichiers JavaScript.
- Tout fichier JavaScript individuel particulièrement volumineux (par exemple, plus de 100 Ko).
- JavaScript inutilisé. Vous pouvez le vérifier à l'aide de l'outil de couverture de Chrome.
- Nombre total et poids des fichiers image.
- Tout fichier image individuel particulièrement volumineux.
- Formats d'image : y a-t-il des fichiers PNG qui pourraient être des fichiers JPEG ou SVG ? Le format WebP est-il utilisé avec des solutions de remplacement ?
- 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 "Couverture".)
- Vérifiez si d'autres éléments, tels que les polices Web (y compris les polices d'icônes), sont utilisés de manière problématique.
- Vérifiez la chronologie des outils de développement pour identifier tout élément qui bloque le chargement de la page.
Si vous utilisez une connexion Wi-Fi ou une connexion au réseau mobile rapide, effectuez un test avec une émulation de faible bande passante et de latence élevée. N'oubliez pas de tester sur mobile et sur ordinateur. Certains sites utilisent la détection de l'user-agent pour proposer des éléments et des mises en page différents selon les 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, 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". C'est un moyen simple de vérifier les exigences d'une page Web.
Tester les performances de chargement initial et ultérieur
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 avant le premier octet et si votre site utilise efficacement les CDN.
Enregistrez les résultats
- WebPagetest : les résultats de test ont chacun leur propre URL.
- PageSpeed Insights : l'outil en ligne PageSpeed Insights inclut désormais les données du rapport sur l'expérience utilisateur de Chrome, qui met en évidence les statistiques de performances réelles.
- Lighthouse : enregistrez les rapports du panneau "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. En particulier, Lighthouse vérifie si votre site implémente correctement les fonctionnalités de PWA, telles que les service workers et un fichier manifeste d'application Web.
Lighthouse teste é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 la visionneuse", puis cliquez à nouveau sur le bouton de partage dans la nouvelle fenêtre et sélectionnez "Enregistrer en tant que Gist".
Utilisez les analyses, le suivi des événements et les métriques d'entreprise pour suivre les performances réelles.
Si possible, conservez un enregistrement des données analytiques avant d'implémenter les modifications : taux de rebond, temps passé sur la page, pages de sortie, etc. (tout ce qui est pertinent pour vos besoins métier).
Si 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 les commandes par minute ou enregistrer des statistiques pour les tests de contrainte et d'endurance. Les coûts de stockage du backend, les besoins en CPU, les coûts de diffusion et la résilience sont susceptibles de s'améliorer si vous réduisez la taille de la page et les requêtes de ressources.
Si vous n'avez pas encore implémenté d'outil d'analyse, c'est le moment de le faire. Les métriques et les analyses d'entreprise sont les arbitres finaux qui déterminent si votre site fonctionne ou non. Si nécessaire, intégrez le suivi des événements pour les actions des utilisateurs, comme les clics sur des boutons et la lecture de vidéos. Vous pouvez également implémenter l'analyse du schéma de l'objectif, c'est-à-dire les chemins empruntés par vos utilisateurs pour atteindre les "conversions".
Vous pouvez surveiller la vitesse du site dans Google Analytics pour vérifier la corrélation entre les métriques de performances et les métriques commerciales. Par exemple, "À quelle vitesse la page d'accueil s'est-elle chargée ?" par rapport à "L'accès via la page d'accueil a-t-il 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 réelles et en direct d'utilisateurs réels.
Expérience concrète : enregistrement d'écran et vidéo
Enregistrez une vidéo du chargement de page sur mobile et sur ordinateur. Cela fonctionne encore mieux à des fréquences d'images élevées et si vous ajoutez un affichage du 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 (ainsi que des scripts pour faire de même).
L'enregistrement vidéo du chargement de la page fonctionne de la même manière que la vue pellicule dans WebPagetest ou Capture Screenshots (Capturer 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 la page : ce qui est rapide et ce qui est lent. Enregistrez des vidéos et des 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 cela est pertinent, obtenez un score de surcharge Web. Il s'agit d'un test amusant, mais il peut également s'avérer utile pour démontrer l'encombrement du code ou pour montrer que vous avez apporté des améliorations.
What Does My Site Cost?, illustré ci-dessous, donne une idée approximative 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.