Guide complet pour réduire le nombre de requêtes HTTP sur WordPress

L'optimisation de la vitesse et des performances des sites web WordPress est importante pour attirer et retenir les visiteurs. Chaque développeur web et propriétaire de site devrait donner la priorité à l'optimisation des performances, car elle améliore non seulement l'expérience de l'utilisateur, mais aussi le classement dans les moteurs de recherche.

Lorsque vous effectuez des audits de performance de votre site web WordPress à l'aide d'outils en ligne, vous avez peut-être remarqué que ces outils de test vous conseillent de "faire moins de requêtes HTTP" ou de "réduire le nombre de requêtes HTTP".

Ce guide explique ce que sont les requêtes HTTP, pourquoi elles sont importantes et comment vous pouvez minimiser les requêtes effectuées par votre site WordPress.

Qu'est-ce qu'une requête HTTP ?

La partie frontale d'un site web est composée de divers éléments tels que HTML, CSS, JavaScript, images et vidéos.

Ces éléments travaillent ensemble pour créer une page web. Chaque élément envoie une ou plusieurs requêtes au serveur d'hébergement.

Lorsque vous tapez le nom d'un site web dans votre navigateur, voici ce qui se passe :

1. Votre navigateur contacte le serveur d'hébergement de la page web et demande un fichier contenant le contenu de la page, par exemple une image.
2. Le serveur refuse la demande ou envoie le fichier.
3. Si la demande est acceptée, votre navigateur commence à afficher la page.
4. Si un contenu supplémentaire, tel qu'un style CSS, est nécessaire pour compléter la page, votre navigateur envoie d'autres demandes.
5. Ce processus se poursuit jusqu'à ce que toutes les requêtes nécessaires soient transmises par votre serveur d'hébergement au navigateur du visiteur et que la page soit entièrement chargée.

Nombre de connexions : HTTP vs HTTP2 vs HTTP3

HTTP : signifie Hypertext Transfer Protocol, un protocole de couche d'application utilisé pour transférer des informations entre un serveur web et un navigateur. 

Il est essentiel de connaître le nombre maximum de connexions que votre serveur d'hébergement peut gérer simultanément pour optimiser les performances du site web et garantir une expérience utilisateur fluide, en particulier pendant les périodes de trafic intense.

HTTP/1.1 est la version la plus ancienne et est encore largement utilisée. Il fonctionne en ouvrant une nouvelle connexion pour chaque requête, l'une après l'autre ; si une requête n'est pas traitée, les connexions suivantes sont bloquées et échouent. Ce protocole peut être inefficace, en particulier pour les sites web contenant beaucoup d'images et d'autres ressources.

HTTP/2 et HTTP/3: avec l'introduction de ces protocoles plus récents, les navigateurs peuvent utiliser plus efficacement les connexions ; grâce à des fonctionnalités telles que le multiplexage, ils peuvent envoyer plusieurs flux de données à la fois sans bloquer d'autres ressources. Ils peuvent encore avoir des limites, mais elles sont généralement plus élevées que celles du protocole HTTP/1.1.

Spécifications	HTTP/1.1	HTTP/2	HTTP/3
Protocole	TCP	TCP	QUIC
Multiplexage	Non	Oui	Oui
Compression de l'en-tête	Oui	Oui	Oui
Poussée du serveur	Non	Oui	Oui
Temps de latence	Haut	Plus bas	Plus bas
Performance	Bon	Mieux	Le meilleur

Comme vous pouvez le constater, HTTP/2 et HTTP/3 présentent des améliorations significatives par rapport à HTTP/1.1. Vous devriez donc envisager un hébergement WordPress qui supporte au moins HTTP/2.

Pourquoi faire moins de requêtes HTTP avec WordPress ?

Lorsqu'il y a beaucoup de requêtes HTTP, les pages se chargent lentement. Les pages lentes incitent les internautes à quitter votre site et nuisent à votre classement dans les moteurs de recherche.

Même un petit retard dans le temps de chargement des pages, de 2 à 5 secondes, peut avoir un impact négatif sur le taux de rebond.

Ainsi, en réduisant le nombre de requêtes, vous réduisez la taille de la page et, par conséquent, vous améliorez la situation pour vos visiteurs. Votre site se chargera plus rapidement, fonctionnera de manière plus fluide et sera plus performant.

Connaître le nombre de requêtes de votre site WordPress

Vous pouvez utiliser divers outils en ligne pour connaître le nombre de requêtes que reçoit votre page web et déterminer les améliorations à apporter. Parmi les outils les plus populaires, citons

• Outils de développement d'un navigateur
• PageSpeed Insights
• GTmetrix
• WebPageTest
• Test de vitesse de site web Pingdom

Voyons comment vous pouvez utiliser les outils de développement du navigateur.

Chrome peut nous aider à voir combien de requêtes sont effectuées, quelle est leur taille et combien de temps il faut pour charger une page web.

Mais n'oubliez pas que les extensions Chrome peuvent ralentir le processus de chargement. Il est préférable de tester en mode "invité" pour obtenir de meilleurs résultats.

Voici comment procéder :

1. Ouvrir Chrome.
2. En haut à droite, cliquez sur l'icône de votre profil, puis sélectionnez "Invité".
3. Cliquez avec le bouton droit de la souris sur l'écran vide, choisissez "Inspecter", allez dans l'onglet "Réseau" et visitez votre site web.

Remarque: vous pouvez actualiser la page en appuyant sur "F5" pour afficher à nouveau les résultats.

Types de requêtes HTTP dans WordPress

Dans WordPress, il existe différents types de demandes, tels que :

• HTML
• JS (JavaScript)
• CSS
• Polices web
• Images
• Vidéos
• JSON

En comprenant les différents types de requêtes HTTP effectuées par votre site web, vous pouvez mieux l'optimiser en termes de performances. Par exemple, si vous avez beaucoup de fichiers CSS et JS, vous pouvez les regrouper en un seul fichier afin de réduire le nombre de requêtes HTTP.

Combien de requêtes HTTP devraient être ?

Certaines études populaires suggèrent de maintenir le nombre de requêtes HTTP en dessous de 50, avec des performances exceptionnelles en dessous de 25 requêtes.

Bien que ces demandes soient nécessaires, il est essentiel d'en réduire le nombre sans sacrifier l'expérience de l'utilisateur.
Actuellement, le nombre moyen de demandes par page est d'environ 70, ce qui indique qu'il y a une marge d'amélioration.

Comment réduire le nombre de requêtes dans WordPress ?

Idéalement, il y a deux façons de procéder. Il faut soit "supprimer", soit "combiner"lesrequêtes HTTP. Voici comment procéder :

• Combiner des fichiers JS et CSS dans votre site web
• Se débarrasser des plugins et des thèmes dont vous n'avez pas besoin
• Ne charger les images que lorsque les visiteurs sont sur le point de les voir ; c'est ce qu'on appelle le chargement paresseux.
• Retarder l'exécution de certains scripts, tels que Google Analytics, Meta Pixel, Clarity, etc., jusqu'à ce que le reste de la page soit chargé.
• Utilisez la mise en cache d'objets pour réduire le nombre de requêtes HTTP au niveau de la base de données.

Ces astuces permettent de réduire le nombre de requêtes, de sorte que votre site se charge plus rapidement et fonctionne mieux.

Nous allons nous plonger dans les techniques détaillées permettant de réduire facilement le nombre de requêtes HTTP.

1. Utiliser un plugin de mise en cache ou de performance

La manière la plus simple de réduire le nombre de requêtes HTTP dans WordPress est d'utiliser des plugins de mise en cache ou de performance. Ces plugins sont conçus pour rendre votre site plus rapide en utilisant différentes méthodes pour réduire les requêtes HTTP.

En activant diverses méthodes de mise en cache, les requêtes fréquemment répétées sont mises en cache par les navigateurs des visiteurs ou par votre serveur. Ces demandes sont servies par le cache, ce qui réduit le nombre de demandes et permet d'économiser votre bande passante et les ressources de votre serveur. 

Parmi les plugins les plus populaires, citons

• WP Rocket
• Perfmatters
• Nettoyage des actifs
• Cache de LiteSpeed
• Autoptimisation de
• FlyingPress
• W3Total Cache

Et la liste est encore longue.

2. CSS Minify et Combine

La minimisation des fichiers CSS consiste à réduire la taille du fichier .css en supprimant les espaces et les commentaires supplémentaires.

La combinaison de CSS consiste à regrouper tous les fichiers CSS dans un seul et même fichier. Ainsi, au lieu de charger 10 fichiers différents, vous n'en chargez qu'un seul. Cela permet de réduire le nombre de fichiers CSS qu'un navigateur doit appeler lorsqu'il sert votre page.

Mais parfois, toutes les feuilles de style CSS ne sont pas nécessaires sur chaque page. C'est là qu'intervient la fonction "Remove Unused CSS". Vous pouvez utiliser des plugins comme "WP Rocket", "Perfmatters" ou "Asset CleanUp" pour résoudre ce problème.

3. JS Minify et Combine

Tout comme pour les CSS, vous pouvez également réduire la taille et le nombre de vos fichiers JavaScript en les minifiant et en les combinant. Cela signifie que vous supprimez les éléments superflus et que vous placez tout votre JavaScript dans un seul fichier.

Mais attention ! Parfois, lorsque vous combinez du JavaScript, il se peut que cela ne fonctionne pas correctement. Il faut donc toujours revérifier pour s'assurer que tout fonctionne comme il se doit.

4. Supprimer les CSS et JS inutilisés

Si vous souhaitez vous débarrasser des CSS et JavaScript que vous n'utilisez pas sur votre site ou une page web, des plugins tels que "WP Rocket" et "Perfmatters" peuvent vous aider en supprimant automatiquement les CSS qui ne sont pas nécessaires.

Une autre option est le plugin "Asset CleanUp". Il vous montre tous les fichiers et actifs qui se chargent lorsque quelqu'un visite une page de votre site. Vous pouvez ensuite décharger tout CSS ou JavaScript qui n'est pas nécessaire pour cette page.

Mais attention ! Parfois, ces plugins peuvent supprimer des éléments qui sont en fait nécessaires. Vérifiez donc toujours votre site après avoir effectué des modifications pour vous assurer que tout fonctionne encore correctement.

5. Utiliser le Lazyloading pour les images, les vidéos et les iFrames

Les images et les vidéos sont importantes pour la présentation de votre site, mais leur nombre élevé peut ralentir les choses en raison de toutes les requêtes qu'elles effectuent.

Le chargement paresseux est une technique qui permet de réduire le nombre initial de requêtes en ne chargeant les images et les vidéos que lorsque le visiteur du site les atteint.

Cela permet d'économiser la bande passante et de réduire le nombre de requêtes HTTP lors du premier chargement de la page.

6. Scripts de retard

Un autre moyen de réduire le nombre de requêtes consiste à retarder les scripts pour Google Analytics, Microsoft Clarity, Meta Pixel ou tout autre script qui n'est pas nécessaire lorsque la page commence à se charger.

Il y a deux façons de procéder :

1. Différé : Cela signifie que le JavaScript s'exécute après la fin du chargement de l'HTML.
2. Retardé : Avec cette méthode, le JavaScript attend de détecter une activité de l'utilisateur, comme un clic sur une touche ou un mouvement de la souris.

Retardé est préférable car il empêche l'exécution du JavaScript pendant le calcul de la note de performance.

7. Activer la mise en cache du navigateur

La mise en cache du navigateur enregistre les fichiers statiques dans les navigateurs des visiteurs, de sorte qu'ils ne doivent pas être téléchargés à chaque fois pour vos visiteurs réguliers.

Cela signifie qu'il y a moins de requêtes HTTP pour des fichiers qui n'ont pas changé, ce qui accélère les temps de chargement pour les visiteurs qui reviennent. La mise en cache du navigateur peut facilement être activée à l'aide de l'un des plugins de mise en cache mentionnés ci-dessus. 

8. Combiner des images pour créer des sprites

Le "spriting" consiste à mettre de nombreuses images dans un seul fichier. Cela permet au navigateur de ne faire qu'une seule demande pour toutes ces images au lieu de plusieurs.

Cela permet à votre site web de se charger plus rapidement. Les sprites sont pratiques pour les icônes ou les petites images utilisées dans différentes parties de votre site web WordPress.

Il existe des tonnes d'outils en ligne, tels que le "CSS Sprites Tool", qui vous aident à combiner plusieurs images pour créer des sprites.

9. Chargement paresseux des commentaires et des widgets

La mise en œuvre du chargement paresseux pour les sections de commentaires et les widgets signifie que le contenu ne sera chargé que lorsque les utilisateurs interagissent avec eux, plutôt que de tout charger lors du premier chargement de la page.

Cela permet de réduire le nombre de requêtes et le temps de chargement initial des pages et d'améliorer les performances globales.
La plupart des solutions de mise en cache prennent en charge le chargement paresseux par défaut. Vous pouvez également utiliser des plugins tels que "Lazy Load for Comments".

10. Mise à niveau vers HTTP/2

En optant pour un hébergement qui prend en charge HTTP/2, vous permettez le multiplexage et le chargement parallèle des ressources sur une seule connexion.

Cela signifie que plusieurs fichiers peuvent être transférés simultanément, ce qui réduit l'impact des demandes multiples et accélère le processus de chargement de votre site web WordPress.

Pour vérifier si votre hébergeur actuel prend en charge HTTP/2, vous pouvez utiliser l'outil en ligne KeyCDN.

11. Réduire les redirections

Chaque redirection ajoute une requête HTTP, ce qui peut ralentir votre site web. Pour réduire le nombre de requêtes et améliorer les performances, essayez de limiter les redirections au minimum.

En outre, la réduction des redirections peut avoir un impact positif sur le référencement en consolidant l'équité des liens et en évitant les redirections en chaîne potentielles, ce qui contribue en fin de compte à un meilleur classement dans les moteurs de recherche.

12. Réduire au minimum les scripts, feuilles de style et polices de caractères externes

Bien qu'il ne soit pas toujours possible de contrôler les scripts externes, certains plugins, tels que "LiteSpeed Cache", offrent la possibilité de les localiser. Toutefois, cette solution n'est pas idéale si les fichiers externes changent souvent.

Pour réduire le nombre de requêtes HTTP, essayez d'utiliser le moins possible de scripts externes, de feuilles de style et de polices. Cela permet de rationaliser les performances de votre site.

13. Réduire les plugins

Les plugins n'augmentent pas seulement la taille globale de votre site, ils contribuent également aux requêtes HTTP. Certains plugins génèrent des requêtes inutiles en étant appelés sur chaque page, même s'ils ne sont pas utilisés.

Envisagez de supprimer les plugins inutiles ou de trouver des alternatives plus légères pour réduire le nombre de requêtes et améliorer les performances du site.

14. Désactiver les Emojis de WordPress

Pour améliorer les performances du site web et réduire le nombre de requêtes HTTP, vous pouvez également désactiver les emojis de WordPress.

Ces émojis, bien qu'amusants, ajoutent des scripts et des feuilles de style supplémentaires à votre site, ce qui ralentit les temps de chargement.

Autres considérations clés

1. Utiliser le cache d'objets : Redis ou Memcached

L'utilisation de la mise en cache d'objets avec Redis ou Memcached peut considérablement améliorer les performances de votre site WordPress. Ceci est particulièrement bénéfique pour les sites à forte base de données comme les LMS, les réseaux sociaux et les sites WooCommerce.

Le cache d'objets stocke les données fréquemment consultées dans la mémoire (RAM) de votre serveur, ce qui réduit considérablement le temps nécessaire pour répondre aux demandes. 

2. Choisir des thèmes et des plugins légers et bien codés

Les thèmes et les plugins augmentent le nombre de requêtes sur votre site. Plus vous avez de plugins, plus ils peuvent créer de requêtes.

Pour minimiser les requêtes HTTP, essayez d'utiliser moins de plugins et optez pour des thèmes et des plugins légers et bien codés. Cela garantit des temps de chargement plus rapides et des performances plus fluides.

3. Utiliser un CDN

La mise en œuvre d'un CDN consiste à distribuer le contenu de votre site web sur des serveurs dans le monde entier. Cela permet non seulement de réduire la charge sur votre serveur d'hébergement et la latence, mais aussi de minimiser les requêtes en livrant le contenu du serveur CDN le plus proche aux visiteurs de votre site.

Par conséquent, les temps de chargement des pages sont améliorés dans les différentes zones géographiques.

4. Optimiser avec Preconnect, Preload et DNS-Prefetch

La préconnexion, le préchargement et le préchargement DNS sont des techniques utilisées pour accélérer les temps de chargement des ressources et réduire la latence.

Ils fonctionnent en établissant des connexions précoces avec des domaines externes, en donnant la priorité au chargement des ressources importantes, et en préacheminant les résolutions DNS pour les domaines externes.

5. Améliorer le délai d'arrivée du premier octet (TTFB)

TTFB mesure la rapidité avec laquelle le serveur répond à la demande d'un visiteur, ce qui indique les performances et les niveaux d'optimisation du serveur.

Choisissez un hébergement WordPress optimisé et ajoutez un CDN pour réduire le TTFB, ce qui se traduit par de meilleures performances et une meilleure expérience utilisateur.

6. Optimiser les images

Pour améliorer les temps de chargement, compressez et optimisez les images afin de réduire la taille des fichiers. Par exemple, une requête HTTP pour une image de 3 Mo prendra beaucoup plus de temps qu'une petite image de 20 Ko.

Squoosh est un outil sympa pour optimiser vos images.

Pensez également à utiliser des formats d'image tels que WebP, qui offrent une meilleure compression et des temps de chargement plus rapides que les formats traditionnels.

7. Utiliser la compression GZIP ou Brotli

En utilisant la compression GZIP ou Brotli, vous pouvez réduire la taille des fichiers de votre site web avant qu'ils ne soient envoyés aux visiteurs.

Cette technique de compression réduit considérablement la quantité de données devant être transférées sur l'internet, ce qui accélère le chargement des pages.

8. Charger JavaScript de manière asynchrone

Le chargement asynchrone de JavaScript est une technique qui permet aux scripts de se charger en même temps que d'autres éléments de la page plutôt que de bloquer le rendu d'une page web.

Cela signifie que le navigateur peut continuer à charger et à afficher le contenu pendant que les fichiers JavaScript sont recherchés, ce qui améliore les performances et l'expérience de l'utilisateur.