Outil de test de vitesse de chargement d’une page web

J’ai l’honneur d’accueillir Damien Jubeau, le CEO de Dareboost, un outil pour tester la vitesse de chargement et la qualité d’une page web, avec des conseils d’optimisations. Au salon Ecommerce 2014, Dareboost a gagné le premier prix dans la catégorie « Technologie ». Je commence l’article par un test de l’outil, puis par l’interview vidéo de Damien qui a accepté de répondre à quelques questions, et enfin par la transcription de la vidéo en texte, au cas où vous seriez sur mobile et que la page ne se charge pas assez rapidement 🙂

Test de Dareboost

Lancement de l’analyse

 

1. On commence par entrer l’adresse de la page à analyser. Pour l’exemple, j’ai pris une page de catégorie du site leguide.com
2. On peux choisir le navigateur: Firefox, Chrome, ou même le mobile Nexus 5. Ca simule les performances ressenties par un utilisateur sur le navigateur sélectionné.
3. On peux choisir la résolution de l’écran. Ca peux avoir une influence sur les sites responsive. Par défaut, c’était en 1024 x 768, mais les utilisateurs aujourd’hui utilisent en majorité des résolutions plus élevées, j’ai donc changé cette valeur.
4. On peux choisir le lieu du test. C’est vraiment bien car c’est un des seuls outils du même type qui permet de choisir le lieu et en plus situé en france.
5. On peux choisir le débit : 3G, fibre, ADSL
6. Il y a la possibilité de tester une page protégée par mot de passe (.Htaccess), pratique pour vérifier un site en test.
7. On peux changer l’user-agent, c’est à dire l’entête HTTP du navigateur utilisé pour charger la page. Pour les sites qui font du cloaking sur google (Pas bien….), on peux mettre l’user-agent de googlebot.
8. On peux même s’amuser à changer une autre entête. On peux imaginer changer la langue du navigateur, au cas où la page affiche du contenu spécifique en fonction de la langue.

On peut dire que ça commence bien, autant d’options c’est rare même si la plupart du temps on se contentera des valeurs par défaut qui sont suffisantes en général.

Résumé des performances

Après l’analyse automatique de la vitesse de chargement de la page, on obtient un rapport des performances et de la qualité de la page :

• On a un score sur 100, ici de 72, sachant que chaque point de vérification est pondéré en fonction de son importance.
• Le temps de chargement en secondes, le poids de la page en megaoctets, le nombre de requêtes. Trois gros indicateurs qui permettent de juger de l’effort à faire pour améliorer la vitesse de chargement d’un site.
• Concernant la validation W3C, ca a peu d’impacts directs sur le SEO mais ça peut avoir des implications sur la compatibilité et l’accessibilité.
• On a également un aperçu des technologies utilisées. Dans cet exemple, le site utilise  apache, jquery, sitecatalyst d’omniture (pour le suivi analytics) et modernizr (une librairie javascript). D’ailleurs, pour une vue encore plus exhaustive des technos utilisés, je recommande aussi le plugin google chrome BuiltWith Technology Profiler

Résumé des conseils

C’est sympa de voir tous ces indicateurs, mais ce qui est encore plus sympa c’est d’avoir les conseils pour améliorer la vitesse de son site. Dans cet exemple, les recommandations sont divisées en 11 rubriques (c’est variable) avec plus ou moins de conseils. Il y a même une rubrique sécurité, ce qui est assez rare pour le souligner. Il y a aussi une rubrique spécifique au référencement (SEO) qui vérifie quelques basiques comme la présence de titres H1, de alt sur les images,… Mais une grande partie des autres rubriques concerne aussi le SEO au final.

Sur la rubrique spécifique au référencement naturel, la page perd 8 points car l’url contient des underscore « _ » au lieu de tiret « – » dans l’url. En lisant l’explication, j’étais un peu chagriné car ils expliquent de remplacer l’underscore par le tiret. J’ai prévenu Damien Jubeau  pour lui expliquer que l’effet sur google serait nulle, et que dans tous les cas il faudrait faire une redirection 301. Un système de feedback permet d’alerter le support au cas où la recommandation ne serait pas assez claire. L’explication a été mise à jour.

Détails des temps de chargement

En cliquant sur la partie « temps de chargement », on arrive sur une vue détaillée sur les différentes étapes de chargement de la page. Je ne vais pas expliquer chaque élément mais juste m’attarder sur le DOM (Document Object Model). Ce sont  les éléments HTML qui composent une page (TABLE, TR, TD,…). Plus une page est complexe, plus elle a d’éléments DOM, plus la construction de la page est compliquée et plus le temps de chargement est long.

Détails des requêtes

En cliquant sur le nombre de requêtes, on obtient une vue classique en timeline du chargement des différentes requêtes, comme on peut l’obtenir avec d’autres outils comme pingdom tools ,  firebug ou simplement via la console de son navigateur. C’est toujours intéressant de voir le chargement en parallèle ou pas des requêtes, et voir à quel moment ça bloque.

Principaux axes d’améliorations

Puis on a accès à l’ensemble des conseils d’optimisations (il faut être connecté). Ils sont très clairs, en français, et classés par priorité. L’outil a même prévu un système de note de la recommandation afin qu’ils puissent améliorer la pertinence de leurs explications si besoin. On peut obtenir certains de ces conseils via des outils comme pagespeed insights , mais ici les explications sont bien plus exhaustives, parfois personnalisées en fonction de la plateforme utilisée sur le site et vont même plus loin que l’analyse du temps de chargement.

Les autres optimisations

 

Et on la suite des 57 conseils d’optimisations, rien que ça, qui concernent à 80 % l’amélioration des temps de chargement mais aussi comme on l’a vu les critères d’accessibilité, de sécurité ou de qualité. D’ailleurs cette liste s’agrandit régulièrement comme le précise Damien dans la vidéo qui suit.

Conclusion du test

Il y a également une fonction de monitoring qui peut vous alerter lorsque le site dépasse un certain seuil de temps de réponse, renvoie une erreur, passe en dessous un score de qualité défini, et génère dans tous les cas un rapport à intervalle régulier.

Parmi les outils de test de temps de chargement d’une page web, c’est le plus complet que j’ai testé. C’est même plus que ça, c’est presque un outil de contrôle de qualité d’une page web. Presque, car les critères d’évaluation sont nettement plus nombreux et il manque l’aspect humain biensûr pour les critères subjectifs, et même pour interpréter correctement certaines données, trouver des compromis et les solutions optimales. Mais pour un outil qui automatise les recommandations, il est vraiment bien fait.

Pour chipoter, on pourrait dire que la limitation réside principalement dans le fait que l’analyse se résume à l’analyse d’une seule page web (sauf en prestation de service), et c’est vrai pour l’ensemble de ce genre d’outils de toute façon. Si l’outil pouvait ajouter le crawl d’un site entier catégorisé et ajouter une dimension plus macro, ce serait encore plus pertinent. A ma connaissance, aucun outil ne fait ça actuellement, mis à part certains outils de crawl que j’utilise lors de mes audits SEO, mais l’objectif n’est pas le même. Ceci dit, les variations sur la vitesse de chargement sont surtout visibles d’un template à un autre et pas au sein d’un même template de page en général.

Je vous recommande aussi ce dossier pour en savoir plus sur l’optimisation de la vitesse d’un site.

Vidéo Interview de Damien jubeau, CEO de Dareboost

Questions à Damien Jubeau

Peux tu te présenter aux lecteurs de Creapulse, expliquer ton parcours ?

Bonjour Serge,
Je suis passionné par le web depuis de nombreuses années, puisque j’ai mis en ligne mon premier site Internet en 1999, vers l’âge de 10 ans. Trois ans plus tard, j’ai commencé à m’intéresser réellement à la programmation, en débutant le PHP.
Cela m’a amené, une fois la majorité atteinte, a créer une micro-entreprise dédiée à la conception web, et à entamer des études supérieures en informatique.
Mes 3 dernières années d’études ont été mené en alternance, au sein d’un éditeur logiciels spécialisé dans le marketing mobile. J’ai notamment été amené à travailler sur des problématiques de performances web, sur des plate-formes utilisées par des grands comptes (banques, assurances, presse…).

Titulaire d’un diplôme d’ingénieur en Informatique, je me suis lancé fin 2013 dans l’aventure entrepreneuriale, avec 3 autres passionnés et une ambition commune : accélérer le web !

Comment t’es venue l’idée de créer Dareboost ?

DareBoost est le fruit de notre passion, de notre ambition, mais également de nombreuses rencontres. Nous avons notamment remarqué que les a priori sont nombreux quand on parle de temps de chargement. L’hébergeur, la connexion, ou bien le périphérique de l’nternaute sont souvent les sujets les plus pointés du doigt.

Même si ces aspects apportent évidemment leur lot de contraintes, nous aimons à rappeler que les clefs sont bien dans les mains des développeurs front-end, puisque c’est ici que se trouve plus de 80% du temps de chargement ressenti par un internaute ([source EN] http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/).

C’est donc à cet aspect que s’intéresse DareBoost en démocratisant le diagnostic et l’accès aux bonnes pratiques qui vont permettre d’accélérer de façon significative le site web.
Nous avons à coeur de réconcilier les décideurs et les développeurs, en rendant plus accessibles ces sujets techniques, et en facilitant les prises de décisions puisque l’outil est conçu pour cibler les priorités.

Comment Dareboost se différencie par rapport à d’autres outils de performance ?

Plusieurs facteurs à citer à ce niveau. Premièrement, comme expliqué dans ma réponse précédente, nous avons fait le choix de ne pas nous adresser uniquement à un public très technique. Cela se concrétise par des conseils plus détaillés que dans d’autres outils, avec également, tant que possible, un focus donné sur les enjeux.

L’élément de différenciation majeur reste notre capacité de conseil : nous avons dans notre base plus de 150 points de vérifications, et nous continuons à l’enrichir. Nous intégrons des outils reconnus comme le W3C, Google Page Speed, ou encore YSlow. Et nous rajoutons une couche de personnalisation en fonction des technologies que nous détections sur un site analysé. Par exemple, si nous détections que les images ne sont pas optimisées sur un WordPress, nous proposons des plugins pertinents pour ce CMS pour corriger le problème.
Notre outil est automatique, mais nous fournissons du sur-mesure. Et tout ça dans le temps, grâce à nos fonctionnalités de monitoring.

Autre point que nos utilisateurs nous remontent régulièrement : la clarté de notre interface, ce qui rejoint notre volonté de faciliter l’accès à ces sujets techniques, avec notamment un effort pour la représentation graphique des données de nos audits.

Ah oui, j’oubliais : notre solution est disponible en anglais et en français !

Quelles sont pour toi les implications de la vitesse de chargement d’un site sur le référencement et globalement le business d’un site web ?

Les débats sur le sujets sont nombreux, bien que nous n’ayons pas eu le temps encore de mener notre propre étude, nous avons collecté quelques informations à avoir en tête :

• En avril 2010, Google a introduit la performance web dans son algorithme. A ce point, 1% des sites indexés étaient impactés.
• A partir de 2010, Google affichait dans Webmaster Tools qu’un site chargé en moins de 1,5 seconde était considéré rapide
• Il existe une corrélation entre le temps de réponse serveur d’un site web et son rang dans les résultats de recherche sur Google ([source EN] http://moz.com/blog/how-website-speed-actually-impacts-search-ranking)
• Le temps de chargement de votre site impacte le nombre de page que le Google Bot est capable de crawler dans une période donnée, ce qui impact donc le potentiel de pages indexées (quand on parle de volumes conséquents)
• Les Google Bots se rapprochent de plus en plus d’un utilisateur lambda ([source EN] http://googlewebmastercentral.blogspot.fr/2014/05/understanding-web-pages-better.html), ce qui devrait logiquement conduire Google à pénaliser de plus en plus les temps de chargements excessifs.

Pour résumer : bien que difficiles à quantifier, les impacts de la performance web sur le référencement ne sont plus contestables.

Et comme vos préoccupations ne se limitent sans doute pas au référencement, mais plus largement au succès de votre business, voici une liste non exhaustive des sujets impactés par le temps de chargement : taux de conversion, panier moyen, taux de rebond, satisfaction des internautes,  revenus publicitaires ou encore coût de l’hébergement… (source : http://www.webmarketing-com.com/2014/07/09/28900-performance-web-etre-priorite-10-donnees-marquantes).

Conclusion : ne pas se préoccuper du temps de chargement de son site est une erreur qui peut s’avérer coûteuse.

Quelles sont les prochaines améliorations prévues pour Dareboost ?

Elles sont très nombreuses, et difficiles à lister ici puisque nous travaillons en lien étroit avec nos utilisateurs, pour centrer nos efforts sur les priorités immédiates de nos clients (nous faisons une mise à jour de l’outil chaque semaine), même si cela ne nous empêche pas non plus d’avoir des chantiers à plus long terme.

Nous veillons régulièrement à enrichir notre base de connaissance et à renforcer la qualité de nos conseils.
Un exemple de fonctionnalité qui va arriver très rapidement : une API, qui va permettre de nouveaux usages de notre solution, et notamment une intégration sur vos CMS favoris !

Combien coûte Dareboost et à qui ça s’adresse ?

Notre outillage complet et la richesse de nos diagnostics permettent aux métiers techniques de gagner en productivité, et de monter en compétence sur des technologies qui ne sont pas au coeur de leur savoir-faire.

Enfin, pour les projets de moindre envergure, la qualité de nos conseils permet à nombre de nos utilisateurs de gagner en autonomie et de procéder à des optimisations importantes, même sans compétence technique.

Nous proposons 3 offres en standard, respectivement à 19€, 99€ et 499€/mois, sans engagement.