Pourquoi et quoi ?
Vous avez probablement entendu parler de tous les avantages que les techniques de progressive web app peuvent apporter à votre site. Vous pourriez être tenté de vous lancer directement et d'ajouter des fonctionnalités de PWA. C'est possible, mais vous serez beaucoup mieux loti si vous commencez par vous préparer à la PWA.
Aucune magie PWA ne résoudra les problèmes tels que le blocage de JavaScript ou les images trop volumineuses. Les PWA ont besoin d'une base solide.
Comment vérifier l'état de votre site Web ? La première étape consiste à effectuer un audit du site: un examen objectif de ce qui fonctionne bien et de ce qui pourrait être amélioré (et comment).
Auditer votre site ou votre application vous aidera à créer une expérience résiliente et performante, et à mettre en évidence des gains rapides qui peuvent être implémentés 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é les choses ? Comment votre site se compare-t-il à celui de vos concurrents ? Vous obtenez des métriques pour hiérarchiser les efforts et des preuves concrètes dont vous pourrez vous vanter une fois que vous aurez 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 recevez une référence chiffrée et une liste de tâches à effectuer pour améliorer les performances, l'accessibilité, la sécurité et le référencement SEO.
Si vous ne disposez que de 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 d'autres outils:
- Panneau "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.
- Gestionnaire des tâches Chrome: si votre site utilise constamment une quantité importante de processeur ou plus de mémoire que les autres applications, vous devrez peut-être corriger les fuites de mémoire, les problèmes 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, temps 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 qui mettent en avant les statistiques de performances réelles.
- Scorecard de vitesse et simulateur d'impact: comparez la vitesse de votre site à celle de vos concurrents et estimez les revenus potentiels générés par une amélioration de la vitesse de votre site.
Veillez à tester votre site Web comme le ferait un utilisateur novice. Ouvrez le site dans une fenêtre de navigation privée, ou utilisez les outils du navigateur pour désactiver le cache et vider l'espace de stockage. Cela garantit que chaque composant est récupéré à partir du réseau et non à partir d'un cache local. Vous obtenez ainsi une image précise des performances de premier chargement.
Rien ne vaut les tests réels. Essayez votre site avec les mêmes appareils et la même connectivité que vos utilisateurs, et consignez votre expérience subjective.
Si vous trouvez la gamme d'outils déconcertante…
Consultez notre guide Penser aux outils de mesure de la vitesse.
Si vous ne savez pas quoi vérifier, utilisez simplement Lighthouse pour vérifier les points suivants:
- HTTPS: tous les sites doivent diffuser tous leurs composants 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 en bas de la page et/ou auxquels un attribut async ou defer peut être attribué.
- JavaScript et bibliothèques pouvant être supprimés
- CSS inutilisés et JavaScript inutilisés
- Images pouvant être enregistrées avec une compression plus élevée ou des dimensions de pixels plus petites.
- Fichiers image qui seraient plus petits enregistrés dans un autre format, par exemple des photos enregistrées au format PNG.
Audience, personnes concernées, 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'utilise-t-il ? 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 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 aura un impact sur 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 données analytiques des pages pour identifier les priorités. Les taux de rebond élevés, le temps passé sur la page faible et les pages de sortie inattendues peuvent être de bons indicateurs pour savoir par où commencer. De même, 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 personnes concernées.
Tester, enregistrer, corriger, répéter
Enregistrez l'état de votre site avant d'apporter des modifications pour identifier les problèmes et définir un point de départ pour les améliorations ou les régressions. Vous disposez ainsi de données pour justifier et récompenser les efforts de développement.
Veillez à tester plusieurs types de pages de votre site, et pas seulement la page d'accueil. Pour les applications monopages, testez différents composants, différents parcours et différents flux d'expérience utilisateur, et pas seulement l'expérience de chargement initiale.