Audit qualité web Dareboost, le score parfait ! [interviews]

Notre outil d’analyse met en valeur dans ses rapports d’audit une note globale, basée sur la vérification d’une centaine de points de contrôle qualité.

Nous le rappelons régulièrement, en dessous d’une note de 90/100, il y a très généralement des résultats intéressants à attendre d’un effort d’optimisation.  Mais est-il possible d’atteindre 100/100 ? C’est en effet l’une des questions que nous recevons régulièrement de nos utilisateurs.

J’ai le plaisir aujourd’hui d’accueillir 3 invités qui vous prouveront que la réponse est oui, et sans doute avec une légère pointe de fierté !

Je vous propose de découvrir rapidement leurs profils avant de les laisser s’exprimer sur leur utilisation de Dareboost,  leurs motivations ou encore les difficultés rencontrées.

Nicolas Hoffmann@Nico3333fr

Je suis développeur front depuis plus de 10 ans en Suisse. Je suis directeur du collectif OpenWeb, auteur du micro-framework CSS Röcssti, de plusieurs plugins jQuery accessibles (onglets, modale, etc.) et de plus d’une cinquantaine d’articles sur divers sites comme Openweb, Alsacréations, le Train de 13H37, W3qualité, etc. et occasionnellement conférencier aussi.

Je suis parfois délicatement surnommé « le Suisse-Allemand de la qualité Web » (suite à ma certification Opquast) bien que je ne sois ni Suisse, ni Allemand et encore moins Suisse-Allemand. Le pire, c’est que celui qui m’a surnommé ainsi ne pensait pas tomber sur la seule personne qui prendrait cela pour un compliment. :)

Grégory Viguier ‏@ScreenFeedFr

J’ai commencé réellement mon activité sur internet au milieu de 2011, en temps que freelance. D’abord tourné vers le front, je découvrais à peine WordPress et m’y intéressait de plus en plus. C’est comme cela que je suis devenu développeur front et back, en développant des extensions et des thèmes personnalisés autour de ce CMS.

Depuis septembre 2015 je suis développeur chez WP Media, où je travaille sur une extension pour WordPress liée à la sécurité.

Guillaume Focheux @idsquare

J’ai commencé en tant que  développeur front et back pendant presque 4 ans chez Alsacréations et maintenant chez WP Média mais aussi administrateur de serveurs pour un hébergement privé entre amis (https://boot.re) depuis presque 3 ans.

Surtout spécialisé en PHP, j’aime découvrir de nouveaux langages ou même revoir mes classiques comme mon fidèle ShellScript.

 

Quel a été le site optimisé ? et quelles motivations pour atteindre la perfection ?

Nicolas

Le premier site à l’obtenir a été celui de mon micro-framework CSS Röcssti . C’est un site plutôt simple techniquement (un peu de PHP, beaucoup de HTML5/CSS, un peu de jQuery et d’ARIA pour saupoudrer le tout) et parfaitement maîtrisé, autrement dit parfait pour apprendre à mettre en place des bonnes pratiques.

Pour la motivation, elle est très simple : comme indiqué ci-dessus, apprendre les bonnes pratiques dans un premier temps, et voir comment les industrialiser ensuite. J’aime avoir au moins une réalisation personnelle au « top de l’art » de toutes les bonnes pratiques que je peux trouver. Cela me sert aussi de laboratoire (par exemple, ce site est servi en application/xhtml+xml; un mode qui fera sourire les chantres du défunt XHTML). Cela me sert aussi de référence quand je veux implémenter quelque chose sur un autre site : par exemple, je suis infoutu de retenir la syntaxe des métas de partage pour les réseaux sociaux ou celle des Twitter Cards (et je ne suis jamais arrivé à en avoir honte). Là, je sais que ça a déjà été fait sur ce site, donc plus qu’à piocher.

Il y a quelques années, c’était mon site personnel qui avait cette fonction (il a fini avec 27 CSS alternatives)… mais ce dernier a plus de 10 ans et ne reflète plus mes connaissances. Je compte bien lui redonner ses lettres de noblesse dans quelque temps avec une refonte qui a déjà commencé, et là, ce sera clairement un candidat sérieux au 100/100. :)

Voir le rapport d’analyse de son site

Grégory

J’ai tenté d’atteindre le score parfait sur mon propre site, le champ de bataille parfait pour toutes sortes d’excentricités.

C’est un site WordPress où je peux dire succinctement qui je suis, et y présenter mon activité professionnelle avec un petit portfolio. L’autre facette de ce site est un blog dédié au développement sur WordPress, j’y liste également toutes mes extensions.

Côté techno, rien d’extravagant au final, HTML5, CSS3 et jQuery. Pour le thème, j’utilise mon thème starter que j’utilisais pour mes clients il y a encore quelques mois lorsque je construisais des sites sur mesure. C’est un thème que j’ai créé de zéro et amélioré au fil des années, auquel j’ajoute un thème enfant. Ce dernier est en charge du design du site et modifie le comportement du thème starter sur plusieurs aspects.

Voir le rapport d’analyse de son site

Guillaume

Plusieurs de mes sites ont été testés avec Dareboost afin de leur donner un score de départ. Maintenant, tous mes développements en cours et refontes sont testés afin de voir l’évolution de leurs scores.

Il y a bientôt un an, j’ai sorti boot.re (un petit WordPress et une touche de JS) de faire un site de référence avec la meilleur note possible. A l’époque sans le HTTPS, j’étais limité à 99/100.

En un an, j’ai pu voir évoluer les règles et bonnes pratiques tout en mettant à jour ce site. La principale motivation est de se dire que sur mon hébergement quand on veut, on peut avoir la meilleure note. De plus, ça me permet de proposer des petites mises à jours à mes hébergés pour améliorer leur note.

Voir le rapport d’analyse de son site

 

Quelle complexité pour atteindre ce score parfait ? une difficulté majeure rencontrée ?

Nicolas

Longtemps le point manquant venait du HTTPS pour ma part. Je ne vais pas cacher que je suis fier comme un coq d’avoir enfin ce score, mais je n’allais pas engager des frais sur un site qui ne nécessitait pas de manière absolue un certificat SSL juste pour cela (n’en déplaise aux pros-SSL). Maintenant que Let’s Encrypt est arrivé, cela règle ce problème une bonne fois pour toutes.

Avec d’ailleurs tout ce qui se prépare côté pages non protégées par SSL chez les navigateurs, je me dis que c’est le moment où jamais pour prendre de bonnes habitudes (et de bonnes adresses pour les hébergements, à bon entendeur chers hébergeurs :p ).

CSP  m’a donné un peu de fil à retordre aussi, surtout au début.

Le commentaire de Dareboost : l’occasion pour nous de rappeler l’excellente présentation de Nicolas sur CSP à Paris Web en 2015.

Grégory

Mon site était hébergé pendant des années sur le serveur d’un ami. Un serveur avec de bonnes performances, mais au final je me suis retrouvé bloqué sur quelques points, notamment avec l’HTTPS. J’ai donc pris une offre basique chez un hébergeur très connu et attendu que Let’s Encrypt soit disponible. Il n’y avait pas le feu au lac cependant, ce n’est pas comme si je détenais des informations bancaires. Ensuite on ne peut pas dire que c’était un point difficile car un seul clic suffisait pour activer l’HTTPS, puis une règle dans le .htaccess pour tout rediriger.

Le point difficile a été tout autre pour moi : pendant une (trop longue) période je ne pouvais pas manipuler les en-têtes HTTP de mes pages comme je le souhaitais. J’avais beau faire tout ce que je voulais dans le fichier .htaccess, rien n’y faisait. Il s’est avéré finalement que c’était dû aux technos employés côté serveur, par mon hébergeur donc. J’en ai même fait un article sur mon blog, tellement l’histoire est ubuesque, et pour apporter une solution à celles et ceux qui rencontreront le même soucis. Il faut savoir que beaucoup de points découlent de ces en-têtes : performances, mais aussi sécurité avec CSP entre autres.

Le point à retenir je pense, est que l’on peut arriver au 100/100 avec un hébergement classique, cela demande “seulement” un peu de travail.

Guillaume

La complexité principale hors HTTPS fut la mise en place de certaines syntaxes comme pour les CSP. Ces options de sécurité peuvent impacter sur plusieurs points parfois bloquants de l’iframe aux scripts. Toutefois, j’ai pu trouver facilement des générateurs en ligne qui permettent de pouvoir cibler au mieux les ressources autorisées sur la page.

Pour ma part, la complexité est relative aussi au niveau d’accès que l’on a. En tant qu’administrateur, je peux mettre à jour pour mes hébergés ou pour moi-même des paramètres de l’hébergement. D’autres personnes pourrait être plus limité de ce coté là.

De la même manière, le point bloquant avec HTTPS qui a été résolu avec Let’s Encrypt, est sa mise en place pas toujours des plus aisés avec des panels « traditionnel » donc ça nécessite parfois un niveau d’accès supérieur à celui de l’utilisateur lambda. Par contre, une fois en place c’est le 100/100 qui nous ouvre ses portes.

Notre référentiel vous a-t-il permis de découvrir de nouvelles bonnes pratiques / techniques  ?

Nicolas

Oui, un bon nombre. Tout récemment, j’ai appris qu’il existait un attribut fort sympathique nommé “sandbox” pour les iframes  ainsi que des microdatas pour signaler un fil d’ariane (on en apprend tous les jours), plus anciennement Content Security Policy (CSP), dont j’ignorais totalement l’existence.
C’eût été dommage de passer à côté, CSP m’a fait faire énormément de progrès au long cours sur la propreté de mon code front.
Idem pour certains en-têtes HTTP comme X-Frame-Options, X-XSS-Protection, etc.

Grégory

J’avais de bonnes bases de connaissances avant de connaître Dareboost, ayant un profil sensible à la performance, mais j’ai quand même découvert quelques règles. Certaines m’ont fait sourire, comme celle sur la balise <bgsound> (je ne connaissais pas, des gens utilisent ça ?) ou celle sur les liens vers des fichiers .doc (j’étais surpris de trouver ça là).

J’utilise depuis des années le fichier .htaccess de HTML5 Boilerplate, c’est pourquoi je connaissais déjà pas mal de choses, mais sans forcément les employer, ou même savoir ce que c’était. Du coup, les règles de Dareboost m’ont permis d’en découvrir certaines, ou de les approfondir, comme celle relative au clickjacking ou à l’en-tête X-XSS-Protection.

Guillaume

Le référentiel a été d’une grande aide que ça soit en tant que checklist ou même pour découvrir de nouveaux points/pratiques.

Dans la plupart des cas, à chaque découverte, il y avait sa solution pour sa mise en place et/ou une explication claire permettant de corriger/améliorer de manière efficace son site.

Quel est votre aspect préféré de Dareboost  ?

Nicolas

Clairement : la rapidité du service et l’ergonomie générale très agréable. Le bonus qui fait la différence : sa capacité à produire des messages compréhensibles par des êtres humains. Quand j’ai un message d’erreur, au moins je comprends où je dois intervenir et ce que je dois faire. Et si le sujet m’est inconnu, les liens vers des articles/ressources sont très agréables. :)

L’autre jour, j’implémentais CSP sur un site et je ne comprenais pas d’où venaient mes soucis, et – je ne sais pas comment vous avez fait – mais le message de Dareboost était plus clair que celui de mon parser CSP qui se basait sur celui du navigateur…

Grégory

Il y en a plusieurs, mais pour moi le premier est l’application des référentiels, qui n’est pas “bête et méchante”. Là où d’autres outils donneront une note qui ne reflétera pas du tout la réalité en sanctionnant le moindre écart, vous arrivez apparemment à comprendre certains cas spéciaux.

Par exemple j’utilise Modernizr, qui pour au moins deux raisons (contient html5shiv, et ajoute des classes CSS à la balise <html>) doit être chargé dans l’en-tête du document, pas en pied de page. Et bien Dareboost ne m’insulte pas en me criant à l’oreille “Tu as un script bloquant dans ton header, ticon !”.

Et puis c’est à ma connaissance le seul outil qui ne s’arrête pas aux règles basiques de performance, et se permet en plus d’aller chasser sur d’autres terrains : sécurité, accessibilité, SEO.

Guillaume

Pour le service en lui-même, la lisibilité est l’aspect que je préfère. C’est beau, simple et précis. On peut générer des rapports à fournir à un client si besoin. On peut comparer deux sites mais surtout faire du suivi de ses sites. Avec le suivi quotidien, je peux voir à différents horaires comme un client recevrait mon site pour les temps de chargements et je peux aussi observer s’il y a dégradation du score ou des performances.

Ensuite, l’autre point fort, c’est l’écoute. J’ai pu à plusieurs reprises faire des retours sur une règle, proposer une amélioration ou même poser une question. Le plus impressionnant est la rapidité de réponse et le suivi qui va avec.

Des améliorations à suggérer sur l’outil de d’analyse ?

Nicolas

J’aimerais bien avoir la possibilité de comparer deux sites, mais pas de manière instantanée. Pour une raison très simple : montrer à mes clients le travail effectué sur leur site de manière transparente, et l’amélioration qualitative lors d’une refonte entre l’ancien site et le tout nouveau tout beau site.

Le commentaire de Dareboost : comme expliqué depuis à Nicolas, c’est bel et bien possible ! Nous sommes en train de refaire la liste des rapports déjà générés pour permettre un accès plus simple à cette fonctionnalité !

Après, plus cet outil vérifiera de choses « réalistes » en restant fiable, plus il me sera indispensable. :)

Guillaume

Généralement, elles me viennent durant un projet mais je pense en avoir une en tête. Ce serait un parser qui vérifierait les niveaux de titre et leurs cohérences. Je crois qu’il y a déjà des outils pour ça mais pouvoir intégrer encore un peu plus d’accessibilité dans les rapports c’est toujours bon à prendre de mon point de vue.

Le commentaire de Dareboost : ce ne sera pas pour la prochaine mise à jour de notre référentiel (qui sera annoncée ici même d’ici la fin de la semaine) mais qui sait, peut-être pour la suivante ?


Grégory

N’ayant aucune idée car je trouve l’outil déjà très bien pour mes petits besoins, je vais regarder par-dessus l’épaule de Guillaume et répondre “vérifier la hiérarchie des balises de titre” ;) Vous avez déjà le début : vous vérifiez qu’un <h1> et des <h2> sont présents, et que le <h1> arrive en premier, il ne manque pas grand chose pour la suite :p

Un dernier commentaire pour la route ?

Nicolas

Si vous vous dites que cette course à la note ne sert à rien… détrompez-vous. Déjà c’est amusant et cela flââââte mon ego sur-dimensionné ! :)

Plus sérieusement, les fruits de ce travail finissent toujours par tomber : si j’excepte le très sérieux “Est-ce qu’on met en Prod aujourd’hui ?” qui est très proche des 100/100 mais qui aura du mal à l’atteindre à cause du poids de ses GIFs animés de chats stupides et autres personnes qui disent non le vendredi, plusieurs de mes dernières réalisations à titre professionnel frôlent également le 100/100 et certaines devraient même l’atteindre.

Bien entendu, ces réalisations ne bénéficient pas d’un crédit-temps quasi-illimité comme peuvent l’avoir des projets personnels (et encore). Autrement dit, pratiquer transforme des objectifs qui ressemblent au départ à de la science-fiction en des objectifs tout à fait tangibles.

Grégory

Le 100/100 n’est pas le plus important au final, ce sont les performances réelles, celles qui se comptent en milli-secondes (oui bon ok, il n’y a pas que les perfs dans cette note).

OK allez j’avoue, ça fait toujours plaisir et on passe moins facilement sous les portes après ça. C’est un moyen efficace de nous pousser à faire de la qualité ^o^

Et en plus c’est français !

Guillaume

J’ai plusieurs sites en cours de réalisation bien plus lourds que boot.re et j’espère aussi pouvoir leur offrir une aussi belle note. Je suis entrain de me dire en écrivant ces lignes que si Dareboost avait été créé au début des années 2000, nous aurions pu avoir un joli badge à mettre en bas de notre site à coté de celui pour HTML4 et CSS. =)

 

A votre tour !

Un énorme merci à tous les 3 de s’être prêtés à l’exercice, j’espère que ces témoignages vous auront vous aussi passionnés ! N’hésitez pas à nous faire les vôtres directement en commentaire, même si vous n’avez pas encore atteint le score parfait ;)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*