Bonnes pratiques de création d'un site web
Et si on faisait une petite analyse de notre nouveau blog, histoire de voir si on respecte les standards ?
Lorsqu’un site web part en production (voire un peu avant si possible), il est intéressant de tester certaines métriques afin de savoir si notre site va être bien référencé, s’il va nous coûter cher et s’il sera utilisable par tous les utilisateurs, notamment ceux en situation de handicap.
Il y a un bon nombre d’outils qui nous permettent d’évaluer la qualité technique d’un site web. Ici, on va se focaliser sur le type blog. Nous allons nous focaliser sur les performances et l’accessibilité. On passera moins de temps sur la sécurité, le blog étant statique avec très peu d’interaction. Néanmoins, la sécurité est toujours importante.
Voici donc un tour d’horizon de quelques outils que j’utilise.
Google Lighthouse
Nous allons bien sûr commencer par Le standard. Google Lighthouse permet de faire un point rapide sur la qualité globale d’un site déjà en production (l’analyse est faite depuis les serveurs de Google, il faut donc que la page soit publique). Un bon nombre d’indicateurs sont pris en compte par cet outil, un bon score promet un bon référencement. Un petit essai ?
On est dans la tech, alors on fait ça bien émoticône sourire
Vous notez les feux d’artifice ?
Et malgré ça, nous avons le droit à quelques recommandations. Mais un jour tout sera propre, sisi, il faut y croire ! Ici, pour la sécurité par exemple :
Ensure CSP is effective against XSS attacks. A strong Content Security Policy (CSP) significantly reduces the risk of cross-site scripting (XSS) attacks.
Avec un lien pour en savoir plus sur ce problème: Learn how to use a CSP to prevent XSS
Parfait ! Il reste plus qu’à les résoudre !
IBM Equal Access Accessibility Checker
IBM fournit un plugin navigateur qui va faire un check de différents points en lien avec l’accessibilité. C’est une question difficile et les réponses complexes à apporter demandent souvent de gros changements dans les interfaces.
On a tous eu des moments difficiles avec ça. Émoticône énervée qui renverse une table
Vous le voyez venir, le lecteur d’écran ne va pas correctement interpréter mes œuvres d’art. C’est à coup sûr compliqué à résoudre, mais le check d’IBM va nous remonter pas mal de problèmes de ce type et bien d’autres. Par exemple, la présence des balises sémantiques (main, footer, aside, etc.) est un bon indicateur de l’accessibilité qui prend en compte beaucoup plus de critères que Lighthouse.
Un petit test ?
Bon, on n’est pas si loin. Il reste un problème à étudier, compliqué, qui porte sur du code généré. C’est toujours ça quand on croit se faciliter la vie et qu' on perd la main sur le résultat !
WebHint
Voici le dernier outil, comme tous les autres, très sympa et très utile. Contrairement au plugin Lighthouse, il permet de faire des analyses en local avec des critères là aussi intéressants. https://webhint.io/docs/user-guide/
Il suffit de le lancer :
npx hint https://developpement.romain-vidal.fr/article/performance_d_un_blog/
pour qu’il nous fournisse une analyse de la qualité du site.
Oulà ! Mauvais score en performance, à peine la moyenne ! Regardons d’un peu plus près.
A ‘cache-control’ header contains directives which are not recommended: ‘must-revalidate’
Response should not include unneeded headers: x-xss-protection
Response should be compressed with gzip when gzip compression is requested.
En effet, je n’ai pas configuré correctement mes en-têtes HTTP. Voilà un bon début pour s’améliorer !
En conclusion
Pour analyser un site, de nombreux outils sont à notre disposition. Selon le contexte et le public cible, il s’agit de choisir ceux qui remonteront les métriques les plus pertinentes pour notre cas et de juger du seuil que l’on souhaite s’imposer. Le score de 100% sur Google Lighthouse n’est absolument pas nécessaire. Il est compliqué à atteindre et à maintenir ; un score de 30% est en revanche inquiétant, peu importe le style de site analysé.
Si les plugins présentés ici proposent des indicateurs de qualité, il ne faut pas oublier qu’ils ne représentent qu’une partie des aspects techniques à surveiller pour un site. La sécurité, le bon dimensionnement des infrastructures et le traitement des données sont autant de points à prendre en compte pour un site web de qualité.
Vous noterez, j’ai pas mis le design, dans les choses à regarder émoticône sourire