4 outils pour tester la vitesse de son site

Google l’a annoncé, avec le Core Web Vitals, l’expérience utilisateur va être un critère de positionnement à partir de mai 2021. Même s’il reste un facteur minime sur ton positionnement, tu dois quand même savoir que Google affichera le score obtenu par la page, directement dans les pages de résultats de recherche. L’un des éléments de cette expérience, est la vitesse de chargement de la page. Et comme il existe de nombreux outils, j’ai décidé de vous en sélectionner 4.

Pourquoi la vitesse de son site est importante ?

Avec cette future mise à jour, Google frappe un grand coup. Et l’intégration des Core Web Vitals oblige les sites à devenir de plus en plus performant.

Pour rappel, Google attribue un budget de crawl. Il n’aime pas perdre de temps et son objectif est de pouvoir naviguer le plus rapidement possible sur les sites web. Au-delà du simple crawl, les internautes n’ont pas de temps à perdre, il leur faut donc l’information tout de suite. Or, si ton site met plus de 3 secondes à se charger, tu risques de perdre, en moyenne, 53 % de tes visiteurs.

Voilà pourquoi il est important de tester régulièrement les performances de son site et vérifier qu’il se charge rapidement.

Maintenant, passons en revue 4 sites qui permettent de réaliser ces tests.

Google PageSpeed Insights

Résultat d'un test de vitesse sur Google Page Speed Insight
Il y a encore du boulot.

Commençons par celui qui vient directement de chez Google, Page Speed Insight. Cet outil a été spécifiquement créé pour tester les performances d’une page web, et donc la vitesse du site, selon des métriques précises :

  • First Contentful Paint (FCP) : mesure le temps entre le début de chargement et l’instant où le premier contenu apparaît à l’écran
  • Largest Contentful Paint (LCP) : analyse le temps de rendu de la plus grande image ou du plus grand bloc de texte visible
  • Speed Index: calcule la vitesse d’affichage visuel du contenu, pendant le chargement de la page
  • Cumulative Layout Shift (CLS) : évalue la somme totale des scores de changement de mise en page qui se produisent pendant toute la durée de vie de la page
  • Time To Interactive (TTI) : détermine le temps qu’il faut pour que la page soit totalement opérationnelle
  • Total Blocking Time (TBT) : compare la durée totale entre le FCP et le TTI

Ces 6 données sont exécutées par Lighthouse, qui est disponible à tout moment dans l’inspecteur de données de Chrome. Une fois combinées, il en ressort une note finale allant de 0 à 100.

Un score au-dessus de 90 sera considéré comme bon, 50-89 : à améliorer, <50 : médiocre. Il est calculé pour la version ordinateur, mais également pour la version mobile du site. Ce dernier est souvent très médiocre, car la plupart des sites sont créés pour la version ordinateur puis améliorés pour le mobile.

Mais on sait bien que Google crawl les sites dans leur version mobile. Il est donc très important d’avoir un site d’abord optimisé pour ce format. La part de trafic sur smartphone ne cesse d’augmenter et a même dépassé, depuis 2019, celle sur l’ordinateur.

Et comme ils sont sympas chez Google, l’outil te fournit toutes les recommandations pour améliorer ton score, et ainsi avoir un site performant.

Pingdom Website Speed Test

Resultat du test de performance sur le site Pingdom
Le temps de chargement est plutôt bon mais il va falloir travailler sur les performances.

Ce site, créé pour la surveillance de performance des sites, propose un outil gratuit d’analyse du temps de chargement de ton site.

À la différence du précédent, Pingdom te permet de choisir ta région. Le test sera donc plus précis, car fait depuis un serveur proche. Pour la France, on testera la vitesse de son site sur les serveurs de Londres.

Une fois le test effectué, il t’affichera 4 premières données :

  • Un score global, de 0 à 100, des performances du temps de chargement
  • Le poids de ton site qui influe énormément sur la vitesse d’affichage
  • Le nombre de requêtes sur la page
  • Le temps de chargement complet de la page

En scrollant un peu on peut voir un premier tableau, qui correspond au détail du score vu plus haut. Un prochain outil sera plus précis sur ces points de détails.

Dans la partie suivante, Pingdom réparti en 4 tableaux certains points pouvant ralentir le chargement du site, avec d’un côté :

  • Le contenu par poids
  • Le contenu par nombre de requêtes

Et en dessous :

  • Le poids par domaine à charger
  • Le nombre de requêtes par domaines

Cette deuxième partie n’est pas la plus intéressante, car on ne peut pas influer sur les domaines externes. En revanche, la première partie te servira à comprendre ce qui alourdit ton site (bien souvent ce sont les images), pour pouvoir l’optimiser et gagner en performance.

Et si tu es vraiment curieux, alors en dessous tu trouveras la temporalité du chargement de ta page, avec l’ordre et le temps de chargement des données et de contenus du site.

L’outil peut être utilisé gratuitement, de façon illimitée.

Dareboost

Créé par quatre amis en 2013, pour leur projet de fin d’études, Dareboost est un outil français dédié à la performance web. Cet outil n’est pas à mettre entre les mains d’un débutant. En effet, les résultats sont bien plus complets et complexes à analyser si l’on n’a pas les connaissances suffisantes.

Alors, détaillons les résultats.

Affichage du nombre de problèmes de performances avec Dareboost

Là on voit directement que j’ai 11 problèmes à résoudre sur mon site.

Dans la première zone, tu peux voir de gauche à droite :

  • Le score global de performance du site
  • Les tests qui sont passés ou non, avec possibilité d’aller directement aux problèmes à améliorer en priorité
  • La vidéo du chargement, où l’on peut jouer sur la vitesse pour voir à partir de quel moment il y a le premier affichage et comment le site se charge

La seconde partie est beaucoup plus complète. On y voit une première zone qui indique de quelle façon a été simulé le passage sur le site. Pour l’exemple actuel, tu analyses comme un visiteur qui utilise le navigateur Chrome, dont le serveur le plus proche est situé à Paris et qui possède une connexion de 8 Mb/s.

Affichage des performance de la page web sur Dareboost

Mon site est un petit peu lourd et met trop de temps à charger le premier octet.

Dans la seconde zone, tu as à droite :

  • Le nombre de requêtes et leurs répartitions
  • Le poids du site et sa répartition

Et à gauche :

  • Le temps de chargement du premier octet du site
  • Le temps que met le premier contenu à s’afficher
  • Le temps de chargement total de la page

On peut voir pour chacun de ces 3 chargements, un morceau de cercle en gris. Il s’agit tout simplement du temps idéal pour chacun des 3 paramètres.

Dans la troisième zone, on voit qu’il n’y a aucune erreur de navigateur, que la page ne supporte pas totalement le HTTP/2 et qu’il possède un speed index supérieur à 1000. Ce dernier est un indice de performance sur la vitesse d’affichage de la page, sans scroll. Google recommande qu’il soit de moins de 1000.

En enfin dans la dernière zone, on trouve les technologies utilisées sur le site. Dans l’exemple, il y a :

  • Google Font pour les polices d’écriture de chez Google
  • Hubspot pour le téléchargement du livre blanc
  • js qui est une bibliothèque javascript
  • Piwik, devenu Matomo, qui me servait à une époque pour tester une alternative à Google Analytics
  • Twitter Emoji, qui doit être installé de base avec WordPress
  • WpRocket, le plugin WordPress d’optimisation des performances
  • WordPress, le CMS installé sur le site
  • jQuery, une bibliothèque javascript
  • reCaptcha qui est un antispam pour les formulaires

et enfin PHP

Améliorer les performances du site sur Dareboost

Encore pas mal de travail selon le site.

Enfin, tu vas avoir accès à la liste des recommandations et bonnes pratiques pour améliorer les performances de ton site. Tu peux d’ailleurs choisir la catégorie que tu souhaites voir parmi :

  • L’accessibilité
  • La compatibilité
  • Le nombre de requêtes
  • L’optimisation du rendu
  • La politique de cache
  • La qualité
  • Le SEO
  • La sécurité
  • Le volume de données
  • Certaines données spécifiques aux technologies utilisées

Une chose importante à savoir sur Dareboost est qu’il n’est pas gratuit. En effet, le service propose de faire un test gratuit par mois. En t’inscrivant gratuitement, tu passes à 5 tests par mois, sinon il faudra passer par la formule payante à 49 €/mois.

GTmetrix

De loin mon favori, GTmetrix est également un site dédié à l’analyse des performances. Il a d’ailleurs subi une mise à jour majeure en novembre 2020. Ce changement lui permet d’intégrer complètement les web vitals de Google, via Lighthouse.

Analysons cette nouvelle structure.

Score de performance de la page sur l'outil GTmetrix

La structure est bien optimisée mais pas mal de travail sur les performances.

Dans cette première partie, tu observes 2 types de contenus : le « GTmetrix grade » et les « Web vitals ».

Le premier te donne 2 scores :

  • La performance de ton site basé sur les données de Lighthouse
  • La structure correspond à la façon dont est construit ton site

La partie de droite te montre les indications des web vitals obtenus avec Lighthouse. Ce sont donc les mêmes données que l’on peut retrouver du côté de Page speed Insight, à savoir :

  • Le Largest Contenful Paint (LCP)
  • Le Total Blocking Time (TBT)
  • Et le Cumulative Layout Shift (CLS)

Ensuite, tu as plusieurs onglets. Regardons de plus près ce que chacun d’entre eux peut t’apporter.

Summary

Bilan de test de vitesse sur l'outil GTmetrix

Un premier bilan du site.

Cet onglet est un résumé des 5 autres. Tu trouveras dessus :

  • La visualisation du chargement de ta page avec les différentes données de Lighthouse
  • Les principaux problèmes à résoudre, et sur quels éléments
  • La division du contenu de la page en poids et nombre de requêtes

Performance

Détail des données de performance Lighthouse sur GTmetrix

Des optimisations à faire sur le TBT et CLS.

Cette partie va reprendre les temps de chargement des différentes données de performance de Lighthouse.

Analyse du temps de chargement du site sur le navigateur avec GTmetrix

En dessous, il va signaler les différentes durées de chargement reportées par le navigateur :

  • Redirection de l’URL
  • Connexion au serveur
  • Réponse du serveur
  • Réception de la première donnée
  • Premier rendu de la page
  • Traitement de la page
  • Fin d’analyse du HTML
  • Téléchargement de toutes les ressources
  • Temps de chargement global

Structure

Liste des améliorations de la structure du site sur GTmetrix

On voit qu’il y a beaucoup de petites améliorations à faire et une très importante.

Ce tableau te donne tous les problèmes structurels de ton site. Il te précise quels éléments sont impactés. Il t’indique également tout ce qui est déjà bien optimisé.

Dans cet exemple, tu peux voir que je dois travailler sur les changements de dispositions. Ce sont des éléments qui, pendant le chargement de la page, sont à un endroit puis doivent se déplacer pour aller à leur emplacement final. On peut voir également que GTmetrix me recommande d’utiliser un CDN pour mieux charger mon site, or c’est déjà le cas, donc je dois vérifier pourquoi ces éléments ne sont pas pris en compte.

Waterfall

Graphique de chargement de la page web sur GTmetrix

Il faut améliorer tout ça.

Le waterfall, ou graphique en cascade, t’affiche le chargement de toutes les données et contenus de la page dans le temps. Grâce à cette partie, tu peux vraiment analyser ce qui bloque le chargement et pendant combien de temps.

Sur cet exemple, tu peux voir que le chargement des polices Google est bloquant.

Vidéo

Elle permet simplement d’avoir une vidéo du chargement de la page. L’avantage est de pouvoir la ralentir pour voir la façon dont se chargent les contenus.

History

Elle garde une trace des différents tests effectués, pour une même page.

Les versions de GTmetrix

Je te recommande vivement de te créer un compte sur le site. Une fois connecté, tu peux choisir différentes options pour le test de ton site, notamment le serveur le plus proche de toi.

Dans sa version gratuite, GTmetrix propose 50 tests gratuits par semaine, dont une surveillance de page quotidienne. Les prix varient ensuite entre 12 $ et 47 $ par mois. À toi de voir ce dont tu as besoin, mais avec le compte gratuit on peut déjà faire pas mal de tests.

Conclusion

Tu as pu voir qu’il existe un bon nombre d’outils, qui ont chacun leur façon de tester la vitesse d’un site. Celui que je recommande est Gtmetrix, de par sa simplicité d’utilisation et son modèle économique.

En revanche, je ne me focalise jamais sur les données d’un seul outil. C’est pour ça qu’il vaut mieux toujours effectuer ces tests sur les 3 outils gratuits : Google Page Speed Insight, Pingdom et GTmetrix.

Et si tu veux investir dans un outil performant, fonce chez Dareboost.

 

Ceci conclut cet article. Si tu as des questions sur l’utilisation d’un des outils, laisse un petit commentaire. Et si tu souhaites faire appel à une agence SEO pour améliorer ton référencement naturel, programme un coup de téléphone via le bouton en bas à droite.

Charly Rouget

Charly Rouget

Horloger du web

Fondateur de La Machinerie, l’agence SEO qui va remettre ton site à la bonne heure. Je partage, au travers de nombreux articles, des conseils et astuces sur le référencement naturel.

4 outils pour tester la vitesse de son site 1
4 outils pour tester la vitesse de son site 1

Deviens visible avec ton site !

Si ton site à un réel enjeu économique pour ton entreprise

👇👇👇