Vous avez peut-être entendu parler des avantages que les techniques de progressive web app (PWA) peuvent apporter à votre site. Vous pourriez être tenté d'ajouter des fonctionnalités PWA sans améliorer les bases des performances de votre site. Toutefois, aucune fonctionnalité de PWA ne peut résoudre les problèmes liés au blocage de JavaScript et aux images trop volumineuses.
La première étape consiste à effectuer un audit de votre site, c'est-à-dire un examen objectif de ce qui fonctionne bien et de ce qui peut être amélioré.
L'audit de votre site ou application vous aide à créer une expérience résiliente et performante. Mettez également en avant les gains rapides qui peuvent être mis en œuvre avec un minimum d'approbations. Un audit crée une référence pour le développement basé sur les données. Un changement a-t-il amélioré les choses ? Comment votre site se compare-t-il à ceux de vos concurrents ? Vous obtenez des métriques pour prioriser vos efforts et des preuves concrètes à mettre en avant une fois que vous avez apporté des améliorations.
Avec seulement 5 minutes
Exécutez Lighthouse sur votre page d'accueil et enregistrez les données du rapport. Vous obtenez une référence quantifiée et une liste de tâches pour améliorer les performances, l'accessibilité, la sécurité et le SEO.
Avec seulement 30 minutes
Lighthouse est probablement le meilleur point de départ, mais si vous avez plus de temps, vous pouvez également enregistrer les résultats d'autres outils :
- Panneau "Sécurité" des outils pour les développeurs Chrome : utilisation du protocole HTTPS.
- Panneau "Requêtes réseau" des outils pour les développeurs Chrome : temps de chargement, taille des ressources et nombre de requêtes pour les fichiers HTML, CSS, JavaScript, images, polices et autres fichiers.
- Gestionnaire des tâches Chrome : si votre site utilise régulièrement une quantité importante de mémoire ou de processeur par rapport aux autres applications, vous devrez peut-être corriger les fuites de mémoire, les problèmes d'exécution des tâches ou de chargement des ressources.
- WebPagetest : mise en cache, temps de latence du premier octet, utilisation du CDN.
- PageSpeed Insights : performances de chargement, coût des données et utilisation des ressources, y compris les données du rapport sur l'expérience utilisateur Chrome qui mettent en évidence les statistiques de performances réelles.
Assurez-vous de tester votre site Web tel qu'un nouvel utilisateur le voit. Ouvrez le site dans une fenêtre de navigation privée ou utilisez les outils du navigateur pour désactiver la mise en cache et vider l'espace de stockage. Cela permet de s'assurer que chaque élément est récupéré à partir du réseau et non d'un cache local. Vous obtenez ainsi une image précise des performances lors du premier chargement.
Rien ne vaut les tests en conditions réelles. Veillez à tester votre site sur des appareils et avec une connectivité représentatifs de ceux de vos utilisateurs, et conservez un enregistrement de votre expérience subjective.
Si vous êtes dérouté par les outils
Consultez notre guide : Réfléchir aux outils de vitesse.
Si rien d'autre ne fonctionne, utilisez Lighthouse pour vérifier les points suivants :
- HTTPS : chaque site doit diffuser tous les éléments via HTTPS.
- Paramètres du serveur : votre serveur Web ou votre CDN doivent utiliser correctement la compression, utiliser HTTP/2 et inclure les en-têtes appropriés pour permettre à votre navigateur de mettre en cache les ressources.
- Éléments de script pouvant être déplacés en bas de la page ou auxquels un attribut async ou defer peut être attribué.
- JavaScript et bibliothèques pouvant être supprimés.
- Code inutilisé, comme les bibliothèques CSS et JavaScript.
- Possibilités de réduire la taille en pixels des images :
- Les modifications du format de fichier qui réduisent la taille d'une image, par exemple en convertissant un fichier PNG en JPG.
Audience, parties prenantes, contexte
Les priorités de refactoring dépendent de votre audience, de votre contenu et de vos fonctionnalités. Qui visite votre site ? Pourquoi et comment l'utilisent-ils ? Quel est votre budget de performances ?
Qui sont vos partenaires et quelles sont leurs priorités ? Cela affecte la façon dont vous structurez, présentez et partagez vos données d'audit.
Si vous ne pouvez pas auditer l'intégralité de votre site, consultez les statistiques des pages pour savoir où concentrer vos efforts. Des taux de rebond élevés, un temps passé sur la page faible et des pages de sortie inattendues peuvent être de bons indicateurs pour savoir où commencer. Il en va de même pour les métriques commerciales telles que les coûts d'hébergement, les clics sur les annonces et les conversions. Obtenez un aperçu des données qui comptent pour les parties prenantes.
Testez, enregistrez, corrigez, recommencez
Enregistrez l'état de votre site avant d'y apporter des modifications. Vous pourrez ainsi identifier les problèmes et définir un point de départ pour les améliorations ou les régressions. Vous obtenez ainsi des données permettant de justifier et de récompenser les efforts de développement.
Testez plusieurs types de pages sur votre site. Pour les applications monopages, testez les composants, les routes et les flux UX, plutôt que la première expérience de chargement.