Plus il y a de requêtes HTTP sur votre site, plus le chargement sera lent. Ainsi, si vous pouvez réduire le nombre de requêtes HTTP et optimiser leur chargement, vous pouvez améliorer les performances de votre site.
Dans cet article, nous vous expliquerons tout ce que vous devez savoir sur la manière de réduire le nombre de requêtes HTTP sur WordPress.
Nous commencerons par une introduction de base sur les requêtes HTTP, pourquoi elles sont importantes et comment analyser les requêtes de votre site WordPress.
Ensuite, nous partagerons quelques conseils et stratégies que vous pouvez mettre en œuvre pour réduire les requêtes de votre site. En plus de vous aider avec le message « Diminuer les requêtes HTTP » dans GTmetrix, ces stratégies vous aideront également avec le message « Éviter l’enchaînement des requêtes critiques » dans Google PageSpeed Insights.
Vous préférez regarder la version vidéo ?
Que sont les requêtes HTTP ?
Lorsque vous construisez un site web, il comporte de nombreuses parties différentes. Vous avez les différents fichiers d’images que vous utilisez sur une page, les feuilles de style CSS qui contrôlent l’apparence du contenu, les fichiers JavaScript qui ajoutent toutes ces fonctionnalités intéressantes, etc.
Lorsqu’une personne parcourt votre site web, son navigateur doit pouvoir télécharger toutes les ressources nécessaires à cette page à partir de votre serveur. Pour ce faire, il adresse des requêtes HTTP au serveur pour chaque ressource individuelle.
Par exemple, il pourrait dire : « hé serveur, j’ai besoin de ce fichier coolimage.png » et « hé serveur, j’ai aussi besoin de la feuille de style CSS pour cette extension de formulaire de contact ». Le serveur répond alors à ces requêtes avec les fichiers en question.
Une fois que le navigateur web a reçu ces fichiers, il peut assembler la page web pour votre visiteur. Bien sûr, c’est un peu plus compliqué que cela, mais c’est l’idée de base.
HTTP, abréviation de Hypertext Transfer Protocol, est le moyen par lequel ces ordinateurs (le navigateur du visiteur et votre serveur web) communiquent.
Une chose importante à comprendre est que chaque élément séparé est une requête HTTP distincte. Par exemple, si vous avez cinq fichiers d’images sur une page web, le navigateur doit effectuer cinq requêtes HTTP distinctes, une pour chaque image.
De même, si vous utilisez quatre extensions WordPress et que chaque extension ajoute sa propre feuille de style CSS, le navigateur du visiteur devra effectuer quatre requêtes HTTP distinctes, une pour la feuille de style de chaque extension.
Pourquoi est-il important de réduire les requêtes HTTP ?
En général, plus votre site web reçoit de requêtes HTTP, plus son chargement est lent. Si vous voulez que votre site se charge plus rapidement, vous devez donc optimiser et réduire le nombre de requêtes HTTP dont votre site a besoin.
Bien que cela soit un peu trop simplifié, l’idée de base est que le navigateur web n’affichera le site à votre visiteur qu’une fois qu’il aura fini de télécharger toutes les requêtes HTTP (bien qu’il existe certaines tactiques pour dire au navigateur qu’il peut attendre pour certains fichiers).
Ainsi, si un site web doit faire 70 requêtes HTTP avant de pouvoir afficher la page, cela va prendre plus de temps que s’il devait faire 40 requêtes HTTP.
En outre, certaines requêtes HTTP « bloquent » d’autres requêtes HTTP, ce qui signifie que le navigateur ne peut pas commencer à télécharger certaines requêtes HTTP avant d’avoir terminé le téléchargement des requêtes HTTP précédentes.
L’essentiel est que lorsque vous faites moins de requêtes HTTP, vous accélérez le chargement de votre site web.
Comment voir et analyser les requêtes HTTP de votre site
Vous avez appris ci-dessus que, toutes choses étant égales par ailleurs, la réduction du nombre de requêtes HTTP accélérera votre site. Cependant, toutes les requêtes HTTP ne sont pas toujours « égales ». Certaines requêtes HTTP sont plus grosses que d’autres. Certaines sont plus lentes que d’autres.
Par exemple, la requête d’un énorme fichier image de 3 Mo prendra beaucoup plus de temps que la requête d’une minuscule image de 20 Ko.
Si vous souhaitez apporter la plus grande amélioration à votre site, le fait de vous concentrer d’abord sur les grosses requêtes HTTP à chargement lent vous permettra d’obtenir le meilleur retour sur investissement.
Pour analyser les requêtes HTTP de votre site, vous pouvez utiliser ce que l’on appelle l’analyse waterfall.
La plupart des outils de test de vitesse offrent cette possibilité, mais les interfaces de GTMetrix et de Pingdom sont très pratiques. Vous pouvez également utiliser les outils de développement de votre navigateur. Cependant, nous utiliserons GTmetrix pour nos captures d’écran.
Une fois que vous avez saisi votre URL, vous verrez un cadre de résumé basique en haut. Cela indique le nombre de requêtes HTTP dont dispose votre site, mais n’analyse pas les requêtes individuelles :
Pour analyser vos requêtes individuelles, allez sur l’onglet Waterfall ci-dessous.
Vous trouverez ici la liste de chaque requête HTTP sur votre site, ainsi que des informations sur le temps de téléchargement de cette requête HTTP :
Vous pouvez constater que toutes les requêtes HTTP ne sont pas égales. Par exemple, l’image de 839,3 Ko prend 1,12s alors que l’image de 57,6 Ko ne prend que 87,5 ms :
Vous pouvez également trouver des requêtes HTTP provenant des différentes extensions WordPress que vous utilisez en recherchant le nom du dossier de cette extension sur votre serveur. Par exemple, vous pouvez voir que WooCommerce ajoute sept de ses propres requêtes HTTP :
De cette façon, vous pouvez voir si les extensions que vous utilisez ajoutent beaucoup de requêtes HTTP (en particulier des requêtes qui ralentissent le site).
Comment optimiser et réduire le nombre de requêtes HTTP dans WordPress
À un niveau élevé, il existe deux grandes stratégies pour réduire le nombre de requêtes HTTP :
- Supprimer les requêtes HTTP. Si possible, vous devez supprimer complètement toute requête HTTP inutile. Par exemple, si vous avez une extension qui n’ajoute aucune valeur à votre site et qui charge ses propres CSS et JavaScript, il suffit de la supprimer complètement pour vous débarrasser de toutes ses requêtes HTTP.
- Combiner les requêtes HTTP. Si vous avez des requêtes HTTP que vous devez absolument charger, vous pouvez les combiner en un seul fichier. Par exemple, au lieu de six petits fichiers CSS, vous pouvez les combiner en un seul fichier CSS plus volumineux, qui se chargera quand même plus rapidement car le navigateur doit effectuer moins de requêtes (ce qui n’est pas toujours le cas avec HTTP/2, dont nous parlerons plus loin).
Nous commencerons par les tactiques qui visent à supprimer les requêtes HTTP, puis nous examinerons comment combiner les requêtes HTTP restantes. L’idée de base est de supprimer ce que vous pouvez et de combiner ce qui reste.
1. Supprimer les extensions WordPress inutiles
Pour commencer, vous voudrez utiliser l’analyse waterfall pour extraire toutes les requêtes de vos extensions. Vous pouvez le faire en recherchant des « extensions », qui extrairont toutes les requêtes HTTP provenant du répertoire wp-content/plugins.
Si vous survolez le nom du fichier, vous pouvez voir de quelle extension il provient. Par exemple, vous pouvez voir ici une requête de l’extension de diaporama que vous pourriez utiliser.
En creusant un peu plus, on découvre que Slider Revolution ajoute trois de ses propres requêtes HTTP, même si cette page de test ne contient aucun diaporama :
Si vous utilisez Slider Revolution pour un diaporama important, alors vous devez peut-être le garder. Mais si vous l’avez installé pour le tester, puis que vous avez ensuite retiré le diaporama, et que vous ne l’utilisez plus vraiment… alors vous devriez le retirer pour vous débarrasser de ces requêtes HTTP.
En gros, vous voulez parcourir toute la liste et vous demander si chaque extension apporte vraiment une valeur ajoutée à votre site. Si une extension ne le fait pas (mais ajoute des requêtes HTTP), il vaut mieux la supprimer.
2. Remplacer les extensions lourdes par des extensions plus légères
Une fois que vous avez éliminé les extensions inutiles, l’étape suivante consiste à voir si vous pouvez remplacer les extensions que vous utilisez par des alternatives plus légères.
Par exemple, disons que vous voulez ajouter des boutons de partage social à votre site. C’est une bonne fonctionnalité, mais certaines extensions de partage social peuvent ajouter beaucoup de requêtes HTTP.
Par exemple, l’extension populaire AddThis ajoute six de ses propres requêtes HTTP (y compris certaines requêtes externes) :
Vous pourriez enlever une grande partie de ce surpoids en utilisant une alternative plus optimisée telle que NovaShare ou Grow by MediaVine.
3. Chargement conditionnel de scripts qui ne sont pas nécessaires pour l’ensemble du site
À ce stade, vous devriez avoir supprimé toutes les extensions dont vous n’avez pas besoin sur votre site. Cependant, il existe une autre catégorie d’extensions qui peuvent poser des problèmes : les extensions qui ne sont nécessaires que pour certaines parties de votre site mais qui chargent leurs scripts partout.
Par exemple, prenez l’extension populaire Contact Form 7. Vous n’aurez probablement besoin de cette extension que sur quelques pages (par exemple, votre page « Nous contacter »). Cependant, Contact Form 7 charge ses scripts sur chaque page de votre site. Ainsi, par exemple, Contact Form 7 continue d’ajouter des requêtes HTTP à vos articles de blog même si ces derniers ne comportent pas de formulaire de contact.
Un autre exemple pourrait être WooCommerce si vous ne l’utilisez qu’en tant que processeur de paiement. WooCommerce chargera toujours ses scripts partout, même si vous n’en avez vraiment besoin que sur les pages de panier et de paiement pour ce cas d’utilisation.
Une tactique avancée consiste à ne charger les extensions que là où elles sont nécessaires. Par exemple, vous pourriez laisser Contact Form 7 se charger sur votre page « Nous contacter », mais le désactiver partout ailleurs.
Si vous n’êtes pas un développeur, vous pouvez utiliser des extensions comme Asset CleanUp ou Perfmatters pour le faire sans code. Avec Perfmatters, vous devez d’abord activer le gestionnaire de script. Ensuite, vous pouvez ouvrir le gestionnaire de script pour voir tous les scripts qui se chargent sur une page et désactiver ceux qui ne sont pas nécessaires :
Faites attention, car vous pourriez causer des problèmes si vous désactivez accidentellement un script qui est vraiment nécessaire. C’est une tactique utile, mais aussi une tactique avancée.
Si vous ne vous sentez pas en confiance, vous pouvez sauter cette étape ou engager un développeur pour vous aider.
4. Supprimer les images inutiles (et optimiser les autres)
Bien utilisées, les images rendent votre site web plus convivial et plus attrayant. Elles apportent une valeur ajoutée à votre site.
Toutefois, chaque image de votre site constitue une requête HTTP distincte. Donc si vous avez des images qui n’apportent pas de valeur ajoutée, il est préférable de les supprimer pour éliminer ces requêtes HTTP.
Par exemple, ce GIF drôle en vaut-il la peine ? C’est possible… mais il est aussi possible que non – vous devez penser à des compromis chaque fois que vous ajoutez des images à votre contenu.
Enfin, assurez-vous de redimensionner et de compresser les images qui restent. Bien que cela ne réduise pas le nombre de requêtes HTTP en soi, cela réduira la taille de ces requêtes HTTP, ce qui les rendra plus rapides à charger.
5. Utiliser le chargement différé pour les images et les vidéos
Avec un chargement différé, votre site attendra de charger les images, vidéos et iframes en dessous du pli jusqu’à ce qu’un utilisateur commence le défilement vers le bas.
Comme ces ressources ne se chargent pas immédiatement, il n’est pas nécessaire de faire une requête HTTP pour le chargement initial de la page.
Depuis WordPress 5.5, WordPress inclut désormais le chargement différé en natif pour les images utilisant l’attribut de chargement HTML. Pour d’autres façons de mettre en œuvre le chargement différé (y compris pour les fichiers vidéo), vous pouvez consulter notre guide complet du chargement différé de WordPress.
6. Limiter l’utilisation des polices personnalisées et/ou utiliser les polices système (Idem pour les polices d’icônes)
Les polices personnalisées sont idéales pour améliorer la conception et l’expérience utilisateur sur votre site. Cependant, vous devez faire attention à la façon dont vous les utilisez car chaque type de police personnalisée que vous utilisez ajoute une autre requête HTTP.
Si vous comptez utiliser des polices personnalisées, veillez à vous en tenir à un petit nombre. Avez-vous vraiment besoin d’une police différente pour le titre et le corps de votre article ? Ou pourriez-vous utiliser la même police ? Avez-vous vraiment besoin des cinq graisses de police ? Ou pouvez-vous en choisir deux ?
Il en va de même pour les polices d’icônes telles que Font Awesome et IcoMoon. Les polices d’icônes peuvent être utiles, mais vous n’avez probablement pas besoin de charger plusieurs bibliothèques de polices d’icônes. Il est préférable de choisir une seule bibliothèque de polices d’icônes et de s’en tenir à cela.
Enfin, si vous voulez aller plus loin et éliminer complètement les requêtes HTTP liées aux polices de votre site, vous pouvez envisager d’utiliser une pile de polices système. Cela vous donnera moins de souplesse en termes de conception, mais cela signifie également que vos visiteurs n’auront pas à charger de fichiers de polices pour rendre votre site.
(Lecture suggérée : Comment changer les polices de caractères dans WordPress).
7. Désactiver les émois de WordPress
Par défaut, WordPress ajoute sa propre requête HTTP pour les emojis. Bien qu’il ne s’agisse que d’une seule requête HTTP de 5,1 Ko, ce fichier a longtemps été une épine dans le pied des fans de performances de WordPress. Ici, chez Kinsta, nous aimons les performances de WordPress, c’est pourquoi nous avons un guide complet sur la façon de désactiver les émojis de WordPress.
L’option la plus simple est d’installer et d’activer l’extension gratuite Disable Emojis (conforme au RGPD). Cependant, vous pouvez lire notre guide complet pour d’autres options.
Une fois que vous aurez fait cela, votre nombre de requêtes HTTP diminuera d’une unité et vous pourrez toujours utiliser les emojis 😃
8. Réduire/éliminer les requêtes HTTP tierces
Jusqu’à présent, nous nous sommes principalement concentrés sur la réduction des requêtes HTTP de fichiers sur le serveur de votre site WordPress. Cependant, les navigateurs de vos visiteurs peuvent également avoir besoin de demander des fichiers à des serveurs tiers.
Ces requêtes peuvent être d’autant plus gênantes que votre site est à la merci de la vitesse de ces serveurs tiers.
Quelques exemples :
- Google Analytics – le script de suivi est hébergé sur les serveurs de Google, mais les navigateurs des visiteurs doivent encore télécharger ce fichier.
- Vidéos YouTube intégrées – vous verrez beaucoup de requêtes HTTP vers les serveurs de YouTube.
- Services publicitaires tiers – vous verrez des tonnes de requêtes tierces liées à la diffusion de vos publicités.
- Google Fonts (sur le CDN de Google) – vous verrez des requêtes tierces des serveurs de Google pour charger vos fichiers de police.
Vous pouvez appliquer bon nombre des mêmes tactiques vue plus haut à ces requêtes HTTP tierces.
Par exemple, si une extension ajoute ses propres requêtes tierces (comme le fait l’extension AddThis citée plus tôt), vous pouvez la supprimer et utiliser quelque chose de plus optimisé.
Pour les vidéos YouTube, vous pouvez les charger de manière différée et remplacer le chargement initial de la page par une miniature d’image. Cela retardera l’ajout de ces requêtes HTTP jusqu’à ce qu’un visiteur souhaite lire la vidéo.
Pour les scripts tiers qui sont nécessaires, comme Google Analytics ou Facebook Pixel, vous pouvez essayer d’héberger ces scripts localement.
WP Rocket dispose de modules intégrés pour héberger localement Google Analytics et Facebook Pixel ou vous pouvez utiliser une extension comme CAOS (Complete Analytics Optimization Suite).
Nous avons également quelques guides qui pourraient vous aider :
9. Combiner des images avec des Sprites CSS
À ce stade, vous devriez, espérons-le, être en mesure de faire moins de requêtes HTTP depuis votre site. Il est maintenant temps de savoir comment combiner les requêtes HTTP qui restent, en commençant par les images.
Une autre façon d’optimiser les images de votre site est de combiner des images séparées dans un seul fichier image. Vous pouvez ensuite utiliser le CSS pour n’afficher qu’une partie de ce fichier d’image, si nécessaire. C’est une tactique appelée Sprites CSS.
Les sprites CSS fonctionnent mieux pour les images décoratives comme les variations de logo ou les icônes. Vous ne devez pas utiliser de sprites CSS pour les images informatives (comme les images dans le corps d’un article de blog) car il y a deux grands inconvénients :
- SEO – parce que vous combinez des images dans un seul fichier d’images, vous ne pouvez pas classer les images individuelles dans Google Search.
- Accessibilité – comme vous ne pouvez pas ajouter de texte alternatif aux images, les personnes possédant un lecteur d’écran ne pourront pas comprendre les images chargées avec des sprites CSS (bien qu’il existe certaines tactiques pour régler ce problème).
Si vous êtes toujours confus à ce sujet, voici un exemple de fichier sprite CSS d’Amazon – vous pouvez voir comment il comprend un tas de variations de logos, ainsi que quelques icônes. Amazon utilise le CSS pour s’assurer que seule la « portion » pertinente de ce fichier image s’affiche à chaque endroit :
Malheureusement, il n’y a pas d’extension WordPress « configurez-la et oubliez-la » pour les sprites CSS. Cependant, vous pouvez trouver des outils pour vous aider, comme cet outil pour les sprites CSS :
- Téléversez les images que vous souhaitez combiner à l’outil.
- L’outil vous donnera alors un fichier d’image combiné, ainsi qu’un code CSS pour chaque image que vous avez téléversé.
- Téléversez le fichier image combiné sur votre site WordPress.
- Utilisez le code CSS pour afficher l’image dans votre contenu. Le code CSS fourni sélectionnera automatiquement uniquement la partie appropriée du fichier image combiné.
10. Combiner les fichiers CSS et JavaScript
Entre votre thème WordPress et vos extensions, votre site va probablement charger plusieurs feuilles de style CSS et fichiers JavaScript, ce qui signifie plusieurs requêtes HTTP juste pour que le navigateur télécharge les CSS et JS dont il a besoin pour rendre la page.
Pour réduire toutes ces requêtes séparées, vous pouvez combiner ces différents fichiers/feuilles de style en un seul fichier/feuille de style. Cette opération est appelée combinaison de fichiers ou concaténation de fichiers, selon l’outil que vous utilisez.
De nombreuses extensions WordPress de mise en cache comprennent des fonctions permettant de combiner des fichiers CSS et JavaScript. Par exemple, WP Rocket, que vous pouvez utiliser chez Kinsta, vous permet d’activer les deux en quelques clics.
Allez à l’onglet Optimisation de fichier dans les réglages de WP Rocket. Ensuite, activez la minification et combinez les fichiers :
Pour un aperçu plus détaillé, consultez notre guide complet de WP Rocket.
Vous pouvez également utiliser Autoptimize pour combiner des fichiers CSS et JavaScript. Pour combiner des fichiers, rendez-vous sur la page Réglages → Autoptimize et choisissez les options pour :
- Agréger des fichiers JS
- Agréger des fichiers CSS
Pour un aperçu plus détaillé, consultez notre tutoriel complet sur l’optimisation automatique.
Les avantages de la combinaison de fichiers sont moins évidents avec HTTP/2, qui est ce que votre site utilise si vous êtes hébergé chez Kinsta. HTTP/2 est conçu pour être plus efficace dans le transfert de plusieurs petits fichiers, ce qui signifie qu’il y a moins de différence entre un gros fichier CSS/JS et plusieurs petits fichiers.
En fait, si vous êtes hébergé chez Kinsta, vous n’aurez peut-être pas besoin de faire cette étape pour améliorer le temps de chargement de vos pages. En effet, les clients de Kinsta peuvent accéder à la fonction de minification du code directement dans leur tableau de bord MyKinsta. Cela contribuera à l’optimisation globale en permettant aux clients d’activer la minification automatique de CSS et JavaScript d’un simple clic.
Nous vous recommandons de continuer à le tester car il peut encore être bénéfique pour certains sites, mais vous pourriez également ne pas remarquer de différence dans les temps de chargement réels des pages.
Cependant, de nombreux outils de test de performance comme GTmetrix ne reconnaissent toujours pas HTTP/2, de sorte que GTmetrix pourrait encore afficher le message « Diminuer les requêtes HTPP » et réduire votre score. N’oubliez pas, cependant – les scores n’ont pas autant d’importance que les temps de chargement des pages réelles.
11. Différer le JavaScript de blocage du rendu
Le report de JavaScript bloquant le rendu n’élimine pas les requêtes HTTP en soi. Cependant, il optimise leur chargement, ce qui peut avoir le même effet sur les temps de chargement perçus de votre site.
Il peut également aider à éviter l’enchaînement des requêtes critiques dans Google PageSpeed Insights/Lighthouse.
En différant les requêtes pour certains fichiers ou en les chargeant de manière asynchrone, vous pouvez éviter que certaines ressources non importantes ne « bloquent » les ressources nécessaires pour charger rapidement la partie visible de votre site.
Pour en savoir plus sur les raisons de cette situation, vous pouvez lire notre guide sur la compréhension du chemin critique de rendu d’une page web.
Ensuite, vous pouvez suivre notre guide détaillé pour éliminer les ressources qui bloquent le rendu sur WordPress.
Les meilleures extensions WordPress pour réduire le nombre de requêtes HTTP
Si vous cherchez des extensions WordPress « tout en un » pour faire moins de requêtes HTTP, nous vous recommandons deux des extensions du tutoriel ci-dessus :
Bien que vous deviez toujours évaluer manuellement votre thème et vos extensions pour voir s’ils ne font pas trop de requêtes HTTP, ces deux extensions peuvent vous aider à optimiser tout ce qui reste sur votre site une fois que vous avez fait votre nettoyage.
Résumé
Chaque ressource distincte de votre site ajoute une requête HTTP. Une image est une requête HTTP, une feuille de style CSS est une requête HTTP, un fichier de police est une requête HTTP, etc.
Si vous utilisez WordPress, votre thème ajoutera certainement ses propres requêtes HTTP et de nombreuses extensions ajoutent également leurs propres requêtes HTTP. Vous aurez également des requêtes HTTP provenant de toutes les images que vous utilisez et des scripts tiers que vous ajoutez (tels que des outils d’analyse).
Des requêtes HTTP plus nombreuses et/ou plus importantes entraîneront un ralentissement du site web. C’est pourquoi vous verrez souvent des messages tels que « Diminuez les requêtes HTTP » ou « Optimisez les requêtes HTTP » ou « Évitez d’enchaîner les requêtes critiques » lorsque vous utilisez des outils de test de vitesse comme GTmetrix ou PageSpeed Insights.
Pour réduire le nombre de requêtes HTTP sur votre site, vous pouvez suivre les étapes que nous avons détaillées ci-dessus.
Vous avez encore des questions sur la manière de faire moins de requêtes HTTP dans WordPress ? Faites-le nous savoir dans les commentaires !
Rédacteur en chef chez Kinsta et consultant en marketing de contenu pour les développeurs de plugins WordPress. Connectez-vous avec Matteo sur Twitter.
Laisser un commentaire