Avant de recueillir des métriques de performances pour un audit de site, vous pouvez effectuer plusieurs vérifications pour identifier des correctifs faciles et des axes d'amélioration.
Vérification de la validité: architecture et code
Remboursez une dette technique !
Dans la mesure du possible, corrigez des bugs simples et supprimez les composants 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 éléments du site
Est-il facile de supprimer des éléments du dépôt de code et du site, tels que des pages, des contenus ou d'autres éléments inutilisés ? Recherchez les pages orphelines, les modèles redondants, les images inutilisées, et le code et les bibliothèques inutilisés.
Erreurs d'exécution
Vérifiez les erreurs signalées dans la console du navigateur. Il ne doit pas y avoir de :).
Linting
Votre code HTML, CSS ou JavaScript comporte-t-il des erreurs ? Intégrer le linting dans votre workflow peut aider à maintenir la qualité du code et à éviter les régressions. Nous vous recommandons HTMLHint, StyleLint et ESLint, qui peuvent être utilisés en tant que plug-ins d'éditeur de code, ou qui peuvent être exécutés à partir de la ligne de commande dans les processus de workflow et les outils d'intégration continue tels que Travis.
Images et liens non fonctionnels
De nombreux outils permettent de tester les liens non fonctionnels au moment de la compilation et de l'exécution, y compris les extensions Chrome (celle-ci est bonne) et les outils de nœud 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 est désormais obsolète et ne fonctionne pas sur les appareils mobiles. Recherchez des plug-ins à l'aide de Lighthouse.
Effectuez des tests sur différents appareils et dans différents contextes
Rien ne vaut le fait de demander à de vraies personnes de tester votre site sur de vrais appareils, sur plusieurs navigateurs et dans différents contextes de connectivité.
Certaines de ces vérifications sont relativement subjectives, mais elles peuvent identifier des problèmes qui affectent les performances perçues. Les liens non fonctionnels, par exemple, font perdre du temps et donnent l 'impression qu'ils ne répondent pas. Les textes illisibles sont lents à lire.
Tests multi-appareils
Essayez différentes tailles de fenêtre d'affichage et de fenêtre. Utilisez au moins un appareil mobile
et un ordinateur de bureau. Si possible, testez votre site sur un appareil mobile peu spécifique et doté d'un petit écran. Le texte est-il lisible ? Certaines images sont-elles endommagées ? Pouvez-vous zoomer ? Les zones cibles tactiles sont-elles suffisamment grandes ? Est-ce lent ?
Certaines fonctionnalités ne répondent pas ? Prenez une capture d'écran ou filmez les 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 utiliseront actuellement et à l'avenir.
Connectivité
Effectuez des tests sur plusieurs types de réseaux cibles: connecté, Wi-Fi et cellulaire. Vous pouvez utiliser des outils de navigateur pour émuler diverses conditions réseau.
Appareils
Assurez-vous d'essayer 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 un écran plus grand, le texte est petit, mais lisible. Sur un petit écran, le navigateur affiche correctement la mise en page, mais le texte est illisible, même lorsque l'utilisateur fait un zoom avant. L'écran est flou et présente une dominante 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 peu claires.
Essayer l'interface utilisateur et l'expérience utilisateur
Accessibilité, facilité d'utilisation 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 testent 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 divers scénarios, par exemple à l'extérieur, en plein soleil ou dans un train. Demandez à des amis, des membres de votre famille et de vos collègues d'essayer votre site. Essayez de consommer du contenu à l'aide d'un lecteur d'écran tel que VoiceOver sur Mac ou NVDA sous 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 Comment effectuer un examen de l'accessibilité sur les principes de base du Web.
Gardez une trace de votre audit d'accessibilité. Il y a de fortes chances que vous puissiez apporter des améliorations simples, bonnes pour tous vos utilisateurs.
Problèmes fondamentaux de l'interface utilisateur et de l'expérience utilisateur
Interactions qui ne fonctionnent pas comme prévu, dépassement d'éléments sur des fenêtres et des fenêtres d'affichage plus petites, cibles tactiles trop petites, contenu illisible, défilement irrégulier... Ouvrez plusieurs pages sur le site, essayez la navigation et toutes les fonctionnalités de base. Gardez une trace.
Images, audio et vidéo
Vérifiez les dépassements de contenu, les formats d'image incorrects, les mauvais recadrages et les problèmes de qualité.
Tests d'interface utilisateur subjectifs
Ils ne sont pas forcément tous pertinents, mais des modifications simples peuvent faciliter la refactorisation:
- L'option "Que puis-je faire ici ?" s'affiche-t-elle immédiatement lorsque vous ouvrez le site ?
- Êtes-vous attiré(e) par les contenus et les liens ?
- Existe-t-il des hiérarchies visuelles ou des chemins, ou tout a-t-il le même poids visuel ?
- La mise en page est surchargé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 du contenu est aussi importante que la conception de l'interface. Le texte et les images de votre site sont-ils adaptés aux mobiles et aux ordinateurs ? Est-il possible d'éliminer certains éléments ? Écrire pour les appareils mobiles