Analyser les performances de vitesse de votre site web vous intéresse ?
Découvrez le guide complet d’utilisation 2021 de GTmetrix, le meilleur outil gratuit SEO pour tester, analyser, et optimiser les performances de votre site en terme de vitesse d’affichage.

Sommaire

La vitesse d'affichage d'un site web

Vitesse d'affichage site web

Pourquoi la vitesse d'affichage d'un site web est importante ?

La vitesse d’affichage des pages de votre site (vitrine ou e-commerce) est cruciale pour l’internaute, mais aussi pour vous, propriétaire de site internet.

En effet, de nos jours, l’internaute ne veut plus attendre plus de 3 secondes pour voir s’afficher votre page web, sinon votre taux de rebond risque d’être élevé et votre taux de conversion très faible.

De surcroît, le moteur de recherche Google a indiqué que les résultats de ses métriques Core Web Vitals, mesurant la performance web et l’expérience utilisateur (UX), seront pris en compte dans son algorithme de classement à partir de mai 2021.

C’est pourquoi en 2021, le SXO sera au cœur de votre stratégie digitale. 

Comment améliorer la vitesse de chargement d'un site web ?

Pour disposer d’un site WordPress ou autre CMS (Content Management System) rapide et avoir une chance de réussir votre stratégie digitale, il faudra en amont :

  • Choisir un hébergement mutualisé équipé de disques durs SSD NVMe, tel o2switch.fr.
  • Choisir, pour les gros sites e-commerce (WooCommerce par exemple), un serveur dédié, un VPS (Serveur Privé Virtuel) voire un serveur Cloud plutôt qu’un serveur mutualisé moins performant de par sa nature. 
  • Si votre clientèle est 100 % française, choisissez un hébergeur ayant ses datacenters basés en France.
    À défaut, prenez l’option d’un CDN (Content Delivery Network).
  • Installer la dernière version du CMS WordPress ou du CMS Prestashop.
  • Installer la dernière version de PHP (Hypertext Preprocessor).
  • Utiliser un thème WordPress (ou Prestashop, Shopify, …) optimisé pour la rapidité et nativement responsive.
  • Compresser et optimiser votre fichier images (poids des images<100 Ko) en utilisant, par exemple, TinyJPG.
  • Ne plus utiliser la technologie Flash et adopter le langage HTML5 (HyperText Markup Language 5).
  • Limiter, autant que possible, le nombre de plugins, extensions ou Addons.
  • Activer la compression Gzip.
  • Activer le Lazy Load (natif depuis WordPress 5.5)
  • Activer la mise en cache du navigateur via un plugin WordPress tel que WP Fastest Cache ou WP Rocket.
  • Activer la minification et la concaténation du code HTML, CSS et JS via le plugin WordPress Autoptimize.
  • Nettoyer la base de données (révisions d’articles, commentaires indésirables stockés, …).

Une fois ces choses faites, il faudra, en aval :

  • Mesurer la vitesse d’affichage de vos pages Web.
  • Identifier les problèmes qui ralentissent l’affichage.
  • Résoudre ses problèmes.

Comment tester la vitesse de chargement d'un site web ?

Pour tester la vitesse de chargement d’une page web, il existe plusieurs outils SEO tels que Pingdom, webpagetest, PageSpeed Insights, Test My Site, Dareboost et GTmetrix. Sans oublier la Search Console

Le plus populaire d’entre eux est sans nul doute GTmetrix.

Les raisons de sa popularité sont multiples :

  • UX (expérience utilisateur) parfait.
  • Simplicité d’utilisation.
  • Rapidité d’analyse.
  • Résultats d’analyses très détaillées.
  • Conseils d’optimisations.
  • Guides des ressources très détaillés (ceux-ci sont en anglais : traduisez-les automatiquement).

Personnellement, en tant que consultant en référencement naturel, c’est celui que j’utilise quotidiennement pour faire mes audits SEO.

Qu'est-ce que GTmetrix ?

Outil SEO GTmetrix
Outil SEO GTmetrix

GTmetrix est un logiciel SEO freemium, en Saas, qui a été développé, en 2009, par Carbon60, une société informatique, basée au Canada, spécialisée dans le Cloud. 

Il permet d’évaluer les performances de vos pages web, en terme de vitesse, et surtout vous indique, dans ses rapports détaillés, ou se situent les problèmes pour pouvoir, ultérieurement, les corriger.

En vous créant un compte gratuit sur GTmetrix, vous pourrez :

  • Tester 50 pages web par semaine.
  • Tester vos URLs uniquement sur la version ordinateur.
  • Choisir l’emplacement du serveur de test : 7 possibilités (le plus près de la France étant Londres).
  • Réaliser les tests avec différentes vitesses de connexions (du 56 Ko au très haut débit).
  • Empêcher le chargement de vos annonces publicitaires, via le plugin Adblock Plus, pour évaluer l’impact de ces dernières sur le chargement de vos pages. 
  • Surveiller quotidiennement les performances d’1 page web (Monitoring).
  • Configurer des alertes pour 1 URL par e-mail (quotidienne, hebdomadaire, mensuelle).
  • Avoir des sauvegardes de vos rapports de tests pendant 3 mois.
  • Créer une vidéo pour observer comment vos pages web se chargent et identifier les éventuels problèmes.
  • Télécharger la vidéo du chargement de votre page au format MP4.
  • Comparer 4 rapports de tests.
  • Télécharger une version PDF du rapport de test GTmetrix.
  • Télécharger l’historique des rapports de test GTmetrix au format CSV.
  • Bénéficier de 10 crédits API quotidiens.

En version payante (compte GTmetrix PRO), vous obtiendrez encore plus de fonctionnalités d’analyse, plus d’URLs surveillées et plus de possibilités de tests.
Les tarifs vont de 10$ à 425 $/mois et vous permettront au minimum de :

  • Tester 125 pages web par semaine.
  • Tester les URLs sur ordinateur, mais aussi sur les appareils mobiles.
  • Choisir l’emplacement du serveur de test : 22 possibilités dont 1 situé à Paris.
  • Réaliser les tests avec différentes vitesses de connexions sur desktop et sur appareils mobiles.
  • Surveiller quotidiennement les performances de 3 pages du site internet.
  • Configurer des alertes pour 3 URLs par e-mail (quotidienne, hebdomadaire, mensuelle).
  • Bénéficier de sauvegardes de vos rapports de tests pendant 6 mois.
  • Disposer de 25 crédits API quotidiens.
Grille tarifaire GTmetrix PRO
Grille tarifaire de GTmetrix PRO

Comment effectuer un test de vitesse d'un site web avec GTmetrix ?

Pour effectuer un test de vitesse d’un site web avec  GTmetrix, cela est vraiment simple.
Il suffit, avec un compte gratuit, de :

  • Renseigner l’URL de la page web que vous voulez tester.
  • Cliquer sur le bouton Options d’analyse.
  • Choisir, si vos utilisateurs cibles sont 100% français, l’emplacement du serveur de test Londres, Royaume-Uni.
  • Cliquer sur le navigateur Chrome (version ordinateur) mis par défaut et sans aucune autre possibilité en version gratuite.
  • Choisir une vitesse de connexion représentative de celle utilisée par les internautes.
    La version par défaut est Unthrottled correspond au très haut débit.
    Préférez-en une plus réaliste : Haut débit rapide ou Haut débit.  
  • Cliquer sur ON pour créer une vidéo.
  • Cliquer sur ON sur Adblock Plus si votre page comporte des annonces publicitaires. Sinon laissez sur OFF.
  • Cliquer, enfin, sur Analyser pour que GTmetrix scanne votre page. 

Le rapport de l’analyse de votre page s’affichera après une trentaine de secondes.

Attention, GTmetrix n’analyse pas un site web complet, mais bien qu’une URL à la fois. 

Paramétrage GTmetrix
Options analyse - GTmetrix

À noter que GTmetrix propose aussi des options d’analyses avancées, telles que :

  • Authentification HTTP.
  • Cookies.
  • Bloquer l’URL.
  • Autoriser uniquement la fonctionnalité d’URL.
Options avancées d'analyses - GTMetrix
Options avancées d'analyse - GTmetrix
Conseil
Conseil

Pour éviter de remettre à chaque nouveau test d’URL vos options d’analyse, pensez à enregistrer vos paramètres, via le bouton paramètres de la page.

Paramètres de la page - GTmetrix

Comment lire le rapport des analyses de site web de GTmetrix ?

Les rapports d’analyse de site web de GTMetrix se décomposent en 3 parties :

  1. Résumé des informations du rapport de performance.
  2. Les résultats d’analyse avec les métriques GTmetrix Grade et Web Vitals.
  3. Le détail des résultats et les préconisations GTmetrix.

1. Résumé des informations du rapport de performance

GTmetrix vous résume, succinctement, les principales informations concernant le rapport de performance de votre page web :

  • L’URL analysée (https://bernard-sperandio.fr).
  • La capture écran de la page analysée (screenshot).
  • La date et heure de la génération du rapport (jeudi 3 décembre 2020 à 17h06).
  • L’emplacement du serveur de test (Londres, Royaume-Uni).
  • Le navigateur utilisé (Chrome), le type (ordinateur) et sa version (86.0.4240.193). 
  • L’outil utilisé (Lighthouse) et sa version (6.3.0).
  • La connexion choisie pour le test (Haut débit (5/1 Mbps, 30 ms).
  • Les options d’analyse (Vidéo).
Résumé des informations du test réalisé par GTmetrix.
Résumé des informations du rapport de performance réalisé par GTmetrix.

2. Résultats d'analyse avec les métriques GTmetrix Grade et Web Vitals

Les résultats d’analyse par GTMetrix de votre page web, composés de 6 métriques, se divisent en deux parties :

  1. les GTmetrix Grade.
  2. Les Web Vitals.
Nouvelles métriques de résultats - GTmetrix
Nouvelles métriques de résultats - GTmetrix

Ces métriques remplacent depuis novembre 2020 :

  • Les célèbres scores de performance : PageSpeed Score et YSlow Score.
  • Les détails de page : temps d’affichage, poids de la page et nombre de requêtes HTTP.

Les détails de page avaient l’avantage d’être très simple à comprendre : plus le nombre de ces valeurs était faible, plus la page était légère et plus l’affichage s’effectuait rapidement.

Anciennes métriques de résultats - GTmetrix
Anciennes métriques de résultats - GTmetrix

Selon un article de blog sur le site de l’éditeur, ses scores de performance (PageSpeed Score et YSlow Score) évaluaient plus la construction de la page web pour la vitesse, que la vitesse de chargement réelle proprement dite.

Ce qui avait pour conséquence de fournir, quelquefois, à des résultats erronés.

C’est la raison pour laquelle, depuis novembre 2020, GTmetrix a choisi de prendre, comme référence, les données et métriques de Lighthouse de Google pour afficher ses résultats, selon son propre système de notation.

Qu'est-ce que Google Lighthouse ?

Google Lighthouse

Google Lighthouse est l’outil SEO open-source mis à disposition gratuitement par le moteur de recherche Google pour améliorer vos pages web en terme de vitesse et d’expérience utilisateur.

Il va analyser votre page web et vous fournir, en utilisant des données de laboratoire, un rapport détaillé divisé en 5 catégories :

  1. La performance : vérifie son temps de chargement et son interactivité avec vos utilisateurs.
  2. L’accessibilité : vérifie qu’elle soit lisible par le plus grand nombre possible d’internautes (couleurs, contraste, taille de typographie, …).
  3. Les meilleures pratiques : vérifie l’intégrité de son code (failles et vulnérabilités de sécurité, …).
  4. Le SEO : évalue son degré d’optimisation d’un point de vue SEO (Search Engine Optimization), afin qu’elle soit facilement identifiable par les moteurs de recherche.
  5. L’application Web Progressive (PWA) : vérifie que votre application fonctionne correctement même hors connexion.
À noter que l’outil de test de vitesse de site web Google PageSpeed Insights (PSI), la véritable alternative à GTmetrix, est basé sur Lighthouse pour fournir son score de performance global.
Google PageSpeed Insights
Score de performance global Google Page Speed Insights
Qu'est-ce que les GTmetrix Grade ?
GTmetrix - Grade
GTmetrix Grade

Remplaçant les anciens scores de performances (PageSpeed et YSlow), les GTmetrix Grade se décomposent en 3 parties :

  1. Une notation globale en forme de lettre.
  2. Un score de performance.
  3. un score de structure.
1. Une notation globale GTmetrix
Note GTmetrix
Notation globale GTmetrix

La note globale GTmetrix, sous forme de lettre, est une moyenne pondérée du score de performance (70%) et du score de structure (30%) de votre page web.

La notation globale est graduée de A à F et avec des couleurs différentes (vert, orange, rouge) :

  • A et B, de couleur verte, signifient que votre page s’affiche très rapidement (A) à rapidement (B).
  • C et D, de couleur orange, signifient que votre page s’affiche dans la moyenne haute (C) à moyenne basse (D).
  • E et F, de couleur rouge, signifient que votre page s’affiche lentement (E) à très lentement (F).
2. Un score de performance
Score de performance GTmetrix
Score de performance - GTmetrix

Le score de performance vous indique les performances de votre page d’un point de vue expérience utilisateur, en terme de chargement, interactivité et stabilité visuelle.

Il reprend les données de Google Lighthouse, mais en prenant en compte vos caractéristiques de tests (navigateur, vitesse de connexion, emplacement du serveur de test, …) et sont pondérées de la manière suivante :

  • First Contentful Paint (FCP) : 15%
  • Speed Index (SI) : 15%
  • Largest Contentful Paint (LCP) : 25%
  • Time to Interactive TTI) : 15%
  • Total Blocking Time (TBT) : 25%
  • Cumulative Layout Shift (CLS) : 5%

La signification de ces métriques sont :

  • First Contentful Paint (FCP) ou première peinture satisfaite : mesure le temps avant que l’internaute voit une première partie du contenu DOM (texte, image, arrière plan) de votre page s’afficher sur son écran. Doit être < 1 seconde.
  • Speed Index (SI) ou indice de vitesse : mesure la vitesse à laquelle le contenu de votre page est affiché visuellement pendant son chargement. Doit être < 4.3 secondes.
  • Largest Contentful Paint (LCP) ou plus grande peinture de contenu : mesure le temps pour que votre page web s’affiche en totalité sur l’écran de l’internaute. Doit être < 2.5 secondes.
  • Time to Interactive (TTI) ou temps d’interactivité : mesure le temps nécessaire à votre page pour devenir totalement interactive. Doit être < 3.8 secondes.
  • Total Blocking Time (TBT) ou temps de blocage total : mesure le temps total de blocage de votre page Web qui empêche l’utilisateur d’interagir avec elle. Doit être < 300 millisecondes.
  • Cumulative Layout Shift (CLS) ou décalage cumulatif de la disposition : mesure la stabilité visuelle de votre page (changement d’une mise en page, d’une police, d’une image, d’un bouton, …). Doit être < 0.1.
3. Un score de structure
Score de structure GTmetrix
Score de structure - GTmetrix

Le score de structure, métrique propriétaire de GT metrix, vous indique si votre page web est bien construite d’un point de vue technique afin qu’elle ait des performances optimales pour un meilleur ranking dans les résultats des moteurs de recherche (SERP).

Qu'est-ce que les Web Vitals ?

Reprises des Web Core Vitals de Google, les Web Vitals mesurent l’expérience utilisateur en termes de temps de chargement, d’interactivité et de stabilité du contenu de votre page web, en se basant sur des données de terrain : les Google Chrome User Experience Report (CrUX).

Les Web Vitals, reflétant les performances de votre site web telles que perçues par l’internaute, se décomposent en 3 parties :

  1. Largest Contentful Paint.
  2. Total Blocking Time.
  3. Cumulative Layout Shift.
Web Vitals
Web Vitals
1. Largest Contentful Paint

Comme vu précédemment, Largest Contenful Paint (LCP) est une métrique mesurant le temps que votre page web s’affiche en totalité sur l’écran de l’internaute.
À noter que n’est pris en compte que les éléments au dessus de la ligne de flottaison de votre page.

Autant Google considère comme bon un LCP <2.5 secondes, autant GT metrix considère bon un LCP< 1,2 seconde pour une bonne expérience utilisateur.

Largest Contentful Paint
Largest Contentful Paint
2. Total Blocking Time

Comme vu précédemment, Total Blocking Time (TBT) est une métrique mesurant le temps total de blocage de votre page Web qui empêche l’utilisateur d’interagir avec elle.

Autant Google considère comme bon un TBT<300 millisecondes, autant GT metrix considère bon un TBT < 150 millisecondes pour une bonne expérience utilisateur.

À noter, que Total Blocking Time remplace la métrique FID (First Input Delay ou premier délai d’attente) des Core Web Vitals, qui mesure le temps de réaction de votre page web à une action de l’utilisateur (clic sur un lien, appui sur un bouton, …).

Total Blocking Time
Total Blocking Time
3. Cumulative Layout Shift

Comme vu précédemment, Cumulative Layout Shift (CLS) est une métrique mesurant la stabilité visuelle de votre page (changement d’une mise en page, déplacement d’un contenu, d’une police, d’une image, d’un bouton, …).

GT metrix comme Google considère bon un CLS < 0.1 pour une bonne expérience utilisateur.

Cumulative Layout Shift
Cumulative Layout Shift
Conseil
Conseil

Gtmetrix vous permet de télécharger le rapport au format PDF.

Pour se faire, il faudra, simplement, cliquer sur le bouton Télécharger le PDF

Télécharger le rapport en PDF- GTmetrix

3. Le détail des résultats et les préconisations GTmetrix

Cette dernière partie détaille les résultats obtenus précédemment, et surtout fournit les préconisations de GTmetrix afin d’améliorer le temps de chargement de votre page. 

Elle est répartie en 6 onglets :

  1. Résumé.
  2. Performance.
  3. Structure.
  4. Cascade.
  5. Vidéo.
  6. Historique.
Onglets - Détails des résultats GTmetrix
Onglets - Détails des résultats GT metrix
1. Résumé

L’onglet résumé de GTmetrix vous permet de visualiser la vitesse de chargement de votre page web en mettant en exergue :

  • Une frise chronologique en dixième de secondes.
  • Le TTFB (Time to First Byte).
  • Le FCP (First Contentful Paint).
  • Le LCP (Largest Contentful Paint).
  • Le TTI (Time to Interactive).
  • Le temps de chargement (Onload Time).
  • Le temps de chargement complet (Fully Loaded Time).
Visualisation de la vitesse - GTmetrix
Onglet Résumé - Visualisation de la vitesse - GT metrix

En dessous de cette visualisation, vous trouverez 2 sections :

  • Les principaux problèmes.
  • Les détails de la page.

La section des principaux problèmes vous permet d’identifier les problèmes structurels de votre page web, mais surtout vous indique, via la petite flèche, les optimisations à effectuer pour réduire son temps de chargement. 

Principaux problèmes structurels - GTmetrix
Principaux problèmes de structure - GT metrix

La section détails de la page vous permet, quant à elle, de connaître :

  • Le temps que met la page pour se charger complètement.
  • La répartition du poids, appelé ici taille, de votre page (IMG, police de caractère, JS, CSS, …).
  • Le nombre total de requêtes, appelées ici demandes (IMG, police de caractère, JS, CSS, HTML, …).

En survolant les onglets avec le pointeur de votre souris, vous obtiendriez encore plus de précisions.

Détails de la page - GTmetrix
Détails de la page - GTmetrix
2. Performance

L’onglet Performance vous permet de visualiser le détail des métriques ayant permis de calculer votre score de performance (ici en l’occurrence 78%).

Il est divisé en deux parties :

  1. Les indicateurs de performance.
  2. Les horaires du navigateur.
1. Les indicateurs de performance

Les indicateurs de performance sont repris de Google Lighthouse, mais les critères GTmetrix sont encore plus restrictifs :

  • First Contentful Paint (FCP) : Doit être < 0.9 seconde.
  • Speed Index (SI) : Doit être < 1.3 seconde.
  • Largest Contentful Paint (LCP) : Doit être < 1.2 seconde.
  • Time To Interactive (TTI) : Doit être < 2.5 secondes.
  • Total Blocking Time (TBT) : Doit être < 150 milliseconde.  
  • Cumulative Layout Shift (CLS) : Doit être < 0.1.

La performance de la métrique, est mise en exergue avec un code couleur et un petit message :

  • Vert : Bon- Rien à faire ici.
  • Vert clair : ok, mais pensez à une amélioration.
  • Orange : Plus long que recommandé.
  • Rouge : Beaucoup plus long que recommandé.
Indicateurs de performance - GTmetrix
Indicateurs de performance - GT metrix

GTmetrix ne vous fournit pas, comme précédemment, le détail exact des corrections à effectuer, mais vous préconise quelques conseils avisés pour améliorer la vitesse du site :

First Contentful Paint ou Première peinture satisfaite (FCP) :

  • Réduction du temps de réponse du serveur.
  • Utilisation d’un réseau de diffusion de contenu (CDN).
  • Servir les actifs statiques avec une politique de cache efficace.
  • Éviter les redirections de plusieurs pages.
  • Élimination des ressources bloquant le rendu.
  • Réduire au maximum le nombre de demandes et les tailles de charge utile.

Speed Index ou Indice de vitesse (SI)

  • Réduction du temps d’exécution de JavaScript.
  • Minimiser le travail du fil principal.
  • Suppression du JavaScript inutilisé.
  • Réduire l’impact du code tiers.
  • Remplacement de grandes bibliothèques JavaScript par des alternatives plus petites.

Largest Contentful Paint ou La plus grande peinture riche en contenu (LCP) :

  • Réduction du temps de réponse initial du serveur.
  • Utilisation d’un réseau de diffusion de contenu (CDN).
  • Servir les actifs statiques avec une politique de cache efficace.
  • Élimination du comportement de blocage de rendu.
  • Dimensionner correctement les images.
  • Encodage efficace des images.
  • Combinaison d’images à l’aide de sprites CSS.
  • Servir des images dans des formats de nouvelle génération.
  • Utilisation de formats vidéo pour le contenu animé.

Time to Interactive ou Temps d’interactivité (TTI)

  • Réduction du temps d’exécution de JavaScript.
  • Minimiser le travail du fil principal.
  • Suppression du JavaScript inutilisé.
  • Réduire l’impact du code tiers.
  • Remplacement de grandes bibliothèques JavaScript par des alternatives plus petites.
  • Maintenir le nombre de demandes le plus bas possible.
  • Éviter d’enchainer des requêtes critiques.
  • Utiliser les conseils de ressources de préconnexion et de dns-prefetch.
  • Précharger les demandes clés.

Total Blocking Time ou Temps total de blocage (TBT) :

  • Réduction du temps d’exécution de JavaScript.
  • Minimiser le travail du fil principal.
  • Suppression du JavaScript inutilisé.
  • Réduire l’impact du code tiers.
  • Remplacement de grandes bibliothèques JavaScript par des alternatives plus petites.

Cumulative Layout Shift ou Changement de disposition cumulatif (CLS) :

  • Spécifier les dimensions des images et vidéos (largeur et hauteur).
  • Déplacer les annonces vers le bas ou hors de la fenêtre.
  • Utiliser l’espace réservé à une annonce si celle-ci n’est pas disponible.  
  • Éviter d’insérer du contenu dynamique au dessus du contenu existant (bannières, …).
  • Empêcher le flash de texte invisible (FOIT).
  • Eviter les animations non composites.
Conseil
Conseil

Pour les prestataires en référencement organique (agence SEO ou consultant SEO), GTmetrix propose une petite astuce pour obtenir un tableau avec uniquement les indicateurs de performance, afin de le rendre plus présentable à vos clients ou prospects.

Il suffit de cocher la case Détails métriques sur OFF

Détails des indicateurs de performance sans description -GTmetrix
Détails des indicateurs de performance sans description - GT metrix
2. Les horaires du navigateur

Les horaires du navigateur (Browser Timings) détaillent, avec encore plus de précisions, la visualisation de la vitesse de chargement de votre page web, précédemment vue.

Rediriger la durée : mesure le temps passé à effectuer des redirections d’URLs (non-www vers www, http vers https, …) avant le chargement de la page HTML finale.

Temps jusqu’au premier octet (TTFB) : mesure le temps total passé avant de recevoir le premier octet de la réponse une fois qu’il a été demandé.

Temps de chargement du contenu DOM : mesure le temps passé jusqu’au moment ou le DOM est prêt et qu’aucune feuille de style ne bloque l’exécution de JavaScript.

Durée de la connexion : mesure le temps passé à se connecter au serveur, après toutes les redirections, pour faire la requête vers la page.

Temps interactif DOM : mesure le temps passé entre le moment ou le navigateur a fini de charger et d’analyser le HTML et la construction du DOM (Document Object Model).

Temps de chargement : mesure le temps passé au traitement de la page et au téléchargement complet de ses ressources.

Durée du backend : mesure le temps que le serveur met pour générer une réponse.

Première peinture : mesure le temps avant que l’internaute voit une première partie du contenu DOM (texte, image, arrière plan) de votre page s’afficher sur son écran. 

Temps entièrement chargé : mesure le temps de chargement complet de votre page web à partir duquel il n’y a eu plus d’activité du réseau et du processeur lié au chargement.

Horaires du navigateur - GTmetrix
Horaires du navigateur - GT metrix
3. Structure

L’onglet Structure vous permet de comprendre votre score de structure (ici en l’occurrence 97%) en visualisant :

  • Le détail des audits de structure réalisés.
  • L’impact de l’audit de structure sur les performances de votre page.
  • Le détail des optimisations à effectuer pour avoir des performances optimales.
Section structure GTmetrix
Section structure - GT metrix

L’impact de l’audit de structure sur les performances de votre page est mis en exergue avec un code couleur et un petit message :

  • Rouge : Haut : les optimisations peuvent améliorer considérablement les performances de votre page.
  • Brun clair : Moyen-haut : les optimisations peuvent améliorer notablement les performances de votre page.
  • Jaune : Moyen : les optimisations peuvent améliorer de manière modérée les performances de votre page.
  • Vert pale : Moyen-bas : les optimisations peuvent améliorer les performances de votre page, mais les gains obtenus peuvent être négligeables.
  • Vert très clair : Faible : les optimisations ne sont pas essentielles, car les gains de web performance sont négligeables. 
  • Vert foncé : Aucun : Audit sans impact – Rien à faire ici.
  • Gris  : N/A :  – Audit sans impact – Purement informatif.

Gtmetrix répertorie les audits de structure de votre page ayant le plus d’impact sur votre score de performance (en ordre décroissant d’importance).

Ne perdez pas trop de temps et d’efforts sur toutes les optimisations à effectuer : privilégiez ceux en code Rouge, Brun clair et, éventuellement, Jaune.

Pour découvrir les optimisations à réaliser pour accélérer le chargement de votre page, il vous suffit de cliquer sur la petite flèche à côté de l’audit. 

Détails des optimisations - section structure GTmetrix
4. Cascade

L’onglet cascade (Waterfall) vous permet de connaître quelles ressources peuvent ralentir le chargement de votre page en visualisant :

  • Les ressources chargées (HTML, CSS, JS, XHR, polices, images, …)
  • L’ordre et le temps de chargement de ses ressources.

Le graphique en cascade est divisé en 5 colonnes :

  • L’URL : est le nom du fichier ou de la ressource en cours de chargement (JPEG, JS, CSS, …).
  • Le statut : indique l’état de la réponse HTTP (il ne devrait jamais avoir d’erreurs avec codes 4xx ou 5xx, synonymes de demandes infructueuses et mises en exergue en rouge).
  • Le domaine : est l’endroit ou est hébergé la ressource.
  • La taille : est le poids du fichier chargé (plus cette taille est basse, plus votre page est légère et plus elle s’affichera rapidement).
  • La chronologie : est la répartition du temps de chargement des pages.
Onglet Cascade - GTmetrix
Onglet cascade (Waterfall) - GT metrix

La chronologie dans le graphique en cascade vous permet de voir les ressources chargées, dans quel ordre de chargement et en combien de temps.

Il met en exergue le temps d’exécution des demandes (demander, télécharger, exécuter) sous forme de chiffres (temps en secondes ou millisecondes) et de longueurs de barres aux couleurs différentes.

Les couleurs de ses barres ont, aussi, une signification :

  • Marron (Blocking) : est le temps que la demande a passé à attendre dans la file d’attente du navigateur pour démarrer la demande.
  • Turquoise (DNS Lookup) : est le temps de résolution du DNS.
  • Vert (Connecting) :  est le temps nécessaire pour établir une connexion TCP entre le serveur et l’hôte/client.
  • Rouge (Sending) : est le temps nécessaire au navigateur pour transmettre la requête au serveur.
  • Violet (Waiting) : est le temps passé à attendre que le serveur génère une réponse. Il correspond au TTFB.
  • Gris (Receiving) : est le temps nécessaire au navigateur pour télécharger la réponse du serveur.

À noter que sur ce Waterfall, est aussi inclus des lignes verticales aux couleurs différentes qui représentent le calendrier des évènements (et que vous pouvez retrouver sur la vidéo de chargement de page) :

  • Ligne verte claire : Première peinture.
  • Ligne verte : FCP.
  • Ligne bleue : DOM Loaded.
  • Ligne rouge : Onload Time.
  • Ligne violette : Fully Loaded Time.
Conseil
Conseil

Vous pouvez aussi :

  • Cliquer sur l’intitulé de la colonne pour changer l’affichage par ordre croissant ou décroissant. (Cela est surtout important pour les colonnes Statut et Taille).
  • Filtrer les demandes par type (HTML, CSS, JS, XHR, polices, images, …).
  • Filtrer les demandes par mot-clé (ici, Google).
  • Connaître les en-têtes de demande / réponse en cliquant sur le + devant l’URL.
Graphique en cascade - GTmetrix
5. Vidéo

L’onglet Vidéo vous permet de visionner le chargement de votre page et d’identifier où se produisent les goulots d’étranglement et les arrêts.

Sur cette vidéo, est mis en exergue par un code couleur les métriques suivantes : 

  • Le temps de premier octet (TTFB).
  • La première peinture.
  • La première peinture satisfaite (FCP)
  • Le DOM chargé (DOM loaded).
  • Le temps de chargement (Onload Time).
  • Le temps de chargement complet (Fully Loaded Time).

Vous avez la possibilité de ralentir la vitesse de visionnage de la vidéo jusqu’à quatre fois sa vitesse d’origine pour analyser les éléments les plus importants à optimiser.

De surcroit, vous aurez la possibilité de télécharger la vidéo au format MP4, et même de l’intégrer dans le code source d’un site internet. 

Cette intégration de vidéo n’est qu’utile que pour les prestations en référencement organique.

Vidéo de chargement de page - GTmetrix
6. Historique

L’onglet historique, comme son nom l’indique, permet d’avoir un historique des rapports GTmetrix, détaillé en 3 tableaux :

  • Statistiques de la page.
  • Tailles de page et nombre de demandes.
  • Scores de page.

Vous aurez aussi la possibilité de mettre une annotation sur le graphique lui-même.
La date et l’heure de cette annotation sont mises automatiquement.

Enfin, vous pourrez télécharger l’historique des rapports GTmetrix au format CSV.

Historique des rapports - GTmetrix
Conseil
Conseil

GTmetrix intègre en natif, une fonction intéressante qu’est la comparaison des rapports.

Vous pouvez comparer 4 rapports de test d’URLs en même temps, en termes de :

  • GTmetrix Grade.
  • Score de performance.
  • Score de structure.
  • Largest Contentful Paint (LCP).
  • Total Blocking Time (TBT).
  • Cumulative Layout Shift (CLS).

Ces comparatifs sont présentés sous forme de chiffres et de graphiques très clairs.

Est présent également le détail :

  • Du score de performance.
  • Du score de structure.
  • De cascade (waterfall).

Pour se faire, il faudra, simplement, cliquer sur le bouton Comparer.

Comparaison de rapports GTmetrix
Comparaisons des rapports - GTmetrix
Comparaison des rapports GT metrix

Conclusion sur GTmetrix

Comme vous avez pu le voir dans ce tutoriel, GTmetrix vous permet d’analyser et de tester les performances d’affichage de vos pages web, mais aussi de vous transmettre des résultats synthétiques et complets à la fois. 

Mais le + de Gtmetrix, outre son UX parfait, est de vous fournir des conseils pour réduire ou supprimer les problèmes qui pénalisent les performances de votre site. Le tout de façon totalement gratuite.
Que demander de plus ?

Si vous avez aimé cet article sur GTmetrix, laissez-moi un petit commentaire.

Laisser un commentaire