Pourquoi et quoi ?
Vous avez probablement déjà 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 serez bien mieux préparé si vous commencez par "préparer les PWA".
Aucune PWA magique ne permet de résoudre des problèmes tels que le blocage de JavaScript ou les images surchargées. Les PWA nécessitent une base solide.
Alors, comment vérifier l'intégrité de votre site Web ? La première étape consiste à réaliser un audit du site. Il s'agit d'un examen objectif de ce qui fonctionne bien et de ce qui peut être amélioré (et comment).
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 pouvant être mis en œuvre avec un minimum d'approbation. Un audit vous fournit également une base de 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 positionne-t-il par rapport à vos concurrents ? Vous disposez de métriques pour hiérarchiser les efforts et de preuves concrètes qui s'affichent une fois que vous avez apporté des améliorations.
Si vous n'avez que 5 minutes...
Exécutez Lighthouse sur votre page d'accueil et enregistrez les données du rapport. Vous bénéficiez d'un modèle de référence quantifié et d'une liste de tâches à accomplir pour améliorer les performances, l'accessibilité, la sécurité et le SEO.
Si vous n'avez que 30 minutes...
Lighthouse reste probablement le meilleur point de départ, mais avec un peu plus de temps, vous pouvez é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 les fichiers HTML, CSS, JavaScript, images, polices et autres fichiers.
- Gestionnaire des tâches de Chrome: si votre site utilise en permanence beaucoup de ressources processeur ou plus de mémoire que les autres applications, vous devrez peut-être résoudre des problèmes de fuite de mémoire, d'exécution de 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 connexion, mise en cache, délai de latence du premier octet, utilisation de 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 mettant en évidence des statistiques de performances réelles.
- Rapport de vitesse et simulateur d'impact: comparez la vitesse de votre site à celle d'autres sites similaires et estimez les revenus que peut générer l'amélioration de cette vitesse.
Assurez-vous de tester votre site Web pour la première fois. 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 effacer l'espace de stockage. Cela garantit que chaque élément est extrait du réseau et non d'un cache local, ce qui vous permet d'obtenir une image précise des performances du premier chargement.
Rien ne vaut les tests du monde réel : 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 déroutante...
et consultez notre guide: Comment considérer les outils de vitesse.
Si vous n'avez besoin de 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 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.
- Des éléments de script qui peuvent être déplacés vers le bas de la page et/ou auxquels un attribut async ou defer peut être attribué.
- JavaScript et bibliothèques qui peuvent être supprimés.
- CSS non utilisés et JavaScript non utilisé.
- Images qui peuvent être enregistrées avec une compression plus élevée ou des dimensions en pixels inférieures.
- Les fichiers image de taille réduite enregistrés dans un autre format (par exemple, les photos enregistrées au format PNG).
Audience, partenaires, contexte
Les priorités de la refactorisation 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 ? Si vous n'êtes pas sûr de connaître la réponse à ces questions, essayez les exigences en réunissant des exercices à partir de nos ressources de formation sur les PWA: Votre audience, votre contenu et Concevoir pour tous vos utilisateurs.
Qui sont vos partenaires et quelles sont leurs priorités ? Cela affectera 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 analyses de page pour savoir où concentrer vos efforts. Des taux de rebond élevés, un faible temps passé sur la page et des pages de sortie inattendues peuvent vous aider à déterminer par 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 partenaires des données qui sont importantes pour eux.
Tester, enregistrer, corriger et répéter
Enregistrez l'état de votre site avant d'y apporter des modifications afin d'identifier les problèmes et de définir un point de départ pour les améliorations ou les régressions. Vous disposez ainsi de données permettant de justifier et de récompenser les 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.