Avant de collecter les métriques de performances pour un audit de site, vous pouvez effectuer plusieurs vérifications pour identifier les solutions faciles et les domaines à privilégier.
Vérification de la validité: architecture et code
Réduisez votre dette technique !
Dans la mesure du possible, corrigez les bugs simples et supprimez les éléments et le code inutiles avant de mesurer les performances. Veillez toutefois à conserver un enregistrement avant et après des problèmes et des corrections. Ces améliorations peuvent toujours faire partie de votre travail d'audit.
Architecture et composants du site
Est-il possible de supprimer facilement du dépôt de code et du site des éléments tels que des pages, du contenu ou d'autres composants obsolètes ? Recherchez les pages sans parents, les modèles redondants, les images inutilisées et les codes et bibliothèques inutilisés.
Erreurs d'exécution
Vérifiez les erreurs signalées dans la console du navigateur. Il ne devrait pas y en avoir :).
Analyse lint
: votre code HTML, CSS ou JavaScript contient-il des erreurs ? Intégrer le linting à votre workflow peut vous aider à maintenir la qualité du code et à éviter les régressions. Nous vous recommandons HTMLHint, StyleLint et ESLint, qui peuvent être utilisés comme plug-ins d'éditeur de code ou exécutés à partir de la ligne de commande dans les processus de workflow et les outils d'intégration continue tels que Travis.
Liens et images non fonctionnels
De nombreux outils permettent de détecter les liens non fonctionnels au moment de la compilation et de l'exécution, y compris les extensions Chrome (celle-ci est bien) et les outils Node tels que Broken Link Checker.
Plug-ins
Les plug-ins tels que Flash et Silverlight peuvent présenter un risque de sécurité. Leur prise en charge a été abandonnée et ils ne fonctionnent pas sur mobile. Utilisez Lighthouse pour rechercher des plug-ins.
Effectuer des tests sur différents appareils et contextes
Rien ne vaut de faire tester votre site par de vraies personnes sur de vrais appareils, avec plusieurs navigateurs et dans différents contextes de connectivité.
Certaines de ces vérifications sont relativement subjectives, mais elles peuvent identifier les problèmes qui affectent les performances perçues. Les liens non fonctionnels, par exemple, font perdre du temps et donnent l'impression que le site ne répond pas. Le texte illisible est lent à lire.
Tests multi-appareils
Essayez différentes tailles de fenêtre et de fenêtre d'affichage. Utilisez au moins un appareil mobile et un ordinateur de bureau. Si possible, testez votre site sur un appareil mobile à faible spécification et à petit écran. Le texte est-il lisible ? Certaines images ne s'affichent-elles pas ? Pouvez-vous faire un zoom ? Les zones cibles tactiles sont-elles suffisamment grandes ? Est-elle lente ?
Certaines fonctionnalités ne répondent-elles pas ? Faites une capture d'écran ou enregistrez une vidéo des résultats.
Tests multiplates-formes
Quelles plates-formes ciblez-vous ? Vous devez effectuer des tests sur les navigateurs et les systèmes d'exploitation que vos utilisateurs utilisent actuellement et à l'avenir.
Connectivité
Test sur plusieurs types de réseaux cibles: connecté, Wi-Fi et mobile. Vous pouvez utiliser des outils de navigateur pour émuler différentes conditions réseau.
Appareils
Assurez-vous de tester votre site sur les mêmes appareils que vos utilisateurs. La photo suivante montre la même page sur deux téléphones différents.
Sur l'écran plus grand, le texte est petit, mais lisible. Sur l'écran plus petit, le navigateur affiche correctement la mise en page, mais le texte est illisible, même en zoom avant. L'écran est flou et présente un "teint de couleur" (le blanc ne semble pas blanc), ce qui rend le contenu moins lisible.
Des résultats simples comme celui-ci peuvent être bien plus importants que des données de performances obscures.
Essayer l'UI et l'UX
Accessibilité, usabilité et lisibilité
Pour vous assurer que le contenu et les fonctionnalités de votre site sont accessibles à tous, vous devez comprendre la diversité de vos utilisateurs.
Lighthouse et d'autres outils détectent des problèmes d'accessibilité spécifiques, mais rien ne vaut les tests réels. Essayez de lire, de naviguer et de saisir des données dans différents scénarios: par exemple, en plein air sous le soleil ou dans un train. Demandez à vos amis, à votre famille et à vos collègues de tester votre site. Essayez de consommer du contenu via un lecteur d'écran tel que VoiceOver sur Mac ou NVDA sur Windows.
Pour en savoir plus sur l'implémentation et l'examen de l'accessibilité, consultez le cours Udacity sur l'accessibilité et l'article How To Do an Accessibility Review (Comment effectuer un examen d'accessibilité) sur les principes fondamentaux du Web.
Conservez une trace de votre audit de l'accessibilité. Vous pourrez probablement apporter des améliorations simples qui seront bénéfiques pour tous vos utilisateurs.
Problèmes fondamentaux d'UI et d'UX
Interactions qui ne fonctionnent pas comme prévu, éléments qui débordent sur les fenêtres et les vues d'affichage plus petites, cibles de pression trop petites, contenu illisible, défilement saccadé… Ouvrez plusieurs pages du site, testez la navigation et toutes les fonctionnalités de base. Tenez un registre.
Images, audio et vidéo
Vérifiez si le contenu déborde, si le format est incorrect, si le recadrage est mauvais et si le contenu est de mauvaise qualité.
Tests subjectifs de l'interface utilisateur
Il est possible que tous ces points ne soient pas pertinents, mais des modifications simples peuvent faciliter le refactoring:
- La question "Que puis-je faire ici ?" est-elle immédiatement claire lorsque vous ouvrez le site ?
- Avez-vous envie de consommer du contenu et de suivre des liens ?
- Existe-t-il des hiérarchies ou des parcours visuels, ou tout a-t-il le même poids visuel ?
- La mise en page est-elle encombrée ?
- Y a-t-il trop de polices ?
- Y a-t-il des images ou d'autres contenus qui pourraient être supprimés ?
- La conception de contenu est aussi importante que la conception d'interface. Le contenu textuel et imagé de votre site est-il adapté aux contextes mobile et ordinateur ? Pouvez-vous supprimer certains éléments ? Rédigez des contenus pour les mobiles.