Divers

analyse performance site web gratuit

https://gtmetrix.com/
https://tools.pingdom.com/
https://www.webpagetest.org/
https://www.dareboost.com/fr
https://www.uptrends.com/tools/website-speed-test
https://www.ionos.com/tools/website-checker
https://www.dotcom-tools.com/website-speed-test.aspx

La vitesse d’un site Web peut être un facteur critique de son succès. Comme indiqué dans notre Guide du réseau de distribution de contenu , les sites Web à chargement plus rapide peuvent bénéficier d’un classement SEO plus élevé, de taux de conversion plus élevés, de taux de rebond plus faibles, d’une durée de visite plus longue sur le site, 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 de site Web gratuits  disponibles pour vous permettre d’atteindre des performances optimales **.

Google souhaite que votre site soit chargé en moins d’une seconde

Qu’est-ce qu’un test de vitesse de site Web peut vous aider à analyser?#

Voici quelques exemples d’utilisation courante des outils de test de vitesse des sites Web:

  • Localisation de scripts, de polices et de plug-ins posant des problèmes de temps de chargement (HTML, Javascript, CSS)
  • Vérification de la minification de vos scripts
  • Recherche de grandes images entraînant des goulots d’étranglement
  • Déterminer si vous avez du code JavaScript ou CSS bloquant le rendu
  • Temps de test jusqu’au premier octet (TTFB)
  • Analyse des temps de chargement totaux, des tailles de page et du nombre de demandes
  • Vérification des performances de différents emplacements géographiques
  • Vérification de la vitesse de rendu dans différents navigateurs
  • Analyse des en-têtes HTTP
  • Mesurer les performances de votre réseau de diffusion de contenu
  • Vérifier que les actifs se chargent correctement depuis votre CDN

Concepts de vitesse sur le site Web#

concepts de test de vitesse

Avant d’exécuter un test de vitesse de 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ôte Web, mais également mesurer vos performances CDN .

Time To First Byte (TTFB)#

Le temps jusqu’au premier octet (TTFB) est la mesure de la réactivité d’un serveur Web . Fondamentalement, 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.

En savoir plus sur le temps jusqu’au premier octet  et le temps jusqu’au dernier octet.

Blocs de rendu Javascript et CSS#

Le blocage du rendu fait référence à Javascript et aux CSS qui empêchent le chargement de votre page aussi rapidement que possible.

Javascript#

Google recommande de supprimer ou de différer le javascript qui gêne le chargement du contenu du pli ci-dessus de vos pages Web. Voici un excellent tutoriel sur la manière de différer correctement le chargement de javascript .

Exemple de report de javascript en le plaçant juste avant votre  </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#

Vous voudrez alors également optimiser votre diffusion CSS pour l’empêcher de retarder le chargement de la page. Voici quelques façons de résoudre ce problème:

  1. Appelez correctement vos fichiers CSS
  2. Réduisez la quantité de fichiers CSS
  3. Utiliser moins de CSS en général

Voici un excellent article sur les CSS bloquant le rendu de Ilya Grigorik, ingénieur en performance Web chez Google.

CSS est une ressource qui bloque le rendu, transmettez-le au client dès que possible 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 d’espaces blancs
  • Nouveaux caractères de ligne
  • commentaires
  • Délimiteurs de bloc

Cela accélère vos temps de chargement car cela réduit la quantité de code à demander au serveur. Vous pouvez utiliser un outil comme Dan’s CSS et 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 HTML, Javascript et CSS pour vous.

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 ralentit son chargement .

Vous pouvez réduire le nombre de demandes de plusieurs manières, par exemple:

  • Combiner vos fichiers CSS et Javascript
  • Inline your Javascript (seulement s’il est très petit)
  • Utiliser des sprites CSS
  • Réduction des actifs tels que les plugins tiers qui effectuent un grand nombre de demandes externes

Liste des outils de test de vitesse de site Web#

Maintenant que vous avez compris les concepts de performance Web décrits 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, rapports et différentes manières de disséquer vos 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. Test de vitesse du site Web KeyCDN#

test de vitesse du site web keycdn

KeyCDN a créé 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 le fonctionnement de votre site Web. Si propose 14 emplacements parmi lesquels choisir dans le monde entier, et vous avez la possibilité de rendre vos résultats de test privés ou publics. Le test comprend une défaillance de la cascade et un aperçu visuel du site Web en bas. 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 réactif et fonctionne parfaitement sur les appareils mobiles.

test de vitesse du site web keycdn

2. Google PageSpeed ​​Insights#

google pagespeed insights

Google PageSpeed ​​Insights  est un outil de test de vitesse de site Web 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 bien. PageSpeed ​​vous fournit des rapports pour les versions de 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 écoulé au-dessus du pli: Temps écoulé à partir du moment où l’utilisateur demande une nouvelle page et jusqu’au moment où le contenu au-dessus du pli est restitué 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 inclut 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 la fenêtre, la taille de vos cibles tactiles (boutons et liens) et les tailles de police admissibles.

google pagespeed

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 belle fonctionnalité est les beaux rapports qu’il génère. Peut être idéal pour envoyer aux clients.

3. Test de vitesse Pingdom#

test de vitesse pingdom

Pingdom est probablement l’un des outils de test de vitesse de sites Web les plus connus. Leurs rapports sont divisés en quatre sections différentes qui incluent une ventilation 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 actifs 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.

test de pingdom

4. GTmetrix#

test de vitesse gtmetrix

GTmetrix donne  beaucoup de 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: PageSpeed, YSlow, la ventilation 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’accès commuté) pour voir comment cela affecte le chargement de vos pages. Parmi les autres fonctionnalités avancées, citons une lecture vidéo pour analyser l’emplacement de votre goulot d’étranglement 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 gratuitement, car vous obtiendrez des options supplémentaires, telles que celles mentionnées ci-dessus.

score gtmetrix

5. WebPageTest#

webpagetest

WebPageTest  est très similaire à certains des outils mentionnés précédemment, mais propose plus de 40 emplacements 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, une ventilation du contenu, 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 première recherche DNS, comme mentionné précédemment. WebPageTest comporte é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 de l’agent d’utilisateur.

rapport webpagetest

6. Optimisation Varpy Pagespeed#

optimisation de la vitesse des pages

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.

test de vitesse de page variable

7. Tendance à la hausse#

uptrends test de vitesse

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, une ventilation en cascade et des groupes de domaines. Les groupes de domaines offrent une perspective unique en catégorisant les ressources en différentes sources : 1ère partie, statistiques, CDN, réseaux sociaux, annonces, ensemble global et tiers.

test des tendances haussières

8. point-moniteur#

test de vitesse du moniteur dotcom

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. 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 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 ventilation en cascade.

Leurs rapports sont divisés en cinq sections différentes qui comprennent un résumé, des performances, un graphique en cascade (ventilation), un hôte et des erreurs.

moniteur dotcom

9. PageScoring#

pagescoring

PageScoring consiste à offrir un rapport de performance simple et facile à comprendre avec un design minimaliste . Ils indiquent votre temps de chargement global, puis 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 actifs et combien de temps il a fallu à chacun pour se charger. Si vous recherchez un outil de test de vitesse de site Web rapide et facile, cela fonctionne très bien.

test de notation

10. Outils de laboratoire jaunes#

test de vitesse des outils de laboratoire jaune

Yellow Lab Tools est un nouvel outil de test de la performance Web et de la performance Web 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 qu’une vue 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.

timeline javascript des outils de laboratoire jaune

11. Outils de développement Google Chrome#

google chrome devtools

Et bien sûr, nous ne pouvons pas oublier Google Chrome DevTools . C’est un outil très facile à utiliser (avec des fonctionnalités avancées) et vous pouvez le lancer rapidement à tout moment dans votre navigateur Chrome à l’aide des touches de raccourci suivantes.

  • Windows: F12 ou aussiCtrl + 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 à la timeline de la cascade. Cela vous permet de voir plus facilement ce qui vous coûte le plus de temps, et vous pouvez ensuite le ventiler par domaines, sous-domaines, etc. Pour l’exécuter, cliquez dans le panneau “Chronologie” et appuyez sur Ctrl + RCmd + R) pour actualiser la page. Vous pouvez ensuite cliquer sur les panneaux “Résumé” et “Détails agrégés”.

chronologie de devtools chrome

Nous avons également un excellent article sur ce qui bloque le DOM et comment le corriger. Dans les outils de développement, vous pouvez voir exactement la durée de DOMContentLoaded et le temps de chargement total. Pour l’exécuter, cliquez sur le panneau «Réseau», cliquez sur l’option «Afficher la vue d’ensemble» et appuyez sur Ctrl + RCmd + R) pour actualiser la page. Une ligne bleue apparaît pour DOMContentLoaded et une ligne rouge indique le temps de chargement total. Normalement, tout ce qui reste ou touche la ligne bleue est un actif bloquant le DOM ou également appelé ressources de blocage du rendu.

google chrome devtools

12. Testeur de temps de chargement Sucuri#

sites de test sucuri vitesse

Le testeur de temps de charge Sucuri  offre un moyen rapide et facile de tester les performances de vos sites du monde entier. Il vous donnera une note globale de performances allant de A à F. Le test mesure le temps nécessaire pour se connecter à votre site et le chargement complet d’une page. Une valeur très importante à prendre en compte est le «délai jusqu’au premier octet» , qui indique le temps nécessaire au contenu pour être renvoyé au navigateur afin que le traitement de la page commence.

testeur de temps de charge sucuri

13. Pagelocity#

pagélocité

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

test de vitesse https ttfb

La vue des ressources est également très intéressante car vous pouvez rapidement voir quels éléments constituent l’épaisseur totale de votre page. Comme vous pouvez le constater dans nos images de test, il y a plus de 4 fois plus d’images que celles de nos scripts externes.

ressources de test de vitesse

14. YSlow#

test de vitesse du site Web yslow

YSlow est un projet et un outil open source qui analyse les pages Web et vous aide à comprendre pourquoi elles sont lentes, sur la base des règles de Yahoo! pour les sites Web à hautes performances. Il est actuellement maintenu par Marcel Duran, qui participe également au projet WebPageTest. YSlow fonctionne en trois étapes pour obtenir ses résultats de test de performance:

  1. YSlow explore le DOM pour trouver tous les composants (image, scripts, etc.).
  2. YSlow obtient des informations sur chaque taille de composant (Gzip, en-têtes d’expiration, 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 utilise 23 règles différentes pour gérer votre site Web, comme le montre l’exemple ci-dessous. Vous pouvez utiliser l’ extension chrome gratuite YSlow ou obtenir les résultats YSlow auprès de GTMetrix. Assurez-vous de consulter notre didacticiel détaillé sur la manière d’améliorer votre score YSlow .

yslow score résultats des tests

15. PerfTool#

perftool

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

L’un des principaux avantages de l’outil PerfTool réside dans le fait que vous pouvez exécuter plusieurs tests de pages simultanément pour le rapport Google PageSpeed ​​Insights. Ensuite, comparez les résultats des performances des sites Web des tests précédents, définissez un seuil de score et obtenez un rapport détaillé sur vos tests. Cela peut vous faire économiser beaucoup de temps si vous comparez les performances Web de l’ensemble de votre site, car vous n’avez pas à tester vos pages une à une.

test de vitesse de performance web perftool

Test de vitesse de site Web avec les extensions Chrome#

Il existe de nombreuses extensions Chrome gratuites dans lesquelles vous pouvez analyser la vitesse d’un site Web. En voici quelques uns. Vous pouvez facilement les lancer directement depuis votre navigateur.

extension de chrome de temps de chargement de page

Test de vitesse de site Web mobile#

Si vous avez besoin d’exécuter un test de vitesse de site Web mobile, quelques-uns des outils mentionnés ci-dessus incluent notamment:

  • WebPageTest
  • GTMetrix
  • moniteur de point

Un autre moyen de simuler un test de vitesse sur un appareil mobile consiste à utiliser les outils de développement de Chrome  en mode Appareil . Pour passer en mode Appareil, cliquez sur la petite icône de téléphone dans Chrome DevTools ou appuyez sur Ctrl + Shift + MCmd + Shift + M). Vous pouvez ensuite choisir le périphérique que vous souhaitez émuler, l’orientation et même la résolution. Vous pouvez également modifier la limitation du réseau pour voir comment votre site Web générerait une connexion 2G ou 4G normale.

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

test de vitesse de site Web mobile

Résumé#

Comme vous pouvez le constater, vous avez le choix entre plusieurs outils de test de vitesse de site Web. 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 goulots d’étranglement, 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
  • Caching
  • Réduire le nombre de requêtes HTTP
  • MOTS CLÉS
Omar TIRICHINE
Les derniers articles par Omar TIRICHINE (tout voir)
Omar TIRICHINE
Omar TIRICHINE est un amateur du E-commerce et du marketing digital

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *