9 outils pour tester les performances de votre site

tester performances site

Ça y est, vous avez fini de créer votre site et il ressemble à ce que vous vouliez en termes de design et de contenus. Mais, avez-vous pensé à tester les performances de votre site ?

Pourquoi tester les performances de votre site ?

Pour plaire à Google ou aux autres moteurs de recherche

Il faut savoir que si vous voulez être bien classé par les moteurs de recherche comme Google, il ne suffit pas que de rédiger des contenus de qualité.

Il est également nécessaire que votre site soit performant en terme de vitesse d’affichage, d’interactivité et de stabilité visuelle.

En effet, mister Google a fait de l’expérience utilisateur un facteur de classement officiel avec ses Core Web Vitals.

Et qui dit Core Web Vitals, dit métriques essentielles, dont :

👉 Le Largest Contentful Paint (LCP), qui évalue le temps de chargement nécessaire à la page pour afficher les éléments principaux sur l’écran de l’utilisateur.

👉 Mais aussi, le First Input Delay (FID), qui mesure le temps écoulé entre le moment où un visiteur interagit pour la première fois avec votre site en cliquant sur un bouton, un lien ou autre jusqu’au moment où le navigateur répond à cette demande.

👉 Et enfin, le Cumulative Layout Shift (CLS), qui répertorie les changements de mise en page inattendus qui peuvent perturber le visiteur comme un contenu qui se déplace brusquement.

Attention, le déploiement de ce système de classement a déjà commencé. Originellement prévu pour mai 2021, il est mis en place progressivement de la mi-juin 2021 jusque fin août 2021.

⚠️ Dorénavant, pour être considéré comme performant aux yeux de Google, votre site devra donc avoir un LCP inférieur à 2,5 secondes, un FID inférieur à 100 ms et un CLS inférieur à 0,1.😮

core web vitals

Pour ne pas faire fuir vos visiteurs

Ben oui, vous êtes comme tout le monde. Vous n’avez pas envie que vos visiteurs et potentiels acheteurs quittent votre site avant même d’en avoir exploré son contenu.

Avouez quand même, que ce serait ballot d’avoir mis tant de temps à créer votre site, à le bichonner, à rédiger vos contenus pour que peu monde s’y attarde.

En effet, la probabilité de rebond augmente de 32 % à mesure que le temps de chargement de la page passe de 1 seconde à 3 secondes et pire encore par seconde(s) supplémentaire(s) (source : Google/SOASTA Research, 2017).

taux de rebond suivant le temps de chargement de la page

Alors, anticipez et testez les performances de votre site afin de les améliorer et ainsi augmenter son classement, son trafic et son taux de conversion.

Avec quel(s) outil(s) tester les performances de votre site ?

Oui, je vous entends murmurer : “Ok, c’est bien beau tout ça, mais maintenant, par quel moyen répertorier les lacunes de mon site pour y remédier.”

No stress, il existe pas mal de sites gratuits que vous pouvez utiliser et qui vous donneront toutes les infos.

Pour la plupart, il suffit de mettre l’URL de votre site pour que le résultat s’affiche. Néanmoins, pensez à faire les tests en mode incognito afin que rien ne vienne polluer les résultats.

Pour vous donner une idée de ce que les sites affichent, j’ai fait le test pour vous avec l’URL de mon blog.

Vous trouverez donc, pour chaque outil, le résultat du test. Mais aussi, le détail de ce que l’on peut consulter gratuitement. 😉

⚠️ Juste un petit conseil avant de vous lancer dans vos tests : ne vous focalisez pas trop sur la note obtenue. Gardez à l’esprit que vous vous servez de ces outils uniquement pour analyser et améliorer les performances de votre site.

GTmetrix

test performances site web GTtmetrix

GTmetrix a été développé par Carbon60, une société qui fournit des services de cloud. Il s’agit d’un outil permettant à quiconque de tester facilement les performances des pages de son site Web.

Depuis novembre 2020, GTmetrix a remplacé sa méthode d’analyse. En effet, auparavant, elle était basée sur les bibliothèques PageSpeed/YSlow. Dorénavant, elle utilise Lighthouse , qui est “la norme de l’industrie” en matière de performances.

La note GTmetrix est donc une moyenne pondérée du score de performance (70%) et de celui de structure (30%).

💡 Comme souvent, l’interface est en anglais.

Mais, force est de constater que le test de GTmetrix est vraiment complet.

Les résultats du test GTmetrix

Vous avez accès à :

👉 Un résumé avec :

  • La visualisation de la vitesse de chargement de la page
  • Les principaux problèmes identifiés
  • Un graphique avec le détail de la page. (temps de chargement complet, taille et nombre de requêtes et ventilation par requête)

👉 Le détail des performances par indicateurs ainsi que les timings du navigateur pour le :

  • First Contentful Paint (FCP)
  • Largest Contentful Paint (LCP)
  • Speed ​​Index (SI)
  • Total Blocking Time (TBT)
  • Time To Interactive (TTI)
  • Cumulative Layout Shift (CLS)

👉 La structure de la page avec les différents audits réussis ou non et les solutions à apporter

👉 Un graphique en cascade (waterfall) avec une visualisation demande par demande du chargement de la page

👉 L’historique de vos tests

résumé du test de performances GTmetrix

Vous pouvez également comparer votre URL avec une ou plusieurs autres.

Et enfin, si le cœur vous en dit, vous avez l’option de partager votre rapport via Facebook, Twitter ou un lien à copier-coller.

💡 Mon conseil : pensez à créer un compte gratuit 😉 afin de :

  • Conserver les données de vos rapports pendant 3 mois
  • Télécharger une version PDF des rapports GTmetrix
  • Choisir un autre emplacement de test que Vancouver
  • Modifier les vitesses de connexion
  • Créer une vidéo du chargement de la page et la télécharger en MP4
  • Obtenir le code iframe de la vidéo pour intégration
  • Bloquer les Ads
  • Effectuer 50 Tests hebdomadaires à la demande
  • Obtenir 10 Crédits API quotidiens (sympa, si vous êtes un dev et voulez tester l’API GTmetrix)
  • Surveiller une page quotidiennement
  • Accéder aux graphiques d’utilisation des ressources système
avantages compte gratuit gtmetrix

Uptrends Free Website Speed Test

test performances site web avec uptrends

Uptrends est société internationale qui fait partie du groupe ITRS, elle est spécialisée dans la surveillance des sites Web.

💡 Chouette, la langue française est disponible.🙂

En premier lieu, il faut souligner qu’avec le test de vitesse d’Uptrends, il est possible de réaliser successivement un test pour mobile, puis pour ordinateur en choisissant un des onze emplacements réseaux : Paris, Amsterdam, Beijing, Francfort, Londres, Los Angeles, Montréal, New York, Singapour ou Sydney.

De plus, pour le test ordinateur, vous avez le choix entre plusieurs navigateurs : Chrome, Firefox, Internet Explorer ou PhantomJS.

Ensuite, ce qui est cool, c’est que vous pouvez également tester les performances de votre site Web :

  • Sur différents appareils pour le test mobile
  • Dans différentes tailles d’écrans pour le test ordinateur
  • En choisissant la limitation de la bande passante
Uptrends choix test performances

Les résultats du speed test d’Uptrends

Bon, en ce qui concerne les résultats, vous obtenez un score décliné sur fond vert, orange ou rouge selon votre résultat…Evidemment, le score vert est le must 😉. Le temps de chargement total, la taille de la page et le nombre de requêtes sont également affichés.

Mais, Uptrends ne se limite pas à cela, il vous donne aussi :

  • Des conseils détaillés pour résoudre les problèmes liés aux performances sur votre site
  • Une répartition des requêtes par types et poids, codes de réponse et domaine(s) utilisé(s)
  • Un graphique en cascade montrant la progression de votre chargement de page

Cerise sur le gâteau, vous remarquerez que le graphique en cascade est très détaillé et que vous pouvez filtrer les résultats par ordre de chargement ou par taille.

Autre truc pratique, il est possible d’afficher ou de masquer les URL de données et les domaines, mais aussi, de voir les en-têtes de demande et de réponse en cliquant sur “+” à côté de la taille.

Enfin, depuis ce même graphique, vous avez accès à une visualisation de la cascade par groupes de domaines.

En plus de tout cela, Uptrends fournit un résumé des performances du chargement de votre page.

Celui-ci comprend le nombre total d’octets, le temps mis à la résolution, la connexion TCP, l’accès au HTTPS, ainsi que les temps d’envoi, d’attente et de réception.

Uptrends résumé des performances de la page

💡 Bon à savoir : il est impossible d’enregistrer votre résultat.

Néanmoins, vous pouvez le partager par un lien qu’il vous suffit de copier-coller (sympa pour retrouver votre test ou le partager avec les membres de votre équipe, un ami ou vos réseaux favoris.)

Pingdom Website Speed Test

test vitesse site web avec Pingdom

Pingdom est une société de surveillance de sites Web. Sur son site, elle donne accès à son outil gratuit, Website Speed Test.

Bon, je ne vais pas vous le cacher, c’est l’outil que j’aime le moins. Mais, comme il est super connu, je vais vous le présenter quand même.

💡 Encore un outil dont l’interface est en anglais.

Pour effectuer le test de votre page, vous avez le choix entre 7 emplacements : Tokyo, Francfort, Londres, Washington, San Francisco, Sydney et São Paulo.

Les résultats du speed test de Pingdom

Le résultat vous indique :

  • Votre score global (lettre/nombre avec un fond vert, orange ou rouge selon le score obtenu)
  • La taille de la page
  • Le temps passé au chargement
  • Le nombre de requêtes

Ensuite, vous avez, bien sur, des conseils pour améliorer les performances de votre site (assez succincts). Vous trouverez également les codes de réponses et la taille du contenu par type de contenu.

Pingdom résultats test performances

💡 Point positif : vous avez la possibilité de partager votre analyse sur Facebook, Twitter et par email. Pour cela, il suffit de cliquer sur “share results”.

☹️ Ce que je n’aime pas :

👉 Pingdom Website Speed Test plante souvent et les résultats sont tronqués : impossible de voir la taille du contenu par domaine, les requêtes par domaine et requêtes par fichier. Mais peut-être est-ce dû aux paramètres des sites que je teste ou de mon ordinateur… Alors, n’hésitez pas à l’essayer quand même, et si vous voyez ce que je viens de lister, indiquez-le-moi en commentaires.😉

👉 Il ne supporte pas encore le HTTP/2.

👉 Il ne propose pas de test pour la version mobile.

👉 Enfin, si, comme moi, votre serveur utilise Brotli qui est plus performant que Gzip, alors, le test Gzip échouera car Brotli ne sera pas reconnu. Pour info, si vous ne savez pas si vous utilisez Brotli, vous pouvez faire le test sur Keycdn.

Keycdn Website Speed Test

test performances site web avec Keycdn

Keycdn, comme son nom l’indique, est un fournisseur de CDN qui met gratuitement à disposition (entre autres outils) Website Speed ​​Test, afin de tester les performances d’un site web.

Il s’agit d’un autre outil que vous pouvez utiliser pour évaluer les performances de votre site Web et suivre les améliorations qui peuvent y être apportées.

💡 Pas de bol, l’interface est, une fois de plus, en anglais.

Ici, vous avez le choix entre 10 emplacements de serveurs dans le monde : Francfort, Amsterdam, Londres, New York, Dallas, San Francisco, Singapour, Sydney, Tokyo et Bangalore.

Les résultats du speed test de Keycdn

Comme souvent, le résultat du test donne une note globale sur 100, mais aussi un grade alphabétique.

En premier lieu, vous pouvez voir le temps, la taille et le nombre de requêtes qu’il a fallu pour charger totalement la page.

Ensuite, vous avez le résultat détaillé de votre score avec les notes individuelles obtenues pour chaque niveau de performance, ainsi que des pistes d’amélioration.

Juste en dessous, vous trouverez une ventilation visuelle des requêtes par :

  • Nombre de demandes et de leur statut
  • Temps de chargement par type de contenu
  • Nombre de demandes par type de contenu
  • Taille du contenu par type de contenu
  • Demandes par domaine
  • Taille du contenu par domaine
keycdn détail des requêtes et des contenus

Et, pour bien visualiser l’enchaînement des demandes, vous aurez accès à une cascade complète (waterfall) avec le détail des horaires et des en-têtes HTTP de chaque actif et des pictogrammes représentatifs.

exemple waterfall Keycdn

Enfin, Website Speed ​​Test vous offre un aperçu visuel de votre site Web.

💡 Bon à savoir : vous pouvez partager votre résultat sur Facebook, Twitter ou par un lien qu’il vous suffit de copier.

👉 Mon conseil : pensez à copier-coller l’URL de vos résultats afin de les retrouver car aucune sauvegarde n’est possible sur Keycdn 😉.

Dareboost

test performances dareboost contentsquare

Dareboost est une entreprise française dont le credo est la performance Web pour tous. Elle a été créée en 2014 et rachetée fin 2020 par Contentsquare, spécialisé dans l’expérience analytics.

💡 Du coup, l’interface est dispo en français.🙂

Evidemment, je ne parlerai que de ce que l’on peut faire avec un compte gratuit, mais, vous allez voir, vous pouvez quand même accéder à pas mal de choses.

Donc, après la création d’un compte gratuit, vous pouvez effectuer 5 tests/mois et les données seront conservées pendant un mois, ce qui est pas mal pour retrouver vos tests de performance/qualité avant et après modifications.

⚠️ Attention, une comparaison (2 pages) décompte 2 analyses des quotas.

Tout d’abord, vous pouvez laisser les paramètres de Dareboost par défaut en ce qui concerne le navigateur et le lieu du serveur : Google Chrome & Paris ou bien choisir entre les diverses options (mobile ou desktop et différents lieux).

Ensuite, une fois le test fini, vous le retrouverez dans le “Dashboard” et dans “Rapports”, il vous suffira de cliquer sur “voir” pour afficher de nouveau le rapport détaillé.

choix navigateur lieu et rapport Dareboost

Les résultats du speed test de Dareboost

En premier lieu, Dareboost vous indique le résultat des performances/qualité de votre site de manière synthétique en vous attribuant une note globale selon les bonnes pratiques présentes sur votre page Web, en vous indiquant les problèmes, améliorations à effectuer et ce que vous avez déjà accompli avec succès :

  • Largest Contentful Paint (LCP)
  • Total Blocking Time (TBT)
  • Cumulative Layout Shift (CLS)
  • Si les Core Web Vitals sont respectés
  • Le poids du site réparti en HTML, CSS, JS, images et autres

Alors là, un petit détail sympa : en survolant chaque point d’interrogation, des infos explicatives s’affichent.

informations dareboost au survol

Juste en dessus, vous trouverez le détail des bonnes pratiques et conseils, mais aussi, ce que vous pouvez améliorer et surtout celles que vous avez déjà respectées…ça, franchement, ça met du baume au cœur.

Il est à noter que vous obtiendrez une note de 0 à 100 pour chaque catégorie de bonne pratique : accessibilité, compatibilité, nombre de requêtes, qualité du code, volume de données, jQuery, optimisation du rendu, politique de cache, référencement (SEO), sécurité, Google Analytics, Google Font API.

Outre tous ces détails, un Filmstrip et replay vidéo décomposant le chargement de la page sont disponibles afin de voir ce qui prend du temps à charger. Le replay peut être paramétré à diverses vitesses pour mieux analyser la progressivité de l’affichage de la page.

Vous avez également accès à une timeline/waterfall en cliquant sur le bouton du même nom.

Avec Dareboost, vous pouvez également comparer 2 URL :

  • Test A/B pour vous comparer à vos concurrents
  • Première et seconde visite pour mesurer l’efficacité du cache navigateur
comparaison 2 pages Dareboost

👉 Mon conseil : téléchargez le rapport disponible en PDF, il est très sympa 😉

WebPage Test

test performances site avec WebPage test

WebPageTest est un site de test de performances de sites Web principalement destiné aux développeurs.

Vous y trouverez un nombre phénoménal d’options et bénéficierez de rapports complexes, comme des analyses de métriques approfondies (DNS, TCP, TLS, etc.).

D’autre part, avec WebPageTest, il est possible de réaliser des tests simples ou avancés et d’effectuer une comparaison entre plusieurs URL.

👉Je vous conseille donc de sélectionner les tests avancés afin de choisir l’emplacement de test Paris.

💡 Il est à noter que l’interface est en anglais.

Les résultats de WebPageTest

Le test fini, le résultat sera réparti sous plusieurs onglets :

  • Résumé
  • Détails avec une vue en cascade
  • Web Vitals
  • Performance
  • Contenu
  • Domaines
  • Traitement
  • Capture d’écran
  • Analyse d’image (un onglet s’ouvre et Cloudinary analyse les images)

💡 Bon à savoir : pour peu que vous n’effaciez pas le cache de votre navigateur, vous pourrez retrouver jusqu’à 30 jours d’historique de test.

👉 Mon conseil : créez un compte gratuit afin de disposer de votre historique de tests pendant 13 mois. 😉

PageSpeed Insights

test vitesse de la page avec Pagespeed Insights

PageSpeed Insights est un outil créé par Google. Il utilise Lighthouse pour tester les performances des pages d’un site Web en version mobile ou ordinateur.

💡 Cool, l’interface est en français.🙂

Après avoir inséré l’URL de la page, le test vous indique le score global que vous avez obtenu.

  • 0 à 49 (rouge) : Mauvais
  • 50 à 89 (orange) : Besoin d’amélioration
  • 90 à 100 (vert) : Bon

🙂 Il est à noter que vous pouvez passer du score version mobile à celui version ordinateur juste en cliquant sur les onglets à gauche, ce qui est très pratique.

Les résultats de PageSpeed Insights

Evidemment, puisque c’est un outil made by Google, les données de laboratoire recueillies correspondent aux métriques essentielles des Core Web Vitals : First Contentful Paint Largest Contentful Paint et Cumulative Layout Shift.

Mais, à ces métriques essentielles, s’ajoutent également le temps nécessaire à la page pour devenir interactive pour l’utilisateur (Time To Interactive), la durée pendant laquelle les tâches de plus de 50 ms bloquent la page (Total Blocking Time) et la vitesse à laquelle le contenu s’affiche visuellement (Speed Index).

De plus, en cliquant sur le lien “calcul du score lié aux performances”, vous pouvez voir, de façon graphique, la répartition de vos résultats, que ce soit pour le mode ordinateur ou pour la version mobile.

PageSpeed insights répartition score

Enfin, pour approfondir l’analyse et vous donner des pistes d’amélioration pour la performance de votre site, Lighthouse sépare ses audits en trois sections :

  • Opportunités : suggestions pour améliorer vos performances
  • Diagnostics : informations concernant les bonnes pratiques web à appliquer
  • Audits réussis : évidemment, plus il y en a, mieux c’est 😉.

☹️ Je vais jouer la relou et vous indiquer ce que je n’aime pas : il n’existe aucune possibilité de sauvegarder les résultats du test et aucun choix d’emplacement de serveur (Pagespeed Insights effectue les tests seulement via un moteur de simulation appelé Lantern).

Chrome Devtools : Lighthouse

test performances site Lighthouse

Lighthouse est accessible via les Chrome DevTools.

💡 Maintenant, l’interface est en français.

Tout d’abord, pour accéder aux Chrome DevTools, allez sur le site que vous souhaitez auditer en indiquant son URL dans le navigateur Google Chrome, puis, faites un clic droit et cliquez sur “inspecter”.

Hop, les Chrome DevTools apparaissent à droite et à gauche, vous voyez toujours votre site.

Ensuite, cliquez sur “Lighthouse”, puis, choisissez les tests que voulez faire ainsi que la version mobile ou desktop et enfin, cliquez sur “generate report”, ça mouline un peu, puis, votre rapport est visualisable.

accès lighthouse via les chrome devtools

Mais, cet outil, contrairement à PageSpeed Insights, fait plus que tester les performances de votre site. Il analyse également les meilleures pratiques, l’accessibilité et le SEO (et les Progressive Web Apps).

Les résultats Lighthouse dans les Chrome DevTools

Les scores obtenus sont donc répartis en 4 groupes : Performance, Accessibilité, Bonnes pratiques et SEO.

Juste en dessous, vous trouverez le détail des audits réussis ainsi que ceux à améliorer avec les recommandations des modifications à apporter pour chacun.

En sus, d’autres informations sont disponibles à plusieurs endroits, en cliquant dessus:

Tout d’abord, le lien “View Original Trace”, vous redirigera vers l’onglet performance des Chrome DevTools avec la capture visuelle des métriques de performances au fur et à mesure que la page s’exécute comme le FCP (First Contentful Paint) et le LCP ( Largest Contentful Paint).

chrome devtools timeline performances

Ensuite, le lien “performance score is calculated” vous expliquera comment Lighthouse calcule votre score de performance global.

Par ailleurs, le lien “See calculator” vous amènera à la page “calcul du score lié aux performances” de PageSpeed Insights.

Et enfin, en cliquant sur les 3 points, en haut, à droite, vous pourrez télécharger le résumé ou le rapport détaillé en PDF, le copier/sauvegarder en Json et également le sauvegarder en HTML.

lighthouse chrome devtools infos complémentaires

💡 Bon à savoir : vous pouvez également obtenir les mêmes résultats en utilisant l’extension Chrome Lighthouse

web.dev measure

mesures performances site avec web.dev measure

Web.dev.measure fait partie du site web.dev. Il s’agit d’un autre outil créé par Google

Pour auditer votre site et obtenir des conseils adéquats pour améliorer vos résultats, il vous suffit d’indiquer l’URL.

💡 Encore une fois, l’interface est en anglais.

Tout comme dans les Chrome DevTools, les analyses et scores obtenus sont : Performance, Accessibilité, Bonnes pratiques et SEO.

Par contre, la présentation n’est pas la même.

Les résultats de Web.dev measure

Ici, en dessous des scores de performance, vous n’aurez que la liste des points à améliorer. Ils seront répartis par gravité (high, medium, low) et un lien explicatif sur la façon de procéder sera présent.

Quoi qu’il en soit, pour retrouver le détail de l’analyse, cliquez sur “view report” et le tour est joué.

wev.dev measure voir rapport et conseils
wevdevmeasure voir rapport et conseils

👉 Mon conseil : Connectez-vous avec votre compte Google pour suivre vos progrès au fil du temps.. 😉

Le mot de la fin

Tester les performances de votre site est vraiment une chose qu’il ne faut pas négliger. D’autant plus que vous disposez, maintenant, d’un éventail d’outils gratuits pour le faire.

Après, n’oubliez pas de suivre les pistes d’amélioration fournies et d’appliquer les correctifs appropriés.

En effet, bien souvent, installer un plugin d’optimisation et de cache et le paramétrer (correctement) ne suffira pas. Sachez qu’il vous faudra aussi optimiser vos images, vos polices ainsi que vos codes JavaScript et CSS.

Ensuite, il conviendra que vous pensiez aussi à améliorer l’accessibilité et, bien entendu, le SEO de votre site.

Dans de prochains articles, je vous donnerai des pistes pour arriver à un score dans le vert. 😉

Mais, en attendant, vous pouvez, si vous le souhaitez, m’indiquer quels outils vous plaisent le plus.

Hello, moi, c'est Christine 👋. Je suis créatrice et optimisatrice de sites Web et rédactrice Web SEO. J’adore parcourir le web pour dénicher des astuces, fonctionnalités et outils gratuits qui facilitent la création numérique. Sur ce blog, je vous partage mes découvertes et espère qu’elles pourront vous être utiles.
0 0 votes
Évaluation de l'article
S’abonner
Notifier de
guest
6 Commentaires
le plus récent
le plus ancien le plus populaire
Commentaires en ligne
Afficher tous les commentaires
Retour en haut
6
0
J'aimerai bien avoir votre avis sur cet article 😉x