9 outils pour tester les performances de votre 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.😮

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 que ce serait ballot d’avoir mis autant de temps à créer votre site et 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).

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. 😉

GTmetrix

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

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

Et enfin, 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

Uptrends Free Website Speed Test

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.🙂

Avec le test de vitesse d’Uptrends, il est possible de réaliser successivement un test pour mobile, puis pour ordinateur. D’autre part, vous avez le choix entre 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

Les résultats du speed test d’Uptrends

En ce qui concerne les résultats, vous obtenez un score décliné sur fond vert, orange ou rouge selon votre résultat… Évidemment, 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 et 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.

Pingdom Website Speed Test

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.

💡 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. Il est, par exemple, 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

Keycdn est un fournisseur de CDN qui met gratuitement à disposition (entre autres outils) Website Speed ​​Test.

Il s’agit d’un autre outil que vous pouvez utiliser pour évaluer les performances d’un site Web et voir les améliorations à apporter.

💡 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

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

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

Dareboost

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. Ainsi, vous pourrez retrouver vos tests de performance/qualité avant et après modifications.

Tout d’abord, vous pouvez laisser les paramètres par défaut pour le navigateur et le lieu du serveur (Google Chrome & Paris). Ou bien, vous pouvez 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é.

Les résultats du speed test de Dareboost

En premier lieu, Dareboost vous informe du résultat des performances/qualité du site de manière synthétique via une note globale. Cette note correspond aux bonnes pratiques présentes sur votre page Web. Il vous indique également 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.

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

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)

💡 Si vous n’effacez pas le cache de votre navigateur, vous pourrez retrouver jusqu’à 30 jours d’historique de test.

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

🙂 On peut facilement passer du score mobile à celui ordinateur en cliquant sur les onglets à gauche.

Les résultats de PageSpeed Insights

Evidemment, puisque c’est un outil made by Google, les données recueillies correspondent aux métriques essentielles des Core Web Vitals :

• First Contentful Paint
• Largest Contentful Paint
• 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)
• La vitesse à laquelle le contenu s’affiche visuellement (Speed Index)

Cliquez sur le lien “calcul du score lié aux performances”. Un graphique apparait vous indiquant la répartition de vos résultats (ordinateur ou mobile).

Enfin, pour approfondir l’analyse et vous donner des pistes d’amélioration, 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 😉.

Chrome Devtools : Lighthouse

Lighthouse est accessible via les Chrome DevTools.

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

Pour accéder aux Chrome DevTools, allez sur le site à 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. Enfin, cliquez sur “generate report”, ça mouline un peu, puis, votre rapport est visualisable.

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. Ceux-ci vous recommanderont les 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. Là, vous aurez une capture visuelle des métriques de performances (FCP=First Contentful Paint et LCP=Largest Contentful Paint).

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é/rapport détaillé en PDF. Et également, le copier/sauvegarder en Json ou en HTML.

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é.

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.