La vitesse d’un site Web peut être un facteur important de son succès. Les sites Web qui chargent plus rapidement peuvent tirer parti d’un classement SEO plus élevé. Mais aussi de taux de conversion plus élevés, de taux de rebond plus faibles, d’une durée de visite allongée, d’une meilleure expérience utilisateur et d’un engagement accru.C’est pourquoi il est important de tirer parti des nombreux outils de test de vitesse d’un site Web.
Beaucoup sont gratuits et vous aideront à obtenir de meilleures performances.
Google souhaite que votre site soit chargé en moins d’une seconde
Que peut-on analyser grâce à un test de performances ?
Voici quelques exemples d’utilisation courante des outils de test de vitesse d’un site Web :
- Localiser les scripts, les polices et les plug-ins à l’origine de problèmes de temps de chargement (HTML, JavaScript, CSS)
- Vérifier la minification de vos scripts
- Rechercher des images de taille importante entraînant des ralentissements
- Déterminer si vous avez du code JavaScript ou CSS ralentissant l’affichage du contenu
- Tester le délai jusqu’à réception du premier octet entre vous (client) et le serveur (TTFB)
- Analyser les temps de chargement finaux, la taille des page et le nombre de requêtes effectuées
- Vérifier les performances en fonction de l’emplacements géographique du visiteur
- Vérifier la vitesse de rendu sous différents navigateurs
- Analyser les en-têtes HTTP
- Mesurer les performances de votre réseau de diffusion de contenu (CDN)
- Vérifier que les assets se chargent correctement depuis votre CDN
Concept de vitesse d’un site Web
Avant d’exécuter un test de vitesse d’un site Web, il est important de comprendre quelques concepts expliquant le fonctionnement de ces outils afin de pouvoir mieux analyser les données, puis optimiser votre site en conséquence. Vous pouvez non seulement tester la vitesse de votre hébergeur Web, mais également mesurer vos performances CDN (si vous en posséder un).
Time To First Byte (TTFB)
Le temps jusqu’au premier octet (TTFB) est la mesure de la réactivité d’un serveur Web. Concrètement, c’est le temps qu’il faut à votre navigateur pour commencer à recevoir des informations après l’avoir demandé 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 permettre de réduire votre TTFB.
Blocage du rendu
Le blocage du rendu fait référence à JavaScript et aux CSS qui ralentissent l’affichage d’une page web.
JavaScript
Google recommande de supprimer ou de différer le chargement du Javascript qui gêne le chargement du contenu au dessus de la ligne de flottaison de vos pages Web.
Exemple de “report” de Javascript en le plaçant juste avant votre balise </ body>.
fonction downloadJSAtOnload () {var element = document.createElement ("script");element.src = "defer.js";document.body.appendChild (élément);}if (window.addEventListener)window.addEventListener ("load", downloadJSAtOnload, false);sinon si (window.attachEvent)window.attachEvent ("onload", downloadJSAtOnload);else window.onload = downloadJSAtOnload;
CSS
Vous voudrez alors également optimiser votre diffusion du code CSS pour l’empêcher de retarder le chargement de la page. Voici quelques façons de résoudre ce problème :
- Nommez correctement vos fichiers CSS
- Réduisez la quantité de fichiers CSS (les combiner)
- Utilisez moins de CSS en général
CSS est une ressource qui bloque le rendu, transmettez-là au client le plus tôt et le plus rapidement possible pour optimiser le temps de rendu!
Minification des ressources
La minification des ressources signifie la suppression des caractères inutiles de votre code HTML, JavaScript et CSS qui ne doivent pas être chargés, tels que :
- Caractères vides (espaces)
- Caractères de saut de lignes
- Commentaires
- Délimiteurs de bloc
Cela accélère vos temps de chargement car cela réduit la quantité de code à recevoir entre vous et serveur.
Vous pouvez utiliser un outil tel que celui de Dan : JavaScript Minify pour supprimer tous les caractères inutiles. Ou si vous utilisez WordPress, vous pouvez utiliser un plugin comme Autoptimize qui minimisera tout votre code HTML, JavaScript et CSS.
Requêtes HTTP
Lorsque votre navigateur récupère les données d’un serveur, il le fait à l’aide de HTTP (Hypertext Transfer Protocol). C’est une demande / réponse entre un client et un hôte. En général, plus le nombre de requêtes HTTP demandées par votre page Web est élevé, plus cela ralentit son chargement.
Vous pouvez réduire le nombre de requêtes de plusieurs manières, par exemple :
- Combiner vos fichiers CSS et JavaScript
- Mettre votre JavaScript sur une seule ligne (seulement s’il est très petit)
- Utiliser des sprites CSS
- Réduire les assets tels que les plugins tiers qui effectuent un grand nombre de demandes externes
Liste des outils de test de vitesse d’un site Web
Maintenant que vous avez compris les concepts de performances décrits ci-dessus, aidez-vous de ces 10 outils gratuits pour tester la vitesse de votre site Web. Chacun d’entre eux offre ses propres fonctionnalités, rapports et différentes manières de disséquer les résultats.
Remarque : Lors de l’exécution d’outils tels que ceux-ci, il est également important de réaliser 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 des tests plusieurs fois et de prendre une moyenne des résultats.
1. KeyCDN Website Speed Test
KeyCDN a créé un outil de test de vitesse rapide et léger que vous pouvez utiliser pour obtenir des informations détaillées sur les performances de votre site Web. Il propose 14 emplacements géographiques parmi lesquels choisir, et vous avez la possibilité de rendre vos résultats de test privés ou publics. Vous pouvez rapidement voir le nombre de requêtes HTTP effectuées, la taille complète de la page demandée et le temps de chargement.
C’est également l’un des seuls outils, en plus de PageSpeed, à être responsive et fonctionne parfaitement sur les appareils mobiles.
2. Google PageSpeed Insights
Google PageSpeed Insights est un outil de test de vitesse qui évalue votre site Web sur une échelle de 1 à 100. Plus le nombre est élevé, plus votre site est optimisé. Tout ce qui dépasse 85 indique que votre site Web fonctionne rapidement. PageSpeed vous fournit des rapports pour les versions bureau et mobile de votre site. Vous pouvez afficher des recommandations d’améliorations, telles que la nécessité de réduire le CSS ou d’optimiser vos images.
PageSpeed Insights mesure comment la page peut améliorer ses performances dans les domaines suivants :
- Temps de chargement au-dessus de la ligne de flottaison : Temps écoulé à partir du moment où l’utilisateur demande une nouvelle page et jusqu’au moment où le contenu au-dessus de la ligne de flottaison est rendu par le navigateur.
- Temps jusqu’au chargement complet de la page : Temps écoulé depuis le moment où l’utilisateur demande une nouvelle page jusqu’au 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 l’évaluation de votre site. Cela inclut la vérification de la configuration de votre fenêtre, la taille de vos cibles tactiles (boutons et liens) et les tailles de police éligibles.
L’équipe de PageSpeed Insights a également récemment lancé un nouvel outil de test de vitesse de site Web sur « Pensez avec Google » que vous voudrez peut-être consulter. Une fonctionnalité pratique ? Les beaux rapports qu’il génère qui peuvent êtres facilement envoyés à vos clients.
3. Test de vitesse Pingdom
Pingdom est probablement l’un des outils de test de vitesse les plus connus. Leurs rapports sont divisés en quatre sections différentes qui incluent un graphique en cascade, un niveau de performance, une analyse de page et un historique.
L’analyse de page offre une excellente vue d’ensemble avec des informations supplémentaires telles qu’une analyse de taille, taille par domaine (vous pouvez facilement comparer la taille de vos assets CDN à votre domaine), le nombre de demandes par domaine et le type de contenu ayant généré le plus grand nombre de demandes.
L’outil de test de vitesse de Pingdom vous permet également de tester la vitesse de votre site Web à partir de quatre emplacements principaux, à savoir :
- Dallas, Texas, États-Unis
- Melbourne, Australie
- San Jose, Californie, États-Unis
- Stockholm, Suède
Les résultats d’un test de vitesse Pingdom vous fournissent des informations sur les performances, similaires à Google PagesSpeed Insights, qui indiquent où vous pouvez apporter des améliorations. Les résultats décomposent également la taille de la page par type de contenu, la taille de la page par domaine, les demandes par type de contenu et les demandes par domaine.
4. GTmetrix
GTmetrix rentre dans les détails en vérifiant 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, graphique en cascade, la vidéo et l’historique.
Avec une inscription gratuite, vous pouvez tester à partir de sept endroits différents. Ils vous permettent également de choisir le navigateur, Chrome vs Firefox. Vous pouvez tester et comparer les performances d’un site Web par rapport à différents types de connexion (tels que le câble et l’ADSL) pour voir comment cela affecte le chargement de vos pages. Parmi les autres fonctionnalités avancées, citons une lecture vidéo pour analyser la localisation de votre réduction de performances et la possibilité d’exécuter Adblock plus. Lorsque les annonces sont désactivées, vous pouvez voir leur impact sur le chargement de votre site.
Remarque : Il est recommandé de créer un compte gratuit car vous obtiendrez des options supplémentaires, telles que celles mentionnées ci-dessus.
5. WebPageTest
WebPageTest est très similaire à certains des outils précédents mentionnés mais a plus de 40 emplacements parmi lesquels choisir et plus de 25 navigateurs (y compris mobile). Il vous attribue une note de F à A en fonction de différents tests de performance tels que FTTB, compression, mise en cache, utilisation efficace d’un CDN, etc… Ce rapport est divisé en six sections comprenant un résumé, des détails, une évaluation des performances, un graphique en cascade, et des captures d’écran.
Il offre é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 que peut être un délai de premier affichage, comme mentionné précédemment. WebPageTest a également des fonctionnalités plus avancées telles que la capture vidéo, la désactivation de JavaScript, l’ignorance des certificats SSL et l’usurpation de chaînes d’agent d’utilisateur.
6. Varvy Pagespeed Optimization
Varvy Pagespeed Optimization est un outil développé et mis à jour 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, notamment un diagramme de ressources, la livraison CSS, l’utilisation de Javascript, les problèmes de vitesse de page détectés et les services utilisés. Cet outil utilise davantage une représentation graphique de ce qui pourrait être corrigé sur votre site, tel que 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, en exploitant la mise en cache du navigateur, en différant le chargement de javascript, etc…
7. Uptrends
Uptrends est assez basique mais offre plus de 35 emplacements parmi lesquels choisir lors de votre test de vitesse. Leur rapport est divisé en deux sections, un graphique en cascade et des groupes de domaines. Les groupes de domaines offrent un aperçu unique en catégorisant les ressources selon leur provenance : 1ère partie, statistiques, CDN, réseaux sociaux, annonces, ensemble global et tiers.
8. dotcom-monitor
dotcom-monitor propose 23 emplacements différents et sept navigateurs différents dans lesquels vous pouvez exécuter le test de vitesse de votre site Web. Sa 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 tous les autres outils dont vous disposez doivent être exécutés individuellement pour chaque emplacement. Vous pouvez ensuite cliquer sur chaque rapport individuel et / ou graphique en casacade.
Leurs rapports sont divisés en cinq sections différentes qui comprennent un résumé, les performances, un graphique en cascade, les hôtes et les erreurs.
9. PageScoring
PageScoring consiste à offrir un rapport de performance simple et facile à comprendre avec un design minimaliste. Il indique votre temps de chargement global et les informations suivantes :
- Recherches de domaine
- Temps de connexion
- Temps de redirection
- Taille de la page
- Temps de téléchargement
Vous pouvez alors voir vos assets et combien de temps il a fallu pour que chacun se charge. Si vous recherchez un outil de test de vitesse de site rapide et facile, cela fonctionne très bien.
10. Yellow Lab Tools
Yellow Lab Tools est un nouvel outil de test de performances front-end développé par Gaël Métais. Cet outil vous fournit de nombreuses informations et certaines fonctionnalités uniques qui ne sont pas visibles dans d’autres outils, telles que l’affichage des interactions entre JavaScript et le DOM lors du chargement de la page et d’autres problèmes liés à la validation du code. Obtenez un score global basé sur les qualificatifs suivants.
- Poids de la page
- Demandes
- DOM
- Mauvais JavaScript
- Mauvais CSS
- Configuration du serveur
La chronologie JavaScript vous montre exactement comment le DOM interagit pendant le chargement de la page.
Résumé
Comme vous pouvez le constater, vous avez le choix entre plusieurs outils de test de vitesse. Chacun d’entre eux possède ses propres caractéristiques uniques, comme indiqué ci-dessus. C’est une bonne idée de tester régulièrement votre site et d’établir un point de repère afin de pouvoir apporter des améliorations au fil du temps.
Une fois que vous savez où se trouvent les limitations, vous pouvez commencer à les réparer. Presque tous les outils ci-dessus énumèrent des recommandations.
Parmi les correctifs les plus courants, citons :
- Compresser vos images et vos fichiers
- Choisir un hébergeur rapide
- Optimiser votre code et vos scripts
- Utilisation d’un réseau de diffusion de contenu (CDN)
- Caching (mise en cache)
- Réduire le nombre de requêtes HTTP
