Mettre en ligne son site web statique et évaluer sa qualité : Partie 4 — Tester les performances et évaluer la qualité avec Google Page Speed, WebPageTest et Opquast
Partie 1 — Création d’un dépôt Github et activation de Github Pages
Partie 2 — Configuration d’un nom de domaine sur Github Pages
Partie 3 — Optimiser les performances et la sécurité avec Cloudflare
Partie 4 — Tester les performances et évaluer la qualité avec Google Page Speed, WebPageTest et Opquast
Dans cette dernière partie, je vais vous présenter différents outils pour tester les performances de votre page et évaluer sa qualité. Nous utiliserons trois outils Google PageSpeed Insights, WebPageTest et Opquast.
Google PageSpeed Insights
Google PageSpeed Insights, comme son nom l’indique est un outil créé par Google. Il va évaluer la rapidité d’affichage de votre page et si celle-ci est “mobile-friendly” en se basant sur différents critères.
Si certains critères sont défaillants, il vous indiquera comment les résoudre.
WebPageTest
WebPageTest va analyser votre page web en terme de performance et selon différents critères auxquels il attribue une note.
En cliquant sur les différentes notes attribuées par l’outil, on accède à un rapport détaillé pour le critère en questions, ainsi que des conseils d’optimisation.
Par exemple, pour le critère “Cache static content” où la page obtient un D, le détail est le suivant :
En l’occurence, les fonts appelés depuis Google et le favicon n’exploitent pas la mise en cache navigateur.
Pour le favicon, la raison vient du fait que je fais appel à un favicon mais le fichier n’existe pas. Pour ce qui est des fonts provenant de Google, la solution serait de les télécharger, les ajouter au dépôt et les charger depuis une déclaration font-face dans un fichier css. Ainsi les fonts pourraient être prises en compte dans la mise en cache.
Opquast
Opquast va vous permettre de tester votre page web à partir de checklists établies dans différents domaines tels que le référencement naturel, l’accessibilité, la qualité web, les performances…
Opquast est disponible via une extension Firefox. Une fois installée, il vous suffit de cliquer sur logo pour lancer Opquast, une console va s’ouvrir et il suffira de lancer un rapport.
Vous obtiendrez un score global (on peut voir que j’ai encore du boulot) et un score par checklist (les checklists présentes sont celles qui sont activées dans les préférences).
Il est possible en cliquant sur les tests conformes ou non conformes d’accéder à la liste des tests que l’on peut filtrer par checklist et/ou résultat. Il est aussi possible d’avoir un détail du test en cliquant sur celui-ci.
Conclusion
J’espère que cette série vous a été utile et que vous ferez bon usage des outils que je vous ai présenté pour créer votre page ou votre site de façon optimisée.
En complément de cette série et pour vous accompagner au quotidien, je vous conseille le Mémento sites web : les bonnes pratiques.
Si vous avez des questions ou des remarques, n’hésitez pas, tous les retours sont les bienvenues. Vous pouvez également partager des liens ou ajouter des précisions en commentaire des différentes parties.
Merci à Brice Favre, @DatMousse, @JeromeRaffin et @Fabio_Niccolini pour leurs retours.
