Avant de collecter des métriques de performances pour un audit de site, vous pouvez effectuer plusieurs vérifications pour identifier les corrections faciles et les points à examiner.
Vérification de la validité : architecture et code
Remboursez 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 historique des problèmes et des corrections avant et après. Ces améliorations peuvent toujours faire partie de votre travail d'audit.
Architecture et composants du site
Est-il possible de supprimer facilement des éléments du dépôt de code et du site, tels que des pages, des contenus ou d'autres composants anciens inutilisés ? Recherchez les pages orphelines, les modèles redondants, les images inutilisées, ainsi que le code et les bibliothèques inutilisés.
Erreurs d'exécution
Recherchez les erreurs signalées dans la console du navigateur. Il ne devrait pas y en avoir :).
Linting
Votre code HTML, CSS ou JavaScript contient-il des erreurs ? L'intégration du linting à votre workflow peut vous aider à maintenir la qualité du code et à éviter les régressions. Nous vous recommandons d'utiliser 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
Il existe de nombreux outils pour tester les liens non fonctionnels au moment de la compilation et de l'exécution, y compris des extensions Chrome (celle-ci est efficace) et des 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é. Ils sont obsolètes et ne fonctionnent pas sur mobile. Utilisez Lighthouse pour rechercher des plug-ins.
Tester avec différents appareils et contextes
Rien ne vaut de vrais utilisateurs qui testent votre site avec de vrais appareils, plusieurs navigateurs et 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. Par exemple, les liens non fonctionnels font perdre du temps et donnent l'impression que le site ne répond pas. Un texte illisible est lent à lire.
Tests multi-appareils
Essayez différentes tailles de fenêtres d'affichage et de fenêtres. Utilisez au moins un appareil mobile et un ordinateur. Si possible, testez votre site sur un appareil mobile bas de gamme doté d'un petit écran. Le texte est-il lisible ? Des images sont-elles corrompues ? Pouvez-vous zoomer ? Les cibles tactiles sont-elles suffisamment grandes ? Est-il lent ?
Certaines fonctionnalités ne répondent-elles pas ? Faites une capture d'écran ou 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 utiliseront à l'avenir.
Connectivité
Test sur plusieurs types de réseaux cibles : connecté, Wi-Fi et mobile. Vous pouvez utiliser les outils du navigateur pour émuler différentes conditions de réseau.
Appareils
: veillez à 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 zoomant. 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 obscures.
Essayer l'UI et l'UX
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 des tests en conditions réelles. Essayez de lire, de naviguer et de saisir des données dans différents scénarios, par exemple en extérieur, au soleil ou dans un train. Demandez à plusieurs amis, membres de votre famille et collègues de tester votre site. Essayez de consommer du contenu à l'aide d'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 Web Fundamentals How To Do an Accessibility Review (Comment effectuer un examen de l'accessibilité).
Conservez une trace de votre audit d'accessibilité. Il est probable que vous puissiez apporter des améliorations simples qui profiteront à 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 fenêtres d'affichage plus petites, cibles tactiles trop petites, contenu illisible, défilement saccadé… Ouvrez plusieurs pages du site, testez la navigation et toutes les fonctionnalités de base. Conservez une trace.
Images, audio et vidéo
: vérifiez qu'il n'y a pas de contenu qui déborde, de format incorrect, de mauvais recadrage ni de problèmes de qualité.
Tests d'UI subjectifs
Ils ne sont peut-être pas tous pertinents, mais des modifications simples peuvent faciliter la refactorisation :
- La réponse à la question "Que puis-je faire ici ?" est-elle immédiatement claire lorsque vous ouvrez le site ?
- Êtes-vous incité à consommer du contenu et à suivre des liens ?
- Existe-t-il des hiérarchies ou des parcours visuels, ou bien tous les éléments ont-ils 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 du contenu est aussi importante que celle 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 ? Rédigez pour les mobiles.