Les 15 meilleurs outils gratuits de test de vitesse de sites Web de 2018

La vitesse d’un site Web peut être un facteur critique pour son succès. Comme nous l’avons abordé dans notre guide sur les réseaux de diffusion de contenu, les sites Web à chargement plus rapide peuvent bénéficier d’un meilleur classement SEO, de taux de conversion plus élevés, d’un taux de rebond plus faible, d’une durée plus longue des visiteurs sur le site, d’une meilleure expérience utilisateur globale et d’un meilleur engagement. C’est pourquoi il est important de tirer parti des nombreux outils gratuits de test de vitesse des sites Web disponibles afin d’obtenir des performances optimales. Google veut que votre site se charge en moins d’une seconde.

Que peut vous aider à analyser un test de vitesse de site Web ?

Voici quelques-unes des façons courantes d’utiliser les outils de test de vitesse des sites Web :

• Pinpointing scripts, fonts, and plugins causing load time issues (HTML, JavaScript, CSS)
• Checking minification of your scripts
• Finding large images resulting in bottlenecks
• Determining if you have render-blocking JavaScript or CSS
• Testing Time to First Byte (TTFB)
• Analyzing total load times, page sizes, and # of requests
• Checking performance from different geographical locations
• Checking rendering speed in different browsers
• Analyzing HTTP Headers
• Measuring performance of your content delivery network
• Verifying that assets are loading correctly from your CDN

Website speed concepts

Before running a website speed test it is important to understand a few concepts behind how these tools work so that you can better analyze the data and then optimize your site accordingly. Non seulement vous pouvez tester la vitesse de votre hébergeur, mais vous pouvez également mesurer les performances de votre CDN.

Temps au premier octet (TTFB)

Temps au premier octet (TTFB) est la mesure de la réactivité d’un serveur web. En gros, c’est le temps qu’il faut à votre navigateur pour commencer à recevoir des informations après qu’il les ait demandées au serveur. En utilisant un CDN, vous pouvez réduire considérablement l’impact de la charge sur votre serveur d’origine, ce qui devrait contribuer à diminuer votre TTFB.

Lisez-en plus sur le temps au premier octet et le temps au dernier octet.

Blocage du rendu JavaScript et CSS

Le blocage du rendu fait référence au JavaScript et au CSS qui empêchent votre page de se charger aussi rapidement qu’elle le pourrait.

JavaScript

Google recommande de supprimer ou de différer le JavaScript qui interfère avec le chargement du contenu au-dessus du pli de vos pages Web. Here is a great tutorial on how to properly defer JavaScript loading.

Example of deferring JavaScript by placing it just before your </body> tag.

function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element);}if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false);else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload);else window.onload = downloadJSAtOnload;

CSS

You will then also want to optimize your CSS delivery to keep it from causing delays on page load. Here are a few ways to fix this:

1. Properly call your CSS files
2. Lessen the amount of CSS files
3. Use less CSS overall

Here is a great article on render-blocking CSS by Ilya Grigorik, a web performance engineer at Google.

CSS is a render blocking resource, get it down to the client as soon and as quickly as possible to optimize the time to first render!

Minification of resources

Minification of resources means removing unnecessary characters from your HTML, JavaScript, and CSS that are not required to load, such as:

• Les caractères d’espace blanc
• Les caractères de nouvelle ligne
• Les délimiteurs de bloc

Cela accélère vos temps de chargement car cela réduit la quantité de code qui doit être demandée au serveur. Vous pouvez utiliser un outil comme Dan’s CSS and JavaScript Minify pour supprimer tous les caractères inutiles. Ou si vous utilisez WordPress, vous pouvez utiliser un plugin comme Autoptimize, qui minifiera tout votre HTML, JavaScript et CSS pour vous.

Demandes HTTP

Lorsque votre navigateur va chercher des données sur un serveur, il le fait en utilisant HTTP (Hypertext Transfer Protocol). Il s’agit d’une requête/réponse entre un client et un hôte. En général, plus votre page web fait de requêtes HTTP, plus elle se charge lentement.

Il existe de nombreuses façons de réduire le nombre de requêtes, par exemple :

• Combiner vos fichiers CSS et JavaScript
• Inline votre JavaScript (seulement s’il est très petit)
• Utiliser des Sprites CSS
• Réduire les actifs tels que les plugins tiers qui font un grand nombre de requêtes externes

Liste d’outils de test de vitesse de site web

Maintenant que vous avez une compréhension de base des concepts de performance web ci-dessus, consultez ces 15 outils gratuits ci-dessous pour tester la vitesse de votre site web. Chacun d’entre eux offre ses propres fonctionnalités uniques, des rapports et différentes façons de disséquer vos résultats.

Il est également important de réaliser lors de l’exécution d’outils comme ceux-ci qu’une première recherche DNS sera généralement plus lente. Si vous comparez les temps de chargement totaux, il est parfois préférable d’exécuter les tests plusieurs fois et de prendre une moyenne des résultats.

KeyCDN Website Speed Test

KeyCDN a construit un outil de test de vitesse de site Web rapide et léger que vous pouvez utiliser pour obtenir des informations détaillées sur les performances de votre site Web. Si offre 14 emplacements à choisir autour du globe, et vous avez la possibilité de rendre vos résultats de test privés ou publics. Le test comprend une décomposition en cascade et un aperçu visuel du site Web en bas. Vous pouvez voir rapidement combien de requêtes HTTP ont été faites, la taille complète de la page demandée et le temps de chargement.

C’est également l’un des seuls outils, en dehors de PageSpeed, qui est réactif et fonctionne parfaitement sur les appareils mobiles.

Google PageSpeed Insights

Google PageSpeed Insights est un outil de test de vitesse de site Web qui note votre site sur une échelle de 1 à 100. Plus le chiffre est élevé, plus votre site est optimisé. Tout résultat supérieur à 85 indique que votre site Web est performant. PageSpeed vous fournit des rapports pour les versions de bureau et mobile de votre site. Vous pouvez consulter les recommandations d’amélioration, comme la nécessité de minifier les CSS ou d’optimiser vos images.

PageSpeed Insights mesure comment la page peut améliorer ses performances sur :

• Temps de chargement au-dessus du pli : Temps écoulé entre le moment où un utilisateur demande une nouvelle page et le moment où le contenu au-dessus du pli est rendu par le navigateur.
• Temps de chargement de la page complète : Temps écoulé entre le moment où un utilisateur demande une nouvelle page et le moment où la page est entièrement rendue par le navigateur.

Un rapport mobile comprend une catégorie supplémentaire appelée « Expérience utilisateur » qui est incluse dans la notation de votre site. Cela inclut la vérification de la configuration de votre viewport, la taille de vos cibles de tap (boutons et liens), et aussi les tailles de police admissibles.

L’équipe de PageSpeed Insights a également récemment lancé un nouvel outil de test de vitesse de site Web sur le pense avec Google que vous pourriez vouloir vérifier. Une fonctionnalité intéressante est les beaux rapports qu’il génère. Peut être génial pour envoyer aux clients.

Test de vitesse Pingdom

Pingdom est probablement l’un des outils de test de vitesse de site Web les plus connus. Leurs rapports sont divisés en quatre sections différentes qui comprennent une ventilation en cascade, une note de performance, une analyse des pages et un historique.

L’analyse des pages offre un excellent aperçu avec des informations supplémentaires telles qu’une analyse de la taille, la taille par domaine (vous pouvez facilement comparer la taille de vos actifs CDN par rapport à votre domaine), le nombre de demandes par domaine et quel type de contenu a eu le plus de demandes.

L’outil de test de vitesse de Pingdom vous permet également de tester la vitesse de votre site web depuis quatre sites principaux, notamment :

• Dallas, Texas, USA,
• Melbourne, Australie
• San Jose, Californie, USA
• Stockholm, Suède

Les résultats d’un test de vitesse Pingdom vous fournissent des informations sur les performances, similaires à celles de Google PagesSpeed Insights, qui indiquent où vous pouvez apporter des améliorations. Les résultats ventilent également la taille des pages par type de contenu, la taille des pages par domaine, les demandes par type de contenu et les demandes par domaine.

GTmetrix

GTmetrix va dans le détail puisqu’il vérifie à la fois les métriques PageSpeed et YSlow, attribuant à votre site une note de F à A. Ses rapports sont divisés en cinq sections différentes, notamment PageSpeed, YSlow, ventilation en cascade, vidéo et historique.

Avec une inscription gratuite, vous pouvez tester à partir de sept emplacements différents. Ils vous laissent également choisir le navigateur, Chrome vs Firefox. Vous pouvez tester et comparer les performances du site Web par rapport à différents types de connexion (comme le câble vs l’accès commuté) pour voir comment cela affecte le chargement de vos pages. Parmi les autres fonctions avancées, citons la lecture d’une vidéo pour analyser l’endroit où se produit le goulot d’étranglement et la possibilité d’exécuter Adblock plus. En désactivant les publicités, vous pouvez voir comment elles affectent le chargement de votre site. Il est recommandé de créer un compte gratuit car vous obtiendrez des options supplémentaires, telles que celles mentionnées ci-dessus.

WebPageTest

WebPageTest est très similaire à certains des outils mentionnés précédemment, mais dispose de plus de 40 emplacements à choisir et de plus de 25 navigateurs (y compris mobiles). Il vous attribue une note de F à A en fonction de différents tests de performance tels que le FTTB, la compression, la mise en cache, l’utilisation effective d’un CDN, etc. Son rapport est divisé en six sections qui comprennent un résumé, des détails, un examen des performances, une ventilation du contenu et des captures d’écran.

Il propose également une approche unique sur le test. Il exécute ce qu’ils appellent une première vue et une vue répétée. Cela aide à diagnostiquer ce qui peut être un retard de première consultation du DNS, comme mentionné précédemment. WebPageTest dispose également de fonctionnalités plus avancées telles que la capture vidéo, la désactivation de JavaScript, l’ignorance des certificats SSL et l’usurpation des chaînes d’agent utilisateur.

Varvy PageSpeed Optimization

Varvy PageSpeed Optimization est un outil développé et maintenu par Patrick Sexton, qui a également créé GetListed.org, qui est maintenant connu sous le nom de Moz Local.

Les rapports sont divisés en 5 sections différentes, y compris un diagramme de ressources, la livraison CSS, l’utilisation JavaScript, les problèmes de vitesse de page trouvés et les services utilisés. Cet outil utilise davantage une représentation graphique de ce qui pourrait être corrigé sur votre site, comme le blocage du rendu.

Patrick fait un excellent travail en incluant également de la documentation sur la façon d’optimiser davantage votre site avec des tutoriels sur le chemin de rendu critique, l’exploitation de la mise en cache du navigateur, le report du chargement de JavaScript, et bien plus encore.

Uptrends

Uptrends est assez basique mais ils offrent plus de 35 emplacements à choisir lors de votre test de vitesse. Leur rapport est divisé en deux sections, une ventilation en cascade et des groupes de domaines. Les groupes de domaines offrent une perspective unique car ils classent les ressources en différentes sources : 1st party, statistiques, CDN, social, annonces, first party overall, et third party overall.

dotcom-monitor

dotcom-monitor offre 23 emplacements différents et sept navigateurs différents dans lesquels vous pouvez exécuter votre test de vitesse de site Web. Leur caractéristique unique est que vous pouvez exécuter tous les tests géographiques simultanément. Cela peut vous faire gagner beaucoup de temps, car avec tous les autres outils, vous devez les exécuter individuellement par emplacement. Vous pouvez ensuite cliquer dans chaque rapport individuel et ou ventilation en cascade.

Leurs rapports sont divisés en cinq sections différentes qui comprennent un résumé, la performance, le graphique en cascade (ventilation), l’hôte et les erreurs.

PageScoring

PageScoring is all about offering a simple and easy to understand performance report with a minimalist design. They show your overall load time and then the following pieces of information:

• Domain lookups
• Connection Time
• Redirection Time
• Page Size
• Download Time

You can then see your assets and how long it took for each to load. If you are looking for a quick and easy website speed test tool, this works pretty good.

Yellow Lab Tools

Yellow Lab Tools is a newer web performance and frontend quality testing tool developed by Gaël Métais. This tool gives you a lot of information and some unique features not seen in other tools such as a view of when JavaScript interactions with the DOM during the loading of the page and other code validation issues. Get a global score based on the following qualifiers.

• Page weight
• Requests
• DOM
• Bad JavaScript
• Bad CSS
• Server Config

The JavaScript timeline shows you exactly how the DOM interacts during the loading of the page.

Google Chrome DevTools

And of course we can’t forget Google Chrome DevTools. It is a very easy to use tool (with advanced features) and you can quickly launch it at anytime in your Chrome broswer using the following shortcut keys.

• Windows: F12 or also Ctrl + Shift + I
• Mac: Cmd + Opt + I

Avec la dernière mise à jour des outils de développement, ils ont ajouté un panneau de détails agrégés dans la ligne de temps de la cascade. Cela vous permet de voir plus facilement ce qui vous coûte le plus de temps, et vous pouvez ensuite le décomposer par domaines, sous-domaines, etc. Pour exécuter ceci, cliquez dans le panneau « Timeline » et appuyez sur Ctrl + RCmd + R) pour rafraîchir la page. Vous pouvez ensuite cliquer dans le panneau « Résumé » et le panneau de détails « Agrégé ».

Nous avons également un excellent post sur ce qui bloque le DOM et comment le réparer. Dans les outils du développeur, vous pouvez voir exactement le temps de DOMContentLoaded et le temps de chargement total. Pour l’exécuter, cliquez dans le panneau « Network », cliquez sur l’option « Show Overview » et appuyez sur Ctrl + RCmd + R) pour rafraîchir la page. Une ligne bleue apparaîtra pour DOMContentLoaded et une ligne rouge pour le temps de chargement total. Normalement, tout ce qui est à gauche ou qui touche la ligne bleue sont des actifs qui bloquent le DOM, ou aussi appelés ressources bloquant le rendu.

Sucuri Load Time Tester

Le Sucuri Load Time Tester offre un moyen rapide et facile de tester les performances de vos sites à travers le monde. Il vous donnera une note de performance globale, de A à F. Le test mesure le temps nécessaire à la connexion à votre site et au chargement complet d’une page. Une valeur très importante à laquelle il faut prêter attention est le « time to first byte », qui vous indique le temps nécessaire pour que le contenu soit renvoyé au navigateur afin qu’il commence à traiter la page.

Pagelocity

L’outil Pagelocity offre une autre approche unique en matière de test de vitesse de site Web. Il vous donne un score total sur 100, composé de facteurs tels que le social, le SEO, les ressources et le code. L’outil offre également la possibilité de suivre vos concurrents. Vous pouvez vous inscrire à un compte gratuit pour bénéficier des fonctionnalités supplémentaires. La vue du code est particulièrement unique car elle vous montrera si votre site fonctionne sur HTTPS, quel est votre TTFB, et une interface graphique de vos éléments DOM avec un diagramme à barres.

La vue des ressources est également assez intéressante car vous pouvez rapidement voir quels actifs constituent le poids total de votre page. Comme vous pouvez le voir dans notre test les images ont un poids supérieur à 4x celui de nos scripts externes.

YSlow

YSlow est un projet et un outil open source qui analyse les pages web et vous aide à comprendre pourquoi elles sont lentes en se basant sur les règles de Yahoo ! pour les sites web à haute performance. Il est actuellement maintenu par Marcel Duran, qui est également impliqué dans le projet WebPageTest. YSlow fonctionne en trois étapes pour obtenir ses résultats de test de performance :

1. YSlow rampe le DOM pour trouver tous les composants (image, scripts, etc.).
2. YSlow obtient des informations sur la taille de chaque composant (Gzip, en-têtes expirés, etc.)
3. YSlow prend les données et génère une note pour chaque règle, qui à son tour vous donne une note globale.

YSlow a 23 règles différentes contre lesquelles il exécute votre site Web pour le noter, comme l’utilisation d’un CDN et la réduction des consultations DNS. GTmetrix propose un outil d’analyse en ligne pour vérifier votre score YSlow. Assurez-vous de consulter notre tutoriel approfondi sur la façon d’améliorer votre score YSlow.

PerfTool

PerfTool est un projet d’outil de performance côté client open source, hébergé sur GitHub. Il recueille diverses informations sur votre site Web et les affiche de manière facile à digérer sur une page de rapports. Il combine trois sources de données en une seule, PageSpeed Insights, devperf et W3CJS. Au total, il vous donne plus de 200 indicateurs de performance différents.

Un grand avantage avec le PerfTool est que vous pouvez exécuter des tests de plusieurs pages en même temps pour le rapport Google PageSpeed Insights. Ensuite, comparez les résultats de performance du site Web des tests précédents, définissez le seuil de score et obtenez un rapport détaillé sur vos tests. This can actually save you a lot of time if you are benchmarking your entire site’s web performance, as you don’t have to test your pages one by one.

Website speed test with Chrome extensions

There are quite a few free Chrome extensions in which you can analyze website speed. Here are a couple of them. You can easily launch them from right within your browser.

• Page Load Time
• app.telemetry Page Speed Monitor
• Performance-Analyser
• LoadFocus Load Testing

Mobile website speed test

If you are needing to run a mobile website speed test a couple of the tools we mentioned above do include this:

• WebPageTest
• GTmetrix
• dotcom-monitor

Another way to simulate a speed test on a mobile device is to use Chrome developer tools in device mode. Pour entrer en mode périphérique, cliquez sur la petite icône de téléphone dans Chrome DevTools ou vous pouvez appuyer sur Ctrl + Shift + MCmd + Shift + M). Vous pouvez alors choisir l’appareil que vous souhaitez émuler, l’orientation et même la résolution. Vous pouvez également modifier l’étranglement du réseau pour voir comment votre site Web rendrait réellement sur disons une connexion 2G ou 4G ordinaire.

Vous pouvez ensuite utiliser l’onglet « Réseau » et la décomposition en cascade pour effectuer des tests de vitesse.

Summary

Comme vous pouvez le voir, il existe un certain nombre d’outils de test de vitesse de site Web parmi lesquels vous pouvez choisir. Chacun d’entre eux a ses propres caractéristiques uniques, comme souligné ci-dessus. C’est une bonne idée de tester régulièrement votre site et d’établir un repère afin qu’au fil du temps vous puissiez apporter des améliorations.

Une fois que vous savez où sont les goulots d’étranglement, vous pouvez commencer à les corriger. Presque tous les outils ci-dessus énumèrent des recommandations. Some of the most common fixes include:

• Compressing your images and files
• Picking a fast web host
• Optimizing your code and scripts
• Using a content delivery network
• Caching
• Reducing the number of HTTP requests