Plongée en profondeur dans l'outil de test de vitesse GTmetrix

Il y a beaucoup d’options que vous avez en tant que propriétaire de site Web quand il s’agit d’effectuer des tests de vitesse pour vérifier la performance. Auparavant, nous avons examiné en profondeur l’outil Pingdom. Aujourd’hui, nous voulons voir la façon de mieux utiliser et comprendre les données du populaire outil de test de vitesse de site Web GTmetrix.

De tels outils reposent sur des systèmes de notation et des scores, ainsi que sur des avertissements de ce qui pourrait ne pas fonctionner sur votre site. Parfois, ils peuvent être carrément déroutants, et donc prendre un certain temps pour interpréter ce qu’ils signifient réellement, peut vous aider non seulement à augmenter vos scores, mais aussi la performance de votre site, ce qui est vraiment important.

GTmetrix a été développé par GT.net, une compagnie basée à l’extérieur du Canada, comme un outil permettant à leurs clients hébergement de déterminer facilement la performance de leur site. Avec Pingdom, c’est probablement l’un des outils de test de vitesse les plus connus et les plus utilisés sur le web aujourd’hui !

En fait, la raison pour laquelle nous écrivons ceci est que nous avons beaucoup de clients Kinsta qui nous demandent toujours comment suivre les conseils qu’ils voient sur leurs rapports GTmetrix.

Comparé à d’autres outils de développement, GTmetrix est assez facile à utiliser et le débutant peut s’en servir assez rapidement. Il utilise une combinaison de Google Web Vitals et de mesures de performance propriétaires pour générer des scores et des recommandations.

GTmetrix Analysis Options

La version de base de GTmetrix est entièrement gratuite et vous pouvez accéder à un certain nombre d’options simplement en créant un compte. Ils ont aussi des plans premium, mais dans l’article d’aujourd’hui, nous utiliserons la version gratuite. Si vous avez un compte, vous pouvez utiliser un certain nombre d’options d’analyse supplémentaires.

La première est la possibilité de choisir l’emplacement dans lequel vous voulez tester votre URL. L’emplacement physique que vous choisissez est en fait très important car il se rapporte à l’endroit où votre site Web est réellement hébergé. Moins il y a de latence, plus vos temps de chargement sont rapides. Les emplacements actuellement disponibles sont les suivants :

Dallas, États-Unis
Hong Kong, Chine
Londres, Royaume-Uni
Mumbai, Inde
Sydney, Australie
São Paulo, Brésil
Vancouver, Canada

Vous pouvez choisir le navigateur que vous voulez utiliser. Vous pouvez tester avec Chrome (Bureau) et Firefox (Bureau). Des versions mobiles sont disponibles dans leurs plans premium. Ils vous permettent également de modifier la vitesse de connexion, ce qui signifie que vous pouvez simuler différents types de connexion pour voir comment ils affectent le chargement de vos pages.

Des options supplémentaires incluent la possibilité de créer une vidéo. Cela peut vous aider à déboguer les problèmes car vous pouvez voir comment la page s’affiche. L’Adblock Plus est une fonctionnalité intéressante. Si vous utilisez un réseau publicitaire tiers tel que Google Adsense, vous pouvez activer cette option pour voir l’impact complet des annonces sur vos temps de chargement.

Les options supplémentaires comprennent l’arrêt du test Onload (que nous aborderons plus tard), la possibilité d’envoyer un cookie avec votre requête, l’utilisation de l’authentification HTTP, la possibilité de mettre en liste blanche et en liste noire les URL, la résolution de l’écran et le ratio des pixels de l’appareil, ainsi que le contournement de l’agent utilisateur.

Analyse avec l’outil de test de vitesse GTmetrix

Une page Web est composée de différentes ressources, telles que le HTML, JavaScript, CSS et les images. Chacune d’entre elles génère des requêtes pour afficher ce que vous voyez sur votre site web. Généralement, plus vous avez de demandes, plus votre site Web se chargera lentement. Ce n’est pas toujours le cas, mais c’est vrai la plupart du temps.

Ci-dessous, nous allons diviser chaque section de GTmetrix et expliquer plus en détail ce que l’information signifie par rapport à la performance globale de votre site Web et ce qu’il faut faire à propos des recommandations. N’oubliez pas de ne pas trop vous obséder sur les scores, mais plutôt sur l’amélioration de la vitesse réelle de votre site.

Sommaire GTmetrix
Performance
Structure
Diagramme Waterfall
Video
Historique

Résumé de GTmetrix (Scores de performance et détails)

Lorsque vous faites fonctionner votre site WordPress via GTmetrix, il génère un rapport de performance qui comprend votre « GTmetrix Grade » et vos « Web Vitals ».

Le GTmetrix Grade est calculé à partir de deux mesures – Performance et Structure.

GTmetrix Performance est le score de performance depuis l’outil d’audit des sites Lighthouse
Gtmetrix Structure est une mesure de performance propriétaire qui mesure la performance globale d’une page.

En 2020, Google a introduit un ensemble standardisé de mesures de performance et d’expérience utilisateur sur le web appelé Web Vitals. Web Vitals se compose d’une variété de mesures, mais celles que GTmetrix prend en compte sont les suivantes : Largest Contentful Paint (LCP), Total Blocking Time (TBT) et Cumulative Layout Shift (CLS).

Largest Contentful Paint (LCP) est le temps nécessaire au chargement de la plus grande partie de votre page. Pour certains sites, la LCP peut être une grande image Hero, tandis que sur d’autres sites, la LCP peut faire référence au corps du texte.
Le temps total de blocage (TBT) est la durée pendant laquelle une page est bloquée avant qu’un utilisateur puisse interagir avec elle. Les CSS et JS bloquant le rendu peuvent avoir un impact énorme sur le TBT.
Cumulative Layout Shift (CLS) désigne le déplacement d’éléments pendant le chargement d’une page. Par exemple, la mise en page d’une page contenant des tweets intégrés peut se déplacer de façon spectaculaire au fur et à mesure du chargement de la page.

Dans notre exemple, nous utilisons le domaine kinstalife.com, qui est hébergé sur Kinsta. Lors de notre premier test de vitesse, notre site a enregistré les statistiques suivantes.

GTmetrix Grade – B
GTmetrix Performance – 85%
GTmetrix Structure – 83%
LCP – 1.0s
TBT – 0ms
CLS – 0

Test de vitesse GTmetrix pour kinstalife.com.

Nous avons ensuite effectué un test supplémentaire et maintenant notre GTmetrix Grade est « A » ! De quoi s’agit-il ? Vous le remarquerez peut-être aussi si vous utilisez plusieurs fois l’outil de test de vitesse GTmetrix pour votre site web. L’une des raisons pour lesquelles cela se produit est la mise en cache, à la fois la mise en cache du DNS et celle du serveur. Découvrez pourquoi plus loin dans notre analyse waterfall.

Notre second test de vitesse avec GTmetrix.

La page de résumé de GTmetrix contient également une visualisation de la vitesse, qui montre une chronologie des événements clés pendant le chargement d’une page. Dans la capture d’écran ci-dessous, vous pouvez voir TTFB, FCP, LCP, le temps de chargement, le temps pour devenir interactif et le temps de chargement complet pour kinstalife.com.

Au bas de la page de résumé, il y a également des sections « Top Issues » et « Page Details ». Sous « Top Issues », vous pouvez voir une liste de points prioritaires à corriger, tandis que « Page Details » fournit une ventilation en pourcentage et en taille de fichier de votre page.

Performance

Ensuite, l’onglet « Performance » de GTmetrix, qui présente un certain nombre de mesures utiles tirées des données de performance de Lighthouse. Outre LCP, TBT et CLS présentés sur la page de résumé, la section « Performance Metrics » affiche également Speed Index (SI), Time to Interactive (TTI) et la First Contentful Paint (FCP).

Bien que la section « Performance Metrics » ne vous affiche pas exactement ce que vous devez corriger, elle donne un bon aperçu des mesures clés de l’expérience utilisateur que vous pouvez améliorer.

Plus bas sur la page, GTmetrix affiche également quelques statistiques plus traditionnelles de « Browser Timing », notamment Onload Time, Time to First Byte, Fully Loaded Time, et plus encore. Dans le passé, ces mesures traditionnelles étaient très importantes. Cependant, Google ouvrant la voie à des mesures standardisées avec Web Vitals, nous recommandons d’optimiser celles-ci à la place. Dans la plupart des cas, vous constaterez que l’optimisation pour Web Vitals se traduira également par de bonnes mesures du temps de navigation.

Les mesures de temps du navigateur GTmetrix.

Structure

L’onglet « Structure » de GTmetrix vous permet de visualiser les problèmes spécifiques affectant les performances de votre site. Cette page est très utile car elle vous fournit des informations utiles telles que « eliminate render-blocking resources » et « minify CSS » pour commencer à optimiser votre site.

Nous essaierons de couvrir les plus courants et les plus populaires avec lesquels les propriétaires de sites WordPress se débattent. N’oubliez pas d’ajouter cet article à vos favoris, car nous le mettrons constamment à jour. En général, si vous les améliorez sur votre site, vous devriez constater une augmentation des performances.

Serve Scaled Images

Quand il s’agit de travailler avec des images sur votre site Web, vous devriez toujours essayer de les mettre à l’échelle, et ne pas laisser le CSS les redimensionner. Si vous ne le faites pas, vous vous retrouverez avec la recommandation Serve Scaled Images. Si vous utilisez WordPress, par défaut, il redimensionne vos images lors de leur chargement dans la médiathèque. Ces réglages se trouvent sous « Réglages > Média ». Vous voudrez vous assurer que la largeur maximale est proche de la largeur de votre site. De cette façon, le CSS n’essaie pas de redimensionner votre image pour l’adapter à l’intérieur. Vous pouvez également les redimensionner automatiquement avec un plugin d’optimisation d’image.

Inline Small CSS

L’intégration de votre CSS n’est généralement pas recommandée car elle augmentera la taille globale de téléchargement de votre requête de page. Cependant, si votre site est petit, avec un minimum de requêtes, cela pourrait améliorer vos performances.

Pour intégrer facilement votre CSS, vous pouvez utiliser un plugin gratuit comme Autoptimize. Cochez simplement l’option « Inline all CSS » et assurez-vous d’avoir exclu les fichiers CSS supplémentaires que vous n’avez pas inline.

Inline Small JavaScript

Tout comme pour le Inline Small CSS, la même chose s’applique pour Inline Small JavaScript. Ce n’est généralement pas recommandé car cela augmentera la taille globale de téléchargement de votre requête de page. Cependant, si votre site est petit, avec un minimum de requêtes, cela pourrait améliorer vos performances. Là encore, tu peux utiliser les paramètres JavaScript d’Autoptimize.

Leverage Browser Caching

Tirer parti de la mise en cache du navigateur (Leverage Browser Caching) est une recommandation très courante avec laquelle les gens ont du mal à composer. Ceci est dû au fait que les en-têtes de cache HTTP de votre serveur web ne sont pas corrects. Consultez notre article détaillé sur la façon de corriger l’avertissement Leverage Browser Caching. Vous ne pouvez régler ce problème que sur les ressources que vous contrôlez. Par exemple, si vous voyez cela sur des réseaux publicitaires tiers, il n’y a rien que vous puissiez faire.

Serve Resources From a Consistent URL

Si vous voyez l’avertissement Serve Resources From a Consistent URL, il est très probable que vous ayez des ressources identiques qui sont servies à partir de la même URL. Souvent, cela peut se produire lorsqu’il y a des chaînes de requête (query strings) impliquées. Découvrez comment supprimer les query strings des ressources statiques. Une fois que cela est supprimé, le site ne devrait plus avoir à les charger deux fois.

Servez des ressources à partir d'une URL cohérente — Servez des ressources à partir d’une URL cohérente

Defer Parsing of JavaScript

JavaScript et CSS bloquent le rendu par défaut le rendu. Cela signifie qu’ils peuvent empêcher l’affichage de la page Web jusqu’à ce qu’elle soit téléchargée et traitée par le navigateur. L’attribut defer indique au navigateur de ne pas télécharger la ressource jusqu’à ce que l’analyse HTML ne soit terminée. Une façon simple de résoudre ce problème est d’utiliser les plugins gratuits Autoptimize ou Async JavaScript. N’oubliez pas de consulter notre article détaillé sur la façon d’éliminer le blocage de rendu JavaScript et CSS.

Pour une explication détaillée, lisez : Comment corriger l’avertissement Defer Parsing of Javascript dans WordPress (4 méthodes).

Minify CSS and JavaScript

La minification consiste essentiellement à supprimer tous les caractères inutiles du code source sans en modifier la fonctionnalité. Il peut s’agir de sauts de ligne, d’espaces vides, d’indentations, etc. Ce faisant, cela peut économiser des octets de données et accélérer le téléchargement, l’analyse et le temps d’exécution.

Encore une fois, le plugin gratuit Autoptimize est parfait pour cela. Assurez-vous simplement que les cases « Optimiser le code JavaScript » et « Optimiser le code CSS » sont toutes les deux cochées. Si vous avez un grand site, vous voudrez peut-être aussi jouer avec les paramètres avancés ci-dessous, car certains pourraient nuire aux performances de votre site. Il n’est généralement pas recommandé d’intégrer ou de combiner CSS et JavaScript sur de grands sites. C’est là que la puissance de HTTP/2 entre en jeu.

Si vous êtes un client de Kinsta, vous pouvez profiter de la fonction de minification du code qui est intégrée directement au tableau de bord MyKinsta. Cela permet aux clients d’activer rapidement et facilement la minification automatique CSS et JavaScript d’un simple clic, accélérant ainsi leurs sites sans aucun effort manuel.

Optimize Images

Selon HTTP Archive, les images représentaient en moyenne 66% du poids total d’une page Web. Ainsi, lorsqu’il s’agit d’optimiser votre site WordPress, les images sont de loin le premier endroit où vous devriez commencer ! C’est plus important que les scripts et les polices.

Dans un monde parfait, chaque image doit être compressée et optimisée avant d’être téléchargée sur WordPress. Mais malheureusement, ce n’est pas réaliste. Pour cette raison, nous vous recommandons d’utiliser un bon plugin d’optimisation d’image. Cela vous aidera à compresser automatiquement vos images, à les redimensionner et à vous assurer qu’elles sont légères et se chargent rapidement sur votre site. Jetez un coup d’œil à notre article détaillé sur la façon d’optimiser les images pour le Web.

Réduire le temps de réponse initial du serveur

Pour WordPress, le principal responsable de la lenteur des temps de réponse initiaux du serveur est l’absence de mise en cache des pages. Sans mise en cache des pages, WordPress utilise PHP pour construire dynamiquement des pages pour chaque requête individuelle, ce qui signifie qu’il peut être rapidement submergé de requêtes. Avec la mise en cache des pages activée, votre site peut servir des fichiers HTML pré-générés, ce qui est beaucoup plus rapide et plus évolutif que l’utilisation de PHP pour répondre à chaque requête de page.

Si vous êtes hébergé chez Kinsta, vous n’avez pas à vous soucier de la mise en cache des pages car nous nous en occupons pour vous avec notre configuration Nginx. Si votre hébergeur WordPress ne prend pas en charge la mise en cache des pages, vous pouvez installer une extension de mise en cache comme WP Rocket ou W3 Total Cache. Pour réduire encore plus le temps de réponse du serveur, nous vous recommandons d’intégrer Cloudflare APO à votre site WordPress. Ce service d’optimisation innovant de Cloudflare distribue les pages HTML de votre site dans le monde entier, ce qui peut réduire le temps de réponse du serveur à l’échelle mondiale.

Minify HTML

Tout comme le CSS et le JavaScript, le HTML peut également être minifié pour éliminer les caractères inutiles et vous faire gagner des octets de données pour accélérer le temps d’exécution.

Le plugin gratuit Autoptimize est également idéal pour cela. Activez simplement l’option « Optimiser le code HTML« .

Enable GZIP Compression

GZIP est un format de fichier et une application logicielle utilisés pour la compression et la décompression de fichiers. La compression GZIP est activée côté serveur et permet de réduire davantage la taille de vos fichiers HTML, CSS et JavaScript. Il ne fonctionnera pas sur les images car celles-ci sont déjà compressées d’une autre manière. Certains ont connu des réductions allant jusqu’à 70 % en raison de la compression. C’est probablement l’une des optimisations les plus faciles que vous pourriez faire quand il s’agit de WordPress. Note : La compression GZIP est activée par défaut sur tous les serveurs Kinsta.

Pour activer la compression GZIP dans Apache, ajoutez simplement le code suivant à votre fichier .htaccess.

# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

Si vous utilisez NGINX, ajoutez simplement ce qui suit à votre fichier nginx.conf.

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

N’oubliez pas de consulter également notre article détaillé sur la façon d’activer la compression GZIP.

Minimize Redirects

Minimiser les redirections HTTP d’une URL à une autre permet de réduire les temps d’attente et les RTTs supplémentaires pour les utilisateurs. Consultez notre article sur les redirections WordPress dans lequel nous avons découvert que 2 mauvaises redirections ont augmenté les temps de chargement du site de 58% ! Tout simplement, les redirections WordPress ralentissent votre site. C’est pourquoi il vaut la peine de prendre le temps de minimiser le nombre de redirections vers votre site.

Specify a Cache Validator

La recommandation Specify a cache validator apparaît lorsqu’il manque des en-têtes de cache HTTP. Ceux-ci doivent être inclus dans chaque réponse du serveur d’origine, car ils valident et définissent la longueur du cache. Si les en-têtes ne sont pas trouvés, une nouvelle requête pour la ressource sera générée à chaque fois, ce qui augmente la charge sur votre serveur. L’utilisation d’en-têtes de mise en cache garantit que les requêtes ultérieures n’ont pas à être chargées à partir du serveur, ce qui permet d’économiser de la bande passante et d’améliorer les performances de l’utilisateur. Et n’oubliez pas que vous ne pouvez pas régler ce problème sur des ressources tierces que vous ne contrôlez pas.

Il existe un certain nombre d’en-têtes de mise en cache HTTP différents qui peuvent être utilisés pour corriger cette recommandation. Consultez notre article détaillé sur la façon de spécifier un validateur de cache.

Specify Image Dimensions

Tout comme vous ne devriez pas laisser le CSS redimensionner vos images, vous devriez également spécifier les dimensions de l’image. Cela signifie inclure la largeur et la hauteur dans votre code HTML.

Incorrect

<img src="https://domain.com/images/image1.png">

Correct

<img src="https://domain.com/images/image1.png" width="200" height="100">

Spécifier les dimensions de l'image — Spécifier les dimensions de l’image

Remove Query Strings From Static Resources

Vos fichiers CSS et JavaScript ont généralement la version du fichier à la fin de leur URL, comme domaine.com/style.css?ver=4.6. Certains serveurs et serveurs proxy sont incapables de mettre en cache les chaînes de requête, même si un en-tête cache-control:public est présent. Ainsi, en les supprimant, vous pouvez parfois améliorer votre mise en cache. Ceci peut facilement être fait avec du code ou des plugins WordPress gratuits.

Consultez notre article détaillé sur la façon de supprimer les chaînes de requête des ressources statiques. Et n’oubliez pas que vous ne pouvez pas régler ce problème sur des ressources tierces que vous ne contrôlez pas.

Remove Query Strings From Static Resources

Specify a Vary: Accept-Encoding Header

Il s’agit d’un en-tête HTTP qui doit être inclus dans chaque réponse du serveur d’origine, car il indique au navigateur si le client peut ou non gérer les versions compressées du contenu. Habituellement, lorsque la compression GZIP est activée, cela est également corrigé. Mais n’oubliez pas de consulter notre article en profondeur sur la façon de corriger l’avertissement specify a vary : accept-encoding header. Et encore une fois, vous ne pouvez pas régler ce problème avec des ressources tierces.

Graphique Waterfall de GTmetrix

Le graphique Waterfall de GTmetrix affiche toutes les demandes individuelles sur votre page Web (comme indiqué ci-dessous). Vous pouvez ensuite analyser chaque demande pour voir ce qui cause des retards et des problèmes de performance sur votre site. Vous trouverez ci-dessous un résumé plus détaillé et/ou une définition de la signification de chacune des couleurs pour chaque demande.

Blocking (Marron)

Lorsqu’un navigateur charge une page Web, les ressources JavaScript et CSS empêchent généralement l’affichage de la page Web jusqu’à ce qu’elle soit téléchargée et traitée par le navigateur. Cette temporisation apparaît comme un blocage dans le graphique Waterfall GTmetrix. Consultez notre article détaillé sur la façon d’éliminer le blocage de rendu JavaScript et CSS pour plus d’informations.

DNS Lookup (Sarcelle)

Vous pouvez penser à la recherche DNS comme un annuaire téléphonique. Il existe des serveurs appelés serveurs de noms de domaine qui contiennent les informations sur votre site Web et vers quelle adresse IP il doit être acheminé. Lorsque vous testez votre site Web pour la première fois via GTmetrix, il effectue une nouvelle recherche, et il doit interroger les enregistrements DNS pour obtenir les informations IP. Il en résulte un temps de recherche supplémentaire.

Lorsque vous testez votre site Web via GTmetrix une deuxième fois, il met en cache le DNS parce qu’il connaît déjà les informations IP et qu’il n’a pas à effectuer la recherche à nouveau. C’est l’une des raisons pour lesquelles vous pouvez faire apparaître votre site web plus rapidement après l’avoir fait tourner plusieurs fois dans GTmetrix. Comme vous pouvez le voir sur l’écran ci-dessous, lors du 2ème test que nous avons effectué, le temps de recherche DNS sur la charge DOC initiale est de 0 ms. C’est un domaine que beaucoup de gens interprètent mal ! Nous vous recommandons d’effectuer votre test plusieurs fois et de prendre la moyenne, à moins que vous ne vouliez que le DNS fasse partie de votre rapport, auquel cas vous pouvez passer le premier test.

Il en va de même pour vos ressources (JavaScript, CSS, images) si vous utilisez un CDN. Un cache CDN fonctionne un peu comme un DNS, une fois qu’il est mis en cache, il est alors beaucoup plus rapide lors de chargements consécutifs. Un autre conseil pour accélérer le DNS est d’utiliser le DNS prefetching. Ceci permet au navigateur d’effectuer des recherches DNS sur une page en arrière-plan. Vous pouvez le faire en ajoutant quelques lignes de code à l’en-tête de votre site WordPress. Voici quelques exemples ci-dessous.

<!-- Prefetch DNS for external assets -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com"> 
<link rel="dns-prefetch" href="//cdn.domain.com">

Ou si vous utilisez WordPress version 4.6 ou plus récente, vous voudrez peut-être utiliser des « ressources hints ». Les développeurs peuvent utiliser le filtre wp_resource_hints pour ajouter des domaines et URL personnalisés pour dns-prefetch, preconnect, prefetch ou prerender.

Connecting (Vert)

Le temps de connexion en GTmetrix fait référence à la connexion TCP ou au temps total requis pour créer une connexion TCP. Vous n’avez pas vraiment besoin de comprendre comment cela fonctionne, mais c’est simplement une méthode de communication entre l’hébergeur/client et le serveur qui doit avoir lieu.

Sending (Rouge)

Le temps d’envoi est simplement le temps qu’il faut au navigateur Web pour envoyer les données au serveur.

Waiting (Violet)

Le temps d’attente dans GTmetrix fait en fait référence au temps au premier octet, aussi connu sous le nom de TTFB dans certains outils. Le TTFB est une mesure utilisée comme indication de la réactivité d’un serveur Web ou d’une autre ressource réseau. En général, tout ce qui est inférieur à 100 ms est acceptable et un bon TTFB. Si vous vous approchez de la plage de 300-400 ms, il se peut que vous ayez quelque chose de mal configuré sur votre serveur ou qu’il soit temps de passer à une meilleure pile web. Comme vous pouvez le voir dans notre test ci-dessous, il était d’environ 100 ms, ce qui est formidable.

Quelques moyens simples de réduire votre TTFB sont de s’assurer que votre hébergeur dispose d’une mise en cache appropriée et d’utiliser un CDN.

Consultez notre article détaillé sur toutes les façons de réduire le TTFB sur votre site WordPress. C’est également une bonne idée d’en savoir plus sur Edge Caching et sur la manière dont il permet à vos lecteurs d’accéder plus rapidement aux pages de votre site.

Receiving (Gris)

Le temps de réception est simplement le temps qu’il faut au navigateur Web pour recevoir les données du serveur.

Event Timing

Chaque fois que vous demandez une page, il y a un chronométrage des événements dans lequel les choses sont affichées et chargées.

First Paint (ligne verte) : Le premier point auquel le navigateur effectue une sorte de rendu sur la page, comme l’affichage de la couleur d’arrière-plan.
DOM Loaded (ligne bleue) : Le point auquel le DOM (Document Object Model) est prêt.
Onload (Ligne Rouge) : Lorsque le traitement de la page est terminé et que toutes les ressources de la page (images, CSS, etc.) ont terminé le téléchargement.
Fully loaded (ligne violette) : Le point après l’événement Onload se déclenche et il n’y a pas eu d’activité réseau pendant 2 secondes.

HTTP Response Headers

Vous pouvez également cliquer sur une requête individuelle pour voir ce qu’ils appellent les en-têtes de réponse HTTP. Cela fournit des informations précieuses. Dans l’écran ci-dessous nous pouvons voir instantanément des choses telles que gzip est activé sur le serveur web, il fonctionne sur HHVM, il est servi à partir du cache (HIT, afficherait MISS autrement), les en-têtes de contrôle de cache, l’architecture du serveur (ce n’est pas toujours visible), les en-têtes expire, le user-agent navigateur et plus.

Une autre chose à savoir est que l’outil GTmetrix supporte HTTP/2, contrairement à Pingdom, car il utilise actuellement Chrome 58+ pour exécuter ses tests. Chrome a ajouté le support HTTP/2 dans la version 49. Gardez donc cela à l’esprit lorsque vous choisissez l’outil de test de vitesse à utiliser.

Vidéo

Pour vous aider à résoudre les problèmes visuels et les problèmes de performances de l’interface publique, la dernière version de GTmetrix comprend un onglet « Vidéo ». Lorsque la fonction vidéo est activée, GTmetrix enregistre automatiquement une vidéo intégrable montrant comment une page se charge pour chaque test de performance. Cette fonction est très utile pour déboguer les problèmes visuels qui n’apparaissent que sur certaines combinaisons de navigateur et de taille d’écran.

History

Une caractéristique vraiment intéressante est que vous pouvez sélectionner vos rapports passés et les comparer côte à côte. Cela peut être très utile, surtout lorsque vous faites des optimisations sur votre site pour voir s’il y a des améliorations. N’oubliez pas, vous pouvez parfois sur-optimiser aussi.

Configuration du domaine de l’étude de cas

Si vous êtes arrivé jusqu’ici dans notre plongée approfondie dans GTmetrix, vous allez être gâté. Il est toujours ennuyeux de voir des gens partager des conseils et des études de cas mais ne pas partager comment ils y sont arrivés. Vous trouverez donc ci-dessous notre configuration exacte pour le domaine d’étude de cas utilisé ci-dessus ! N’hésitez pas à la reproduire.

Architecture

Le domaine d’étude de cas (perfmatters.io) est hébergé par Kinsta sur la plateforme Google Cloud aux États-Unis (emplacement central). Kinsta utilise HTTP/2, NGINX, MariaDB, qui contribuent tous aux temps de chargement rapides.
Le site utilise HHVM. PHP 7.3 est maintenant disponible chez Kinsta qui est encore plus rapide que HHVM ! Vous pouvez passer d’une version de PHP à l’autre en appuyant sur un bouton.
Le site n’utilise pas d’extension de mise en cache. Kinsta met tout en cache au niveau du serveur ce qui simplifie grandement les choses, et dans la plupart des cas est plus rapide !

Extensions WordPress

Voici une liste des extensions utilisées sur le site WordPress.

L’extension gratuite CDN Enabler est utilisée pour déployer KeyCDN.
L’extension gratuite CAOS est utilisée pour synchroniser Google Analytics localement.
L’extension premium perfmatters est utilisée pour se débarrasser des requêtes HTTP inutiles et désactiver des éléments tels que les Emojis et les Embeds.
L’extension premium Gonzalez est utilisée pour désactiver le chargement de certains scripts.
L’extension premium Imagify est utilisée pour compresser les images.

Tutoriels recommandés pour une lecture plus approfondie :

Résumé

Comme vous pouvez le constater, savoir comment l’outil de test de vitesse GTmetrix fonctionne un peu mieux et ce que tous les graphiques signifient peut vous aider à prendre une décision plus fondée sur les données quand il s’agit de performance. Une analyse Waterfall, comme nous l’appelons, est cruciale pour savoir comment vos ressources individuelles se chargent. Et rappelez-vous, quand il s’agit de le comparer avec Pingdom, ce sont des outils différents et il est donc préférable de s’en tenir à l’un ou l’autre car ils calculent les choses différemment. Vous avez d’autres bons conseils GTmetrix ?

Si vous souhaitez voir des articles plus approfondis comme celui ci-dessus, veuillez nous le faire savoir ci-dessous dans les commentaires !

Brian Jackson

Brian a une grande passion pour WordPress, l'utilise depuis plus de dix ans et développe même quelques plugins de qualité. Brian aime les blogs, les films et les randonnées. Connectez avec Brian sur Twitter.