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.

Savoir comment @GTmetrix fonctionne est une information inestimable pour les propriétaires de sites Web WordPress ! ⏱ Cliquez pour Tweet

GTmetrix

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 l’utiliser assez rapidement. Il utilise une combinaison de Google PageSpeed Insights et YSlow pour générer des scores et des recommandations.

Outil de test de vitesse GTmetrix

Outil de test de vitesse GTmetrix

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.

Options de format de test GTmetrix

Options de format de test GTmetrix

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. Voici un excellent rapport comparatif sur le site de Smashing Magazine. Il n’est pas surprenant que celui avec la publicité ait été 2,3 secondes plus lent.

Options supplémentaires GTmetrix

Options supplémentaires GTmetrix

Les options supplémentaires incluent l’arrêt du test en cours de chargement (dans lequel nous nous plongerons plus tard), la possibilité d’envoyer un cookie avec votre demande, l’utilisation de l’authentification HTTP, et la possibilité d’établir une liste blanche et une liste noire d’URLs.

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 (Scores de performance et détails)

Lorsque vous testez votre site Web WordPress via GTmetrix, il génère un rapport de performance qui inclut votre score PageSpeed, YSlow, le temps de chargement complet, la taille totale des pages et le nombre de requêtes que vous avez sur votre site. Dans notre exemple, nous utilisons notre domaine d’étude de cas perfmatters.io, qui est hébergé sur Kinsta. Lors de notre premier test de vitesse, notre temps de chargement complet était de 1,1 seconde.

Rapport de performance GTmetrix

Rapport de performance GTmetrix

Nous avons ensuite effectué un test supplémentaire et maintenant notre temps de chargement comple est de 485 ms ! Qu’est-ce que c’est que tout ça ? Vous le remarquerez peut-être aussi si vous utilisez l’outil de test de vitesse GTmetrix plusieurs fois sur votre site Web. Une des raisons pour lesquelles cela se produit est à cause de la mise en cache, à la fois de la mise en cache DNS et de la mise en cache du serveur. Découvrez pourquoi ci-dessous dans notre analyse waterfall.

GTmetrix temps de chargement complet

GTmetrix temps de chargement complet

Une autre question qui revient assez souvent est, pourquoi l’outil GTmetrix montre toujours des vitesses plus lentes que Pingdom ? Par exemple, nous avons fait passer le même site par un test Pingdom et cela montre qu’il est beaucoup plus rapide.

Comparer Pingdom à GTmetrix

Comparer Pingdom à GTmetrix

Après avoir effectué des milliers de tests de vitesse, nous pouvons vous dire que Pingdom affichera presque toujours des vitesses plus rapides que GTmetrix. Ni l’un ni l’autre n’ont tort. Ils calculent simplement les vitesses de différentes façons, et il ne faut donc pas comparer les deux. Quand il s’agit d’utiliser les outils de test de vitesse de site Web, vous devriez vraiment choisir celui que vous aimez et vous y tenir. Vous obtiendrez ainsi une bonne mesure de base qui vous permettra de comparer vos résultats à ceux d’autres tests. De plus, depuis le 8 février 2017, GTmetrix utilise ce qu’ils appellent le temps de chargement complet.

Selon GTmetrix, le temps de chargement complet est le point après l’événement Onload et il n’y a pas eu d’activité réseau pendant 2 secondes. En termes simples, ils attendent maintenant à ce que votre page cesse de transférer des données avant de terminer un test, ce qui se traduit par des temps de chargement des pages plus cohérents. Auparavant, ils utilisaient le temps de chargement, ce qui, dans certains cas, faisait en sorte que des éléments n’apparaissaient pas dans les rapports sur le rendu, comme des publicités qui se chargeaient de façon asynchrone ou des captures d’écran manquantes.

PageSpeed

GTmetrix utilise les règles de Google PageSpeed Insight pour attribuer un score à votre site Web. Les cotes vont de 0 à 100 (F à A). Il y a plus de 25 recommandations. Nous essaierons de couvrir les plus courantes et les plus populaires avec lesquelles nous voyons les propriétaires de sites WordPress sont aux prises. 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 diminution de vos temps de chargement globaux.

GTmetrix scores PageSpeed

GTmetrix scores PageSpeed

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.

Serve Scaled Images

Serve Scaled Images

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.

Inline Small CSS

Inline Small CSS

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 CSS sur Autoptimize

Inline CSS sur Autoptimize

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. Encore une fois, vous pouvez utiliser un plugin gratuit comme Autoptimize.

Inline Small JavaScript

Inline Small JavaScript

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.

Leverage Browser Caching

Leverage Browser Caching

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.

Defer Parsing of JavaScript

Defer Parsing of JavaScript

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.

gtmetrix minify css and javascript

Minify CSS and JavaScript

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.

Autoptimize minify CSS et JavaScript

Autoptimize minify CSS et JavaScript

Optimize Images

Selon HTTP Archive, en avril 2017, 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.

Optimiser les images

Optimiser les images

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.

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.

Minifier HTML

Minifier HTML

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

Optimisation automatique du code HTML

Optimisation automatique du 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.

Activer la compression GZIP

Activer la compression GZIP

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.

gtmetrix minimize redirects

Minimize redirects

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. Remarque : Les en-têtes de mise en cache HTTP sont automatiquement ajoutés sur tous les serveurs Kinsta.

Specify a Cache Validator

Specify a Cache Validator

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

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.

Specify a Vary: Accept-Encoding Header

Specify a Vary: Accept-Encoding Header

YSlow

GTmetrix a également utilisé YSlow pour donner un score à votre site web. Il y a plus de 15 recommandations. Nous essaierons de couvrir les plus courantes et les plus populaires avec lesquelles nous voyons les propriétaires de sites WordPress aux prises. Certaines d’entre elles ont déjà été couvertes dans les recommandations PageSpeed ci-dessus. 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 diminution de vos temps de chargement globaux.

GTmetrix scores YSlow

GTmetrix scores YSlow

Make Fewer HTTP Requests

C’est une sorte de bon sens, mais tout ce qui se charge sur votre site web, plugins, images, polices, etc. génère une requête HTTP. C’est l’une des raisons pour lesquelles vous ne voulez pas installer 100 plugins en une seule fois, car il est fort probable qu’ils appelleront des scripts CSS et JavaScript, ce qui générera à son tour des centaines de requêtes HTTP. Moins il y en a, mieux c’est.

Make Fewer HTTP Requests

Make Fewer HTTP Requests

Add Expires Headers

Selon cet article de Google Developers, HTTP Caching : Cache-Control Header a été défini dans le cadre de la spécification HTTP/1.1 et remplace les en-têtes précédents (dans ce cas l’en-tête Expires) utilisés pour définir les politiques de cache des réponses. Tous les navigateurs modernes supportent le Cache-Control, c’est donc tout ce dont vous avez besoin. Cependant, cela ne fera pas de mal si vous avez les deux, mais rappelez-vous qu’un seul sera utilisé. L’en-tête Expires utilise une date réelle, tandis que l’en-tête Cache-Control vous permet de spécifier un délai avant expiration. Rappelez-vous cependant que vous n’avez aucun contrôle sur les ressources d’un tiers. Remarque : Les en-têtes Expires sont automatiquement ajoutés sur tous les serveurs Kinsta.

Add Expires Headers

Add Expires Headers

Pour ajouter l’en-tête Expires dans Apache, ajoutez simplement le code suivant à votre fichier .htaccess.

## EXPIRES HEADER CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 7 days"

## EXPIRES HEADER CACHING ##

Pour ajouter les en-têtes Expires dans NGINX, ajoutez simplement le code suivant à votre fichier de configuration.

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 7d;
}

Use a Content Delivery Network (CDN)

C’est assez explicite. Nous vous recommandons toujours d’utiliser un CDN, surtout si vous avez des visiteurs du monde entier. Un CDN conserve une copie en cache de vos contenus sur des POPs situés plus près du visiteur, ce qui accélère le temps de chargement pour eux en réduisant la latence. Cloudflare et KeyCDN sont deux fournisseurs de CDN fortement recommandés que vous pouvez facilement utiliser avec votre site WordPress.

Use a Content Delivery Network (CDN)

Use a Content Delivery Network (CDN)

Use Cookie-Free Domains

En général, lorsque vous diffusez du contenu tel que des images, JavaScript, CSS, il n’y a aucune raison pour qu’un cookie HTTP l’accompagne, car il crée des frais supplémentaires. Une fois que le serveur définit un cookie pour un domaine particulier, toutes les requêtes HTTP ultérieures pour ce domaine doivent inclure le cookie. Cet avertissement est généralement affiché sur les sites ayant un grand nombre de requêtes. Parmi les moyens d’y remédier, citons l’utilisation d’un fournisseur CDN qui supprime les cookies ou la configuration d’un domaine et/ou d’un sous-domaine séparé pour servir les cookies. Jetez un coup d’œil à notre article détaillé sur la façon de corriger la recommandation Use Cookie-Free Domains.

Use Cookie-Free Domains

Use Cookie-Free Domains

Reduce DNS Lookups

Chaque domaine que vous interrogez génère une recherche DNS la première fois jusqu’à ce qu’il soit mis en cache. Supposons, par exemple, que vous chargez 10 ressources à partir de votre CDN, 2 à partir de polices Web Google et 5 à partir d’un seul annonceur tiers. Cela donnerait lieu à 3 recherches DNS car chacun de ces groupes interroge un seul domaine. Les recherches DNS peuvent rapidement devenir incontrôlables lorsque vous commencez à ajouter des services externes. Un exemple d’une façon d’aider à réduire cela est d’héberger les polices Google sur votre propre CDN, qui à son tour se débarrasse des recherches DNS vers Google.

Vous avez des problèmes de temps d'indisponibilité et de WordPress ? Kinsta est la solution d'hébergement conçue pour vous faire gagner du temps ! Découvrez nos fonctionnalités
Reduce DNS Lookups

Reduce DNS Lookups

Make Favicon Small and Cacheable

Un favicon, ou favicon.ico, est un petit fichier d’icône d’image qui est associé à votre site Web et apparaît dans la barre d’adresse de votre navigateur (ou lorsque vous le définissez comme signet). Même si les favicons sont très petites, vous devriez toujours les optimiser. Chaque petit octet peu aide. KeyCDN a un tutoriel très complet sur la façon de rendre votre favicon petit et le mettre en cache.

Make Favicon Small and Cacheable

Make Favicon Small and Cacheable

Configure Entity Tags (ETags)

L’en-tête ETag est très similaire à l’ en-tête last-modified. Il sert également à valider le cache d’un fichier. Si vous utilisez Apache 2.4 ou supérieur, l’en-tête ETag est déjà automatiquement ajouté en utilisant la directive FileETag. Et en ce qui concerne NGINX, depuis 2016, l’en-tête ETag est activé par défaut. Si vous voyez cet avertissement, nous vous recommandons de contacter votre hébergeur.

Configure Entity Tags (ETags)

Configure Entity Tags (ETags)

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.

Graphique Waterfall GTmetrix

Graphique Waterfall GTmetrix

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.

obstruction

obstruction

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.

premier-dns-gtmetrix

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.

Deuxième recherche DNS

Deuxième recherche DNS

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-prefetchpreconnectprefetch 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.

Connexion

Connexion

Sending (Rouge)

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

Envoi

Envoi

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.

en-attente

En attente

Some easy ways to decrease your TTFB is to ensure your host has proper caching in place and utilizing a CDN. Check out our in-depth post on all the ways to reduce TTFB on your WordPress 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.

Réception

Réception

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.
gtmetrix event timing

Event timing

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.

En-tête de réponse HTTP dans GTmetrix

En-tête de réponse HTTP dans GTmetrix

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.

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.

gtmetrix history

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.

Comparer les rapports dans GTmetrix

Comparer les rapports dans GTmetrix

Étude de cas de configuration de domaine

Si vous êtes arrivé aussi bas dans notre analyse de GTmetrix en profondeur, vous allez vous régaler. C’est toujours ennuyeux de voir des gens partager des conseils et des études de cas, mais ne pas dire comment ils en sont arrivés là. Voici donc ci-dessous notre configuration exacte pour l’étude de cas du domaine utilisé ci-dessus ! N’hésitez pas à le reproduire.

Architecture

  • Le domaine de l’étude de cas (perfmatters.io) est hébergé chez Kinsta sur la plateforme Google Cloud aux Etats-Unis (emplacement central). Kinsta utilise HTTP/2, NGINX, MariaDB, qui contribuent tous aux temps de chargement rapides.
  • Le site utilise le HHVM. HHVM et PHP 7 sont tous les deux connus pour leurs performances impressionnantes. Kinsta vous permet de passer à l’hébergement HHVM ou de revenir à PHP d’une simple pression sur un bouton.
  • Le site n’utilise aucun plugin 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 c’est plus rapide !

Plugins WordPress

Et voici une liste des plugins utilisés sur le site WordPress.

  • Le plugin CDN Enabler gratuit est utilisé pour déployer KeyCDN.
  • Le plugin CAOS gratuit est utilisé pour synchroniser Google Analytics localement.
  • Le plugin premium perfmatters est utilisé pour se débarrasser des requêtes HTTP inutiles et désactiver des choses comme les Emojis et les Embeds.
  • Le plugin premium Gonzalez est utilisé pour désactiver le chargement de certains scripts.
  • Le plugin premium Imagify est utilisé 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 !