Comment faire moins de requêtes HTTP dans WordPress (11 conseils)

Pour afficher votre site Web, le navigateur d'un utilisateur enverra des requêtes HTTP à votre serveur. Cependant, si vous avez plusieurs fichiers non optimisés, le serveur doit traiter de nombreuses requêtes. Étant donné que ceux-ci peuvent augmenter considérablement les temps de chargement de vos pages, vous souhaiterez que votre site Web fasse moins de requêtes HTTP.

Heureusement, il est possible de les réduire, c'est de cela qu'il s'agit dans cet article.

Une introduction aux requêtes HTTP

Chaque fois qu'un utilisateur visite votre site Web, son navigateur doit télécharger des ressources à partir de votre serveur. Pour communiquer avec lui, le navigateur envoie des requêtes avec HTTP (Hypertext Transfer Protocol).

Les sites Web comprennent différentes formes de données, et les fichiers pour HTML, CSS, images et vidéos sont tous stockés sur un serveur - le rendu de ce contenu sur un navigateur nécessite des requêtes HTTP.

Voici les étapes à suivre lorsque quelqu'un navigue sur Internet :

Il est important de noter que le rendu d'un site Web ne nécessite pas qu'une seule requête HTTP. Chaque fichier image individuel, feuille de style de plug-in, script JavaScript, police Web, etc. aura généralement le sien. Par conséquent, si votre site n'est pas optimisé, cela pourrait avoir un impact négatif sur les temps de chargement.

Pourquoi vous pourriez vouloir que votre site WordPress fasse moins de requêtes HTTP

Lorsque vous créez un site Web, il est important de minimiser les fichiers inutiles. Ainsi, le navigateur d'un visiteur n'a pas besoin de demander autant de ressources au serveur. Étant donné que votre site fera moins de requêtes HTTP, il se chargera beaucoup plus rapidement.

En règle générale, un nombre plus élevé de requêtes HTTP entraîne des vitesses de page plus lentes. S'il y a plus de ressources à télécharger avant de rendre la page, les utilisateurs devront attendre longtemps pour voir le contenu.

Par exemple, un site Web avec seulement 50 requêtes se chargera généralement plus rapidement qu'un autre avec 70 requêtes. En effet, il y a moins de ressources à traiter et à télécharger.

La vraie histoire est légèrement plus complexe, car toutes les requêtes HTTP ne sont pas créées égales. Une grande requête HTTP à chargement lent peut avoir un effet plus important que cinq petites requêtes HTTP à chargement rapide. Mais en règle générale, moins de requêtes HTTP = site Web à chargement plus rapide .

En réduisant les requêtes HTTP sur votre site Web, vous améliorerez vos Core Web Vitals, en particulier votre score LCP (Largest Content Paint). À son tour, cela peut améliorer l'expérience utilisateur (UX) puisque les visiteurs verront le contenu plus rapidement.

Comment tester les requêtes HTTP de votre site Web

Comme nous l'avons mentionné précédemment, les requêtes HTTP font partie du rendu. Cependant, toutes les requêtes HTTP ne sont pas identiques. Avant de commencer à les réduire sur votre site Web, vous devez savoir exactement lesquels cibler.

Pour ce faire, vous pouvez utiliser un outil d'analyse des performances comme GTmetrix. Commencez par entrer l'URL de votre site Web et cliquez sur Tester votre site :

Vous recevrez un rapport de performances contenant des informations sur la taille de votre page et le nombre total de requêtes. Pour afficher ces données, faites défiler vers le bas jusqu'à Détails de la page :

Vous pouvez également afficher les demandes individuelles en cliquant sur l'onglet Waterfall . Cela vous montrera combien de temps chaque fichier a pris pour se télécharger :

À l'aide de ce graphique en cascade, vous pouvez identifier les éléments de votre site qui génèrent des requêtes HTTP inutiles. Une fois que vous avez trouvé le problème, vous pouvez mettre en œuvre la bonne solution et accélérer votre site Web.

Comme vous pouvez le voir dans le tableau ci-dessus, chaque requête HTTP a une taille différente et prend un temps de chargement différent.

Si vous souhaitez obtenir le meilleur retour sur vos efforts, essayez de vous concentrer sur l'élimination des requêtes HTTP les plus volumineuses et les plus lentes.

Vous devez également vous concentrer sur la suppression des requêtes HTTP tierces ( ressources que votre site charge à partir du serveur de quelqu'un d'autre, telles que les scripts Google Analytics ). Ces requêtes tierces nécessitent des recherches DNS supplémentaires et présentent d'autres inconvénients en termes de performances.

Comment faire moins de requêtes HTTP dans WordPress et accélérer votre site (11 conseils)

Une fois que vous avez testé votre site Web, il est temps de réduire ses requêtes HTTP.

Ci-dessous, nous passerons en revue 11 façons différentes de faire moins de requêtes HTTP et d'optimiser les requêtes HTTP restantes. Quelques-uns de ces conseils n'élimineront pas nécessairement les requêtes HTTP, mais ils optimiseront les requêtes pour qu'elles se chargent plus rapidement, ce qui est toujours important pour accélérer votre site.

1. SUPPRIMER LES PLUGINS INUTILES
2. DIFFÉRER L'EXÉCUTION DE JAVASCRIPT BLOQUANT LE RENDEMENT ET/OU RETARDER L'EXÉCUTION DE JAVASCRIPT
3. CHARGEMENT CONDITIONNEL DES SCRIPTS
4. MINIMISER LES DEMANDES DE TIERS
5. OPTIMISEZ VOS IMAGES
6. METTRE EN ŒUVRE LE CHARGEMENT LAZY
7. UTILISER UNE PILE DE POLICES SYSTÈME
8. COMBINEZ CSS ET JAVASCRIPT
9. UTILISEZ DES SPRITES CSS POUR COMBINER DES IMAGES
10. MINIFIEZ LE CODE DE VOTRE SITE
11. DÉSACTIVER LES ÉMOJIS

1. Supprimez les plugins inutiles

Vous pouvez avoir plusieurs plugins installés sur votre site Web. Même lorsque vous ne les utilisez pas activement, des plugins inutiles peuvent augmenter les requêtes HTTP et ralentir vos pages Web.

Pour analyser vos demandes de plugins, recherchez des "plugins" dans le rapport GTmetrix Waterfall. Cela n'affichera que les requêtes HTTP provenant de votre dossier wp-content/plugins :

Vous verrez quel plugin a créé la requête en passant votre souris sur un résultat. Pour optimiser votre site, parcourez la liste, à la recherche de plugins inutiles. Si un certain outil ne contribue pas activement à votre site Web, envisagez de le supprimer.

2. Différer le JavaScript bloquant le rendu et/ou retarder l'exécution de JavaScript

Si vous souhaitez faire moins de requêtes HTTP et optimiser vos requêtes HTTP, vous concentrer sur JavaScript est une autre excellente tactique.

Il existe deux manières principales d'optimiser le chargement du code JavaScript de votre site :

1. Différer le JavaScript bloquant le rendu
2. Retarder l'exécution de JavaScript

Différer le JavaScript bloquant le rendu

Différer le JavaScript bloquant le rendu ne supprimera pas les requêtes HTTP par lui-même, mais cela garantira que le chargement JavaScript de votre site ne bloque pas les requêtes HTTP plus importantes.

Pendant le processus de chargement, un navigateur peut rencontrer une ressource bloquant le rendu. Ces fichiers CSS ou JavaScript suspendent le rendu jusqu'à ce que la ressource soit traitée. Si vous avez ces fichiers inutiles, ils pourraient allonger le temps d'affichage de votre contenu.

L'ajout d'attributs différés ou asynchrones à ces fichiers informera le navigateur de les exécuter ultérieurement. Avec les attributs différés, les scripts sont téléchargés lors de l'analyse HTML, puis exécutés. Les attributs asynchrones exécuteront le script dès qu'il sera disponible.

Pour implémenter cela, vous pouvez utiliser un plugin spécifique à une fonctionnalité comme le plugin JavaScript Async gratuit.

Ou bien, de nombreux plugins généraux de performance/caching offrent également cette fonctionnalité, notamment WP Rocket et FlyingPress.

Vous pouvez également le configurer manuellement dans le code de votre site, si vous vous sentez à l'aise de le faire.

Pour implémenter un attribut defer, vous aurez simplement besoin d'ouvrir votre fichier functions.php et de trouver la balise <script> pour la ressource. Ici, insérez un attribut différé :

 <script src="resource.js" defer></script>

Voici à quoi ressemble un attribut asynchrone :

 <script src="resource.js" async></script>

Généralement, il est préférable d'utiliser des attributs asynchrones. Cependant, vous devrez utiliser des attributs différés lorsque le script s'appuie sur un autre script.

Retarder l'exécution de JavaScript

Si vous souhaitez faire moins de requêtes HTTP pour le chargement initial de la page, une autre tactique populaire consiste à retarder une partie ou la totalité de l'exécution JavaScript de votre site jusqu'à l'interaction de l'utilisateur.

Lorsque vous configurez cela, votre site attendra pour charger les fichiers jusqu'à ce qu'un utilisateur effectue une interaction, telle qu'un clic, un défilement, etc.

En déplaçant ces requêtes HTTP plus tard dans la visite, vous pouvez faire moins de requêtes HTTP pour le chargement initial et accélérer considérablement les métriques axées sur l'expérience utilisateur comme Largest Contentful Paint.

Pour configurer cela, vous pouvez utiliser l'un de ces plug-ins de performances :

• Fusée WP
• FlyingPress
• Questions de performance

Voici à quoi cela ressemble dans FlyingPress - vous pouvez soit retarder tous vos scripts à l'exception des scripts sélectionnés, soit retarder uniquement les scripts sélectionnés :

3. Charger les scripts de manière conditionnelle

Certains plugins chargent inutilement des scripts sur votre site. Par exemple, un plug-in peut uniquement gérer les formulaires de votre page Contactez-nous , mais ajouter des scripts à une autre zone. Dans ce cas, nous vous recommandons de charger conditionnellement les scripts du plugin.

Pour charger conditionnellement vos plugins, pensez à installer un outil comme Perfmatters. Il est livré avec un gestionnaire de scripts intégré pour désactiver les plugins ou les scripts individuels sur des pages ou des publications spécifiques :

Pour une option gratuite, vous pouvez également envisager le plugin Asset CleanUp.

Chargez conditionnellement vos plugins, puis exécutez à nouveau votre site Web via GTmetrix. Si vous remarquez toujours un excès de requêtes HTTP, il est temps de passer à la méthode suivante.

4. Minimisez les demandes de tiers

Lors du chargement de votre site Web, le navigateur d'un visiteur peut avoir besoin d'extraire des données d'une plate-forme tierce, ce qui nécessite des requêtes HTTP supplémentaires. De plus, puisque vous comptez sur un serveur tiers, ces demandes peuvent considérablement ralentir votre site Web.

Voici quelques exemples de scripts tiers :

• Vidéos YouTube intégrées
• Scripts de suivi Google Analytics
• Polices Google
• Annonces tierces

Comme pour les ressources bloquant le rendu, vous pouvez appliquer des attributs asynchrones ou différés aux scripts tiers.

Pour des services comme Google Analytics et Google Fonts, vous pouvez également envisager de les héberger localement à l'aide de plugins comme ceux-ci :

• OMGF - hébergez Google Fonts localement.
• CAOS – hébergez Google Analytics localement.

5. Optimisez vos images

Tout comme avec les plugins, il est important de supprimer les images inutiles de votre site Web. Étant donné que chaque image nécessite sa propre requête HTTP, vous souhaiterez minimiser le nombre de photos sur votre site.

Ensuite, toutes vos images doivent être optimisées. Bien que cela ne réduise pas le nombre de requêtes HTTP, cela réduira leur taille. Cela peut effectivement améliorer le temps de chargement des pages.

L'un des meilleurs optimiseurs d'image est Optimole. Ce plugin freemium offre une suite tout-en-un de fonctionnalités d'optimisation d'image, notamment :

• Diffuser des images adaptatives optimisées pour l'appareil de chaque utilisateur.
• Compression d'images.
• Redimensionnement des images.
• Conversion des images aux formats optimaux.
• Diffuser des images via son réseau de diffusion de contenu (CDN) intégré.

Lorsque vous téléchargez de nouvelles images, Optimole les compresse et les redimensionne. Par conséquent, vous n'aurez pas à vous soucier des fichiers image volumineux nécessitant des ressources excessives.

6. Mettre en œuvre le chargement paresseux

C'est aussi une bonne idée d'implémenter le chargement différé. Cela empêche le chargement des images et des vidéos en dessous du pli jusqu'à ce qu'un visiteur fasse défiler la page.

Cela déplace ces requêtes HTTP plus tard dans la visite de l'utilisateur, ce qui vous permet de faire moins de requêtes HTTP pour le chargement initial et d'accélérer votre temps de peinture du plus grand contenu.

WordPress 5.5 a ajouté le chargement paresseux intégré pour les images utilisant le chargement paresseux du navigateur natif.

Cependant, tous les navigateurs ne prennent pas encore en charge le chargement paresseux natif. De plus, l'utilisation d'un plugin de chargement paresseux dédié vous donne plus de contrôle sur la fonctionnalité de chargement paresseux sur votre site.

Par exemple, vous souhaiterez peut-être exclure les premières images du chargement différé pour éviter d'affecter négativement vos temps de peinture de contenu le plus important.

Si vous utilisez le plugin Optimole de la section précédente, il inclut également une fonctionnalité intégrée pour charger paresseusement les images de votre site de manière optimale.

Vous pouvez également ajuster davantage le comportement de chargement paresseux à partir des paramètres du plugin.

7. Utilisez une pile de polices système

Vous pouvez utiliser une variété de polices personnalisées pour rendre votre site Web unique. Cependant, chaque nouvelle police ajoutera une autre requête HTTP lors du chargement de votre site.

Pour cette raison, il est préférable de limiter le nombre de polices personnalisées que vous utilisez.

Alternativement, vous pouvez vous en tenir à une pile de polices système, qui utilise les polices natives du système d'exploitation d'un visiteur.

Certains thèmes, comme Neve, GeneratePress ou Astra, vous permettent de revenir aux polices système. Cependant, vous pouvez également modifier votre pile de polices avec CSS.

8. Combinez CSS et JavaScript

Une autre façon de faire moins de requêtes HTTP pour les fichiers CSS et JavaScript consiste à combiner des fichiers CSS et JavaScript distincts dans une seule feuille de style ou un seul fichier.

Avec le plugin Autoptimize, vous pourrez facilement agréger les fichiers du site en quelques étapes :

Sous Paramètres > Autoptimize , activez le plug-in pour optimiser le code JavaScript et CSS. Ensuite, cochez les cases à côté de Aggregate JS-files et Aggregate CSS-files :

Cela compilera votre CSS dans un fichier et JavaScript dans un autre. Au lieu d'envoyer de nombreuses requêtes pour plusieurs fichiers, Autoptimize permet à votre site d'effectuer moins de requêtes HTTP.

Remarque - bien que la combinaison CSS et JavaScript soit un moyen infaillible de réduire les requêtes HTTP, cela peut n'avoir aucun impact sur les performances réelles en fonction de votre hébergeur.

Si votre hôte utilise HTTP/2 ou une version ultérieure (ce que la plupart des hôtes font de nos jours), il peut en fait être préférable de ne pas combiner les fichiers car HTTP/2 prend en charge le multiplexage (ce qui signifie qu'il peut télécharger plusieurs fichiers depuis le serveur sans plusieurs demandes de serveur).

Si vous n'êtes pas sûr que votre hébergeur utilise HTTP/2, vous pouvez contacter l'assistance.

9. Utilisez des sprites CSS pour combiner des images

Sur un site WordPress typique, chaque image est un fichier individuel. S'il y a plusieurs photos sur une page, le navigateur envoie plusieurs requêtes HTTP. Cependant, un sprite CSS combinera ces images en un seul fichier.

L'outil CSS Sprites est un logiciel gratuit permettant de créer et de personnaliser des sprites CSS. Pour commencer, déposez vos images dans la zone de téléchargement :

Une fois que vous avez généré le sprite CSS, ajoutez-le à la bibliothèque multimédia WordPress. Ensuite, vous pouvez utiliser le code HTML et CSS généré pour placer chaque image sur votre site Web.

10. Minifiez le code de votre site

Réduire les fichiers de votre site ne vous aidera pas à faire moins de requêtes HTTP, mais cela vous aidera à optimiser les requêtes HTTP inévitables pour le code HTML, CSS et JavaScript de votre site.

Lorsque vous écrivez du code, vous pouvez inclure des caractères et des espaces blancs qui améliorent la lisibilité. Comme ils ne sont pas nécessaires au traitement d'une demande, vous pouvez les supprimer.

Le moyen le plus simple de minifier le code de votre site WordPress consiste à utiliser un plugin tel que le plugin Autoptimize que nous avons mentionné précédemment.

La plupart des plugins de mise en cache WordPress incluent également des fonctionnalités de minification de code, notamment WP Rocket, FlyingPress, WP Fastest Cache, etc.

Ou, si vous utilisez le CDN de Cloudflare, vous pouvez également demander à Cloudflare de minifier votre code pour vous.

Une fois que vous avez minifié les fichiers de votre site, les requêtes HTTP auront des temps d'exécution plus rapides. Avec un code plus léger, vous accélérerez votre site Web et minimiserez les requêtes volumineuses.

11. Désactiver les émoticônes

Par défaut, les emojis WordPress ajoutent une requête HTTP supplémentaire à votre site. Pour vous débarrasser d' une autre requête HTTP, vous pouvez désactiver les emojis WordPress.

Pour l'option la plus simple, vous pouvez simplement installer le plugin léger Disable Emojis.

Alternativement, vous pouvez ajouter ce code au fichier functions.php de votre thème enfant ou à un plugin de gestionnaire de code comme Code Snippets :

 /** * Disable the emojis */ function disable_emojis() { remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' ); add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 ); } add_action( 'init', 'disable_emojis' ); /** * Filter function used to remove the tinymce emoji plugin. * * @param array $plugins * @return array Difference betwen the two arrays */ function disable_emojis_tinymce( $plugins ) { if ( is_array( $plugins ) ) { return array_diff( $plugins, array( 'wpemoji' ) ); } else { return array(); } } /** * Remove emoji CDN hostname from DNS prefetching hints. * * @param array $urls URLs to print for resource hints. * @param string $relation_type The relation type the URLs are printed for. * @return array Difference between the two arrays. */ function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) { if ( 'dns-prefetch' == $relation_type ) { /** This filter is documented in wp-includes/formatting.php */ $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://sworg/images/core/emoji/2/svg/' ); $urls = array_diff( $urls, array( $emoji_svg_url ) ); } return $urls; }

Après avoir mis en œuvre tous ces conseils, vous devriez avoir un site avec moins de requêtes HTTP !

Effectuez moins de requêtes HTTP sur votre site Web 🎯

En règle générale, plus votre site Web contient de requêtes HTTP, plus il se charge lentement. Cela peut affecter négativement l'expérience utilisateur (UX) de votre site, obligeant les visiteurs à partir sans lire votre contenu ni acheter un produit.

Pour accélérer votre site Web, vous souhaitez éliminer autant de requêtes HTTP que possible et optimiser les requêtes HTTP restantes afin qu'elles se chargent le plus rapidement possible.

Avec les conseils de cet article, vous pouvez accomplir les deux tâches et créer un site à chargement rapide pour vos visiteurs.

👉 Cependant, n'oubliez pas que l'optimisation des requêtes HTTP de votre site n'est qu'une partie du puzzle des performances. Vous aurez également besoin d'un hébergement WordPress de qualité si vous voulez que votre site se charge rapidement - consultez notre meilleur tour d'horizon de l'hébergement WordPress pour voir les meilleures options.

Vous avez des questions sur la réduction du nombre de requêtes HTTP dans WordPress ? Demandez-nous dans la section commentaires ci-dessous!