Articles

Interview vidéo et test de Dareboost, un outil pour un site plus rapide

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

resume-performance-vitesse

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

conseils-vitesse-chargement

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

details-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

timeline-requetes-web

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

axes-ameliorations-chargement

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

optimisations-chargement

 

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 ?

Nous avons fait nos preuves sur des publics variés, de l’agence web au petit e-commerçant, de l’institutionnel aux décideurs marketing de grands groupes.

Nos tableaux de bord permettent aux décideurs d’avoir une vision claire de l’état des lieux technique, mais également de mieux estimer le ROI des chantiers envisagés.

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.

Comment installer et configurer Mod_PageSpeed de google ?

MAJ 15/06/2017: J’ai mis à jour ma configuration initiale dans la partie « configuration de modpagespeed / Configurer Mod_PageSpeed depuis le vhost ».

Vous l’avez peut-être déjà vu dans les guides précédents, Il y a beaucoup de choses à optimiser pour accélérer son site web et face à cette complexité , Google a eu la bonne idée de nous concocter un module qui permet d’automatiser un grand nombre de ces taches. Mod_PageSpeed fusionne, minifie, compresse, met en cache, optimise vos ressources automatiquement sans se prendre la tête. Lire la suite

Oprimiser les performances côté serveur

Guide SEO: optimiser les performances côté serveur

On va rentrer dans les techniques avancées d’optimisations d’un serveur web avec pour but de faire décoller la vitesse de vos pages et vos performances serveur.

Lire la suite

Outil pour monitorer les performances

Outils d’analyse de performances web

Voyons voir une sélection d’outils pour vous aider à optimiser le temps de chargement de vos pages.

Et avant, rappelons l’importance d’avoir une page rapide:

  • Plus un site est crawlé rapidement et plus Googlebot, pour ne parler que de lui, verra de pages. La fréquence de crawl d’une page est un élément essentiel pour que vos pages reçoivent plus de visites.
  • Pour l’expérience utilisateur, une bonne vitesse de chargement permet d’avoir un visiteur content, qui passe plus de temps sur votre site et qui au final a plus de chances de convertir.
  • Ce comportement utilisateur est détecté par google, notamment via son navigateur Chrome.
  • Le score de vitesse d’une page est un élément pris en compte dans les critères de positionnement de google depuis avril 2010.

Si avec tout ça, vous êtes pas convaincu qu’il est temps d’optimiser les performances de votre site !

 

Outil tout en un

Dareboost

dareboost

Dareboost – exemple sur la Redoute

Je commence par le plus complet, Dareboost vous donne le temps de chargement de la page analysée, des conseils, une note, des détails sur les requêtes chargées. Et contrairement a beaucoup d’autres outils du même genre, les rapports sont en français et les tests sont effectuées depuis des serveurs en France, ce qui ne gâche rien.

Dareboost propose également une solution de surveillance des performances de vos pages, mais dans sa version gratuite elle reste moins complète que les autres outils de cette sélection.

Yellow Lab Tools

Yellow Lab Tools, un autre analyseur de performance qui a l’avantage d’être totalement gratuit et open source. J’aime beaucoup le côté synthétique et efficace de l’outil. En plus, comme pour dareboost, c’est un petit français qui est derrière.

Outils pour tester le chargement des pages

Pingdom tools

pingdom tools

Pingdom tools – test sur www.allocine.fr

Avec Pingdom Tools, vous choisissez le lieu d’où part le test, rentrez votre url et il vous donne le temps de chargement de la page, des recommandations d’optimisations, un historique des différentes analyses, les éventuels erreurs et redirections rencontrées, etc…

J’aime bien cet outil car il est rapide, user friendly, et pas besoin de trop attendre comme d’autres outils de test de chargement.

 

GTmetrix

gt metrix

Gt metrix – test sur www.gentside.com

GTmetrix ne propose pas de choisir le lieu du test malheureusement dans sa version gratuite, mais il a une interface très sobre et surtout on peux comparer les performances de plusieurs pages entre elles, ce que ne fait pas Pingdom tools ou Dareboost.
On retrouve aussi l’analyse de pagespeed et de yslow, il est vraiment bien cet outil de perf.

 

Webwait

Webwait

Webwait – test sur news-de-stars.com

Webwait donne uniquement le temps de chargement de la page mais il a la particularité de lancer plusieurs jeux de tests à quelques secondes d’intervalles, puis d’en faire une moyenne. Ce qui le rend surement un peu plus précis que d’autres outils.

Page load time

extension page load time

Extension chrome: Page load time

Cette fois, c’est un un plugin chrome qui va tester le chargement de la page sur laquelle vous naviguez.  Il est très précis puisqu’il utilise l’API Web Timing. Lorsqu’on clique sur le chronomètre, on a même un petit tableau de ce qui est chargé par groupe d’éléments. Pratique pour avoir toujours en vue la rapidité des pages que vous visitez.

 

Outils d’analyse et de conseils d’optimisations

Yahoo slow

Yahoo slow

yahoo slow – type te nombre de requetes

Proposé en plugin navigateur, « Yslow » analyse votre URL et donne des pistes d’amélioration par ordre de priorité. Une note de performances est donnée au terme de l’analyse, histoire de voir où on se situe.

 

Pagespeed Plugin

page speed

pagespeed – les entetes d’expirations

Il analyse votre page puis vous donne une liste de conseils basés sur des bonnes pratiques. Il donne aussi un score qui peux servir de repère lorsqu’on on optimise une page.

 

Pagespeed insights

pagespeed insights

pagespeed insights – exemple sur la fnac – pas super

C’est Pagespeed mais en ligne, pas besoin d’installer quoi que ce soit, vous rentrez votre URL et vous aurez le même type de résultats qu’avec l’extension pagespeed.

 

Outils d’alerte et de monitoring serveur

Woozweb

woozweb

Woozweb – lesnumeriques

Service gratuit de SMILE, une fois que vous rentrez votre site dans leur système, leurs serveurs va régulièrement tester la disponibilité de votre serveur web avec un joli graphe à l’appui.
Autre point important, il vous alerte si votre site ne répond plus

 

Uptimerobot

Ce site gratuit surveille toutes les 5mn  jusqu’ à 50 sites internet, ce qui est largement suffisant. il a également un système d’alerte en cas de panne de votre site.

 

Pingdom

Pingdom, une référence et un gage de sérieux, possède aussi un outil de surveillance de l’état de votre serveur vraiment bien fait. Il est gratuit pour un seul site, et payant pour plusieurs sites avec en plus quelques fonctions supplémentaires. A tester donc.

 

Pour aller plus loin, je vous conseille d’aller voir notre guide seo sur les performances

guide seo pour accelerer son site

Guide SEO: Les bonnes pratiques pour accélérer son site

Cet article fait partie d’une série d’articles qui va suivre sur l’optimisation des performances des pages web. Commençons par expliquer les bonnes pratiques SEO qui seront ensuite développer plus en détails dans la suite de cette série de guides SEO spécial performance. Lire la suite