Pourquoi et quoi ?
Vous avez probablement entendu parler de tout ce que les techniques des progressive web apps peuvent apporter à votre site. Vous serez peut-être tenté de vous lancer directement et d'ajouter des fonctionnalités de PWA. C'est possible, mais vous aurez tout intérêt à vous préparer d'abord aux PWA.
La quantité de PWA magique ne résoudra pas les problèmes, comme le blocage de JavaScript ou les images gonflées. Les PWA ont besoin d'une base solide.
Comment vérifier l'état de santé de votre site Web ? La première étape consiste à réaliser un audit du site: une évaluation objective de ce qui fonctionne bien, et de vos points (et de la façon dont) des améliorations peuvent être apportées.
L'audit de votre site ou de votre application vous aidera à créer une expérience résiliente et performante, et à mettre en évidence des résultats rapides qui peuvent être mis en œuvre avec un minimum d'approbation. Un audit vous fournit également une référence pour le développement basé sur les données. Un changement a-t-il amélioré la situation ? Comment votre site se compare-t-il à celui de vos concurrents ? Vous disposez de métriques permettant de hiérarchiser les efforts, ainsi que de preuves concrètes dont vous pouvez vous vanter une fois que vous avez apporté des améliorations.
Si vous n'avez que cinq 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 à effectuer pour améliorer les performances, l'accessibilité, la sécurité et le SEO.
Si vous n'avez que 30 minutes...
Lighthouse est probablement toujours le meilleur point de départ, mais avec un peu plus de temps, vous pourrez également enregistrer les résultats à partir d'autres outils:
- Panneau de sécurité des outils pour les développeurs Chrome: utilisation du protocole HTTPS
- Panneau réseau des outils pour les développeurs Chrome: temps de chargement, tailles des ressources et nombre de requêtes pour le code HTML, CSS, JavaScript, les images, les polices et d'autres fichiers.
- Gestionnaire de tâches Chrome: si votre site utilise constamment beaucoup de ressources processeur ou plus de mémoire que d'autres applications, vous devrez peut-être résoudre des problèmes de fuite de mémoire, d'exécution des tâches ou de chargement de ressources. Veillez à tester votre site sur des appareils représentatifs de vos utilisateurs.
- WebPagetest: performances pour différents emplacements et types de connexions, mise en cache, délai avant le 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 d'expérience utilisateur Chrome mettant en évidence des statistiques de performances réelles.
- Scorecard sur la vitesse et simulateur d'impact: comparez la vitesse du site à celle d'applications similaires et estimez les opportunités de revenus potentielles en améliorant la vitesse du site.
Assurez-vous de tester votre site Web lorsqu'un nouvel utilisateur le consulte. Ouvrez le site dans une fenêtre de navigation privée (privé) ou utilisez les outils du navigateur pour désactiver la mise en cache et effacer l'espace de stockage. Ainsi, chaque élément est récupéré à partir du réseau et non d'un cache local. Vous obtenez ainsi une idée précise des performances de premier chargement.
Rien ne vaut les tests en conditions réelles : testez votre site avec les mêmes appareils et la même connectivité que vos utilisateurs, et gardez une trace de votre expérience subjective.
Si vous trouvez la gamme d'outils étrange...
Consultez notre guide À propos des outils de vitesse.
Si vous n'avez rien d'autre, utilisez simplement Lighthouse pour vérifier les éléments suivants:
- HTTPS: chaque site doit fournir tous les éléments via HTTPS.
- Paramètres du serveur: votre serveur Web ou votre CDN doit 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 vers le bas de la page et/ou auxquels un attribut async ou différé peut être attribué.
- le code JavaScript et les bibliothèques pouvant être supprimés.
- CSS non utilisé et JavaScript non utilisé.
- Images pouvant être enregistrées avec une compression plus élevée ou des dimensions en pixels inférieures.
- Des fichiers image plus petits enregistrés dans un format différent, par exemple des photos enregistrées au format PNG.
Audience, partenaires, contexte
Les priorités de refactorisation dépendent de votre audience, de votre contenu et des fonctionnalités. Qui visite votre site ? Pourquoi et comment l'utilisent-ils ? Quel est votre budget de performances ? Si vous n'êtes pas sûr de la réponse à ces questions, essayez les exercices de collecte des exigences figurant dans nos ressources de formation sur les PWA: Votre audience, votre contenu et Concevoir votre application pour tous vos utilisateurs.
Qui sont vos partenaires et quelles sont leurs priorités ? Cela aura une incidence sur la façon dont vous structurez, présentez et partagez vos données d'audit.
Si vous ne pouvez pas auditer l'ensemble de votre site, vérifiez les statistiques de vos pages pour savoir sur quoi vous concentrer. Des taux de rebond élevés, un faible temps passé sur la page et des pages de sortie inattendues peuvent être un bon indicateur du bon point de départ. Il en va de même pour les métriques métier, comme les coûts d'hébergement, les clics sur les annonces et les conversions. Obtenir un aperçu des partenaires de ce que les données comptent pour eux.
Tester, enregistrer, corriger, répéter
Enregistrez l'état de votre site avant d'effectuer toute modification afin d'identifier les problèmes et de définir un point de départ pour les améliorations ou les régressions. Vous obtenez ainsi des données pour justifier et récompenser vos efforts de développement.
Veillez à tester plusieurs types de page sur votre site, et pas seulement la page d'accueil. Pour les applications monopages, testez différents composants, routes et flux d'expérience utilisateur, et pas seulement le premier chargement.