Comment réduire les requêtes HTTP / S dans WordPress

Voici une histoire que vous allez adorer si vous souhaitez accélérer votre site WordPress.

L'autre jour, j'ai construit un site Web génial. J'ai fait de mon mieux et j'ai ajouté WooCommerce, Google Tag Manager, OneSignal, Helpdesk, Yoast, Radio en direct (oh oui, je l'ai fait), Cookie Notice, les médias sociaux et des tonnes d'autres plugins.

Comme vous, j'étais déterminé à impressionner mes visiteurs, du moins le pensais-je. Mais alors les choses sont devenues insupportablement lentes. Après beaucoup de détresse, j'ai activé GTMetrix pour éliminer le problème.

À ma grande consternation, j'ai vu ceci:

Avez-vous été impressionné? Enfer aux nouveaux! Je voulais obtenir un A parfait et réduire le temps de chargement des pages à moins de deux secondes.

J'ai donc appuyé sur le bouton retester, mais devinez quoi? C'est toujours le même résultat dégoûtant. Il était horrifié, voire en colère. Mais je n'abandonne pas facilement parce que ce genre de chose est inacceptable.

Savez-vous ce que j'ai fait ensuite? J'ai essayé le site Web sur Pingdom parce que GTMetrix peut être nul. Mais, voici les résultats moche encore une fois:

J'étais exaspéré. L'épine proverbiale dans ma chair était les requêtes HTTP errantes, car cela pouvait résoudre beaucoup d'autres problèmes rapidement.

Pour aggraver les choses, j'utilisais un thème WordPress eCommerce qui a chargé un milliard d'articles pour créer la page d'accueil. Pour ma défense, ça avait l'air incroyable. Certains utilisateurs ont convenu que le design était également sur le point, donc je ne suis pas tombé dans le piège 🙂

Mais une excellente conception visuelle et des vitesses faibles ne vont pas de pair. J'avais besoin d'une solution et rapide.

Comment puis-je réduire les requêtes HTTP sur mon site WordPress?

Chaque fois que vous visitez un site Web WordPress, de nombreuses données circulent entre votre navigateur et les serveurs du site Web. En d'autres termes, WordPress envoie des requêtes HTTP à plusieurs serveurs pour créer ce que les utilisateurs voient lorsqu'ils chargent votre site.

Si votre site WordPress nécessite beaucoup d'éléments à charger, vous aurez plus de requêtes HTTP et vice versa. Plus de requêtes HTTP signifient un site Web lent, une mauvaise expérience utilisateur (UX), de mauvais scores SEO et de faibles taux de conversion.

Les sites Web WordPress sont généralement dynamiques, ce qui signifie que de nombreuses parties différentes sont nécessaires pour afficher votre site Web dans un navigateur. La bonne nouvelle est qu'elle peut réduire les requêtes HTTP et accélérer considérablement votre site.

Et dans le post d'aujourd'hui, vous apprenez exactement comment!

Les rapports GTMetrix et Pingdom vous montrent généralement où se situe le problème. À ce titre, testez votre site à l'aide des deux outils pour découvrir les domaines à améliorer. Avec vos rapports prêts, nous vous montrons ici comment réduire les demandes HTTP / S et accélérer votre site WordPress.

Étape 1: commander

Les gars, si vous en avez beaucoup sur votre site WordPress, vous aurez trop de requêtes HTTP. C'est évident. La première étape de la réduction des requêtes HTTP est la désorganisation.

Par cela, je veux dire se débarrasser de tous les plugins dont vous n'avez pas besoin. Les plugins WordPress sont livrés avec de nombreux fichiers, que ce soit PHP, CSS ou JavaScript (JS). Chaque fichier déclenché par chaque plugin créera une requête HTTP.

Si vous avez un tas de plugins, vous aurez certainement plus de requêtes HTTP. Moins il y a de modules complémentaires, moins il y a de demandes. C'est très simple.

Que faire?

Effectuez un audit de vos plugins. Quels plugins devez-vous avoir pour faire fonctionner votre site Web? Y a-t-il des plugins dont vous n'avez pas besoin? Avez-vous des modules complémentaires qui exploitent des serveurs tiers? Pouvez-vous vous passer de ces accessoires?

Pour réduire les requêtes HTTP, désinstallez tous les plugins dont vous n'avez pas besoin. Si vous avez besoin d'un complément à l'occasion, installez-le uniquement lorsque vous en avez besoin. Désinstallez ensuite le plugin.

Il en va de même pour les thèmes et contenus WordPress que vous n'utilisez pas. Nettoyez toutes ces choses. Supprimez tout ce dont vous n'avez pas besoin; c'est bon pour la vitesse et la sécurité de votre site web.

Vous pouvez aller plus loin et charger des plugins de manière sélective. Par exemple, si vous n'avez besoin que du formulaire de contact 7 pour le charger sur votre page de contact, vous pouvez empêcher le chargement d'autres plugins sur cette page spécifique.

Ce serait formidable, vous n'êtes pas d'accord? Et penser que vous n'avez besoin que du Plugin de nettoyage des ressources WordPress.

Le plugin est facile à utiliser et assez efficace. Ou comme le dit le développeur:

"Asset Cleanup" analyse votre page et détecte tous les actifs qui sont chargés. Tout ce que vous avez à faire lors de l'édition d'une page / publication est simplement de sélectionner le CSS / JS qui n'a pas besoin d'être chargé, cela réduit le ballonnement.

Nettoyez votre installation maintenant, mec; se débarrasser de la corbeille – commentaires de spam inclus. Ah oui, supprimez les liens rompus et optimisez votre base de données pendant que vous y êtes. Ce sont des domaines importants à prendre en compte pour accélérer votre site, mais je m'égare.

Réduisons à nouveau les requêtes HTTP.

Étape 2: Optimiser les images

Un site Web sans images est bien monotone. Ils disent qu'une image en dit plus que mille mots, et c'est super. Mais chaque image représente une requête HTTP. Pour ajouter du sel aux blessures, les images figurent en tête des éléments dont le chargement est long.

Pourtant, nous ne pouvons pas ignorer le fait que la plupart des thèmes WordPress (sites de lecture) reposent sur des images, et beaucoup d'images d'ailleurs. Donc, à la lumière de cela, comment pouvez-vous réduire les requêtes HTTP en optimisant vos images?

Pour commencer, débarrassez-vous de toutes les images que vous n'utilisez pas. Soyez impitoyable; débarrassez-vous de tous ces ballonnements, vous n'en avez pas besoin. Après cela, compressez et optimisez les images pour supprimer les données d'archive inutiles.

Bien qu'il existe un certain nombre de plugins, nous aimons vraiment WP Compress. Bien qu'il s'agisse d'un service premium, d'une puissante optimisation automatique d'images, d'une compression sans perte, d'un traitement cloud pour réduire la charge de votre serveur, de la prise en charge des images WebP, d'un redimensionnement automatique et bien plus encore, l'investissement en vaut la peine. vaut la peine (voir notre critique pour plus d'informations). De plus, vous pouvez obtenir 100 images gratuites, vous pouvez donc au moins essayer.

L'optimisation d'image ne réduit pas vos demandes HTTP en soi, mais elle réduit la taille de vos fichiers image, ce qui se traduit par de meilleures vitesses de page à l'avenir.

Alternativement, pour réduire les requêtes HTTP, exploitez la puissance des sprites d'images CSS. Pour les non-initiés, un sprite est une collection d'images regroupées dans un seul fichier image.

Ensuite, en utilisant des astuces CSS, vous pouvez choisir la partie de l'image à afficher. Mais comment cela réduit-il les requêtes HTTP? Voici une analogie.

Disons que vous avez besoin de cinq images sur votre page d'accueil. Pour charger votre site, votre installation WordPress fera cinq déplacements sur le serveur pour récupérer les images. Maintenant, si vous mettez les cinq images dans un seul fichier image (sprite), votre installation WordPress ne prendra qu'un seul voyage.

Voyez-vous où je veux en venir? Moins il y a de trajets, plus les requêtes HTTP sont faibles. La meilleure partie est que vous n'avez pas besoin de transpirer pour créer et implémenter des sprites d'image CSS. Vous pouvez utiliser un outil comme CSS Sprite Generator. L'implémentation de sprites d'images CSS est facile tant que vous connaissez CSS.

Des conseils professionnels: Vous pouvez oublier les sprites d'images CSS si votre site Web utilise HTTP / 2 qui prend en charge le chargement asynchrone des images et des scripts. GTMetrix ne prend pas en compte HTTP / 2 lors de l'évaluation des performances, alors ne vous inquiétez pas si vos images semblent créer un tas de requêtes HTTP.

Mais je dis: Si les sprites d'image CSS peuvent réduire considérablement les requêtes HTTP sur votre site et que vous savez comment l'implémenter, allez-y et supprimez ces secondes supplémentaires de votre temps de chargement de page. Que vous ayez ou non HTTP / 2.

Après tout, un seul fichier image nécessite une seule requête HTTP. Dix images distinctes nécessitent 10 requêtes HTTP, etc. Je sais que tu comprends la dérive.

Étape 3: combiner et minimiser HTML, CSS et JavaScript

La principale cause de nombreuses requêtes HTTP sur mon site WordPress était les fichiers CSS et JavaScript externes. Oui, j'avais du mal avec 43 scripts JS et 22 fichiers CSS. C'est un énorme 66 requêtes HTTP.

Sur environ 130 requêtes HTTP, les requêtes CSS et JavaScript externes ont représenté environ 51% du problème! C'est tout simplement ridicule. Merci, GTMetrix, frappe mon poing.

En combinant et en minimisant ces 44 fichiers JS et 22 fichiers CSS, je peux réduire considérablement mes demandes HTTP, la taille du site Web et le temps de chargement. Mais à quoi sert ce métier de «combiner» et de «minifier»?

Selon Raelene Morey de Words by Birds (je suis un grand fan 🙂), la minification est le processus de "… supprimer les caractères inutiles, tels que les commentaires, la mise en forme, les blancs et les nouvelles lignes des fichiers non HTML, CSS et JavaScript" t nécessaire pour exécuter le code. "

La réduction réduit la taille du fichier en supprimant tous les autres caractères pour ne laisser que le code. Mais si vous avez plus de 66 scripts externes, la minification ne fera pas grand-chose pour minimiser les requêtes HTTP. Pour cela, vous devez combiner vos fichiers CSS et JavaScript.

Encore une fois, Raelene dit:

Pendant ce temps, la combinaison de fichiers ressemble à cela. Par exemple, si votre site Web charge 5 fichiers CSS externes et 5 fichiers JavaScript externes, en combinant votre CSS et JavaScript dans un seul fichier distinct, chacun ne générera que 2 demandes au lieu de 10.

Tu le comprends? J'espère bien. La combinaison de fichiers réduit les requêtes HTTP. La minification, d'autre part, réduit la taille du fichier. Combinez les deux et vous tuerez deux oiseaux avec la même pierre.

Existe-t-il des modules complémentaires? Oui, bien sûr!

Il existe des tonnes de plugins WordPress pour combiner et minimiser vos fichiers. Un bon exemple est le plugin WP Rocket. Fondamentalement, c'est l'un des meilleurs plugins de mise en cache qui vous offre des fonctions pour combiner et réduire les fichiers en quelques clics.

Un autre populaire (et gratuit) est le plugin Autoptimize.

Au fait, pendant que vous le faites, réduisez la quantité de fichiers CSS externes et de scripts JS? Par exemple, et nous ne mentionnons pas de noms ici, avez-vous vraiment besoin d'une plateforme de commentaires tierce? Avez-vous besoin d'un plugin radio en direct?

Peu importe ce que vous dites, supprimez tous les scripts et fichiers externes dont vous n'avez pas besoin.

Étape 4: régler les fichiers CSS et JavaScript bloquant le rendu

Dans certains cas, la fusion de fichiers peut ne pas être une option, en particulier pour les changements fréquents de fichiers et de scripts tiers. Dans de tels cas, vous pouvez différer le chargement de ces actifs. HTTP / 2 prend en charge le téléchargement de fichiers asynchrone, ce qui signifie que tous les fichiers sont téléchargés simultanément.

Si vous n'avez pas de charge asynchrone pour une raison quelconque (peut-être que vous n'utilisez pas HTTP / 2 ou que les scripts ne sont pas asynchrones), ces fichiers peuvent ralentir considérablement votre site Web.

Veuillez noter que vos pages Web se chargent de haut en bas. Si vous avez un traitement de blocage CSS et JS en haut de votre page, le navigateur arrêtera le chargement jusqu'à ce que les fichiers soient complètement chargés. En tant que tel, les utilisateurs verront une page vierge jusqu'au chargement des scripts, ce qui prend du temps.

Comment? Déplacez tous les scripts de blocage du rendu de haut en bas de votre page Web. Mais faites attention ici; il n'est pas nécessaire de déplacer tous les scripts à la fin. Je dis cela car votre page peut avoir besoin de CSS et JS pour offrir une expérience complètement engageante.

Si certains fichiers CSS ou JavaScript diffèrent, vos utilisateurs peuvent voir une version déformée de votre page Web jusqu'à ce que la page soit entièrement chargée, ce qui est exactement le contraire de ce que vous souhaitez réaliser.

Par conséquent, seuls les scripts qui ne sont pas nécessaires au chargement de la page diffèrent. De cette façon, vos utilisateurs n'attendront pas des années pour que votre page se charge. Parce que? Parce que vous aurez besoin de moins de requêtes HTTP pour livrer votre message.

Cela ne réduit pas les requêtes HTTP en soi (car tous les scripts et fichiers finiront par se charger), mais cela réduit le nombre de requêtes HTTP nécessaires pour rendre votre page.

Il est très similaire au chargement d'images paresseux; l'image ne se charge que lorsqu'elle se trouve dans la fenêtre graphique, pas lorsque le reste (et les parties les plus importantes) de la page se charge.

BTW, la correction du blocage du rendu CSS et JS peut révéler des fichiers et des scripts dont vous n'avez pas besoin pour créer une page Web.

Par exemple, si un script JS externe à partager sur les réseaux sociaux prend du temps à se charger, vous pouvez le reporter. En plus de cela, vous pouvez le supprimer et créer un partage social sur votre sujet.

Il supprimera les requêtes HTTP et accélérera votre site tout en conservant les mêmes fonctionnalités. Je comprends que les fonctions d'encodage de votre thème sont difficiles pour la plupart des débutants, veuillez donc vérifier auprès d'un utilisateur ou développeur avancé de WP.

Comme alternative, vous pouvez utiliser le plugin WP Rocket pour corriger les scripts de blocage de rendu, mais soyez prudent. Lisez leur documentation, car si vous gâchez des choses, vous pouvez facilement détruire votre site Web.

Y a-t-il des options gratuites? Bien sûr! Nous travaillons avec WordPress, vous vous en souvenez? Vous pouvez utiliser JavaScript asynchrone, entre autres plugins.

Étape 5: utilisez la mise en cache et CDN

Saviez-vous que la mise en cache et les CDN peuvent réduire vos requêtes HTTP? Au début, cela ne semble pas être un fait, mais lorsque vous considérez ce qui se passe dans les coulisses, vous pouvez utiliser la mise en cache et le CDN à votre avantage.

La mise en cache implique le stockage de fichiers statiques dans un navigateur afin que les utilisateurs ne téléchargent pas les fichiers lors de visites ultérieures. Supposons que vous disposiez d'un plug-in de cache et que l'utilisateur télécharge votre contenu mis en cache lors de sa première visite.

Lors des visites suivantes, votre site ne fera aucune demande au serveur. Au lieu de cela, il servira les ressources mises en cache du navigateur, réduisant les demandes HTTP et augmentant la vitesse de votre site.

Un CDN (ou Csouvent relivraison au nordetwork) est un réseau de serveurs situés dans le monde entier. Un CDN utilise également la mise en cache, mais pour des vitesses encore plus rapides, le fournisseur CDN mis en cache le contenu du serveur le plus proche du visiteur.

Des distances plus courtes signifient une livraison de contenu plus rapide et la mise en cache signifie que votre site Web n'a plus besoin de télécharger à nouveau le même contenu depuis le serveur central. Cela vous semble-t-il logique?

Et surtout, il existe un certain nombre d'options CDN gratuites (ou au moins des essais gratuits pour que vous puissiez littéralement voir la différence que cela fait). Chez WPExplorer, nous utilisons et recommandons CLoudflare, mais choisissez le CDN qui, selon vous, vous convient le mieux.

Bonus: assurez-vous que HTTP / 2 est pris en charge

Vous faites peut-être de votre mieux pour réduire les demandes HTTP, mais votre hébergeur peut être la cause de vos problèmes. Ne soyez pas surpris; demander et penser, qui, de nos jours, utilise plus que HTTP / 2?

Vous ne savez probablement même pas ce qu'est HTTP / 2. Eh bien, pour commencer, HTTP / 2 prend en charge le téléchargement de fichiers asynchrone, entre autres. Il présente d'autres avantages par rapport à HTTP 1.0, mais c'est une leçon pour un autre jour.

Si vous utilisez HTTP 1.0 ou inférieur, vous remarquerez un nombre considérable de requêtes HTTP.

Ne soyez pas trop rapide pour juger; J'ai vu des fournisseurs d'hébergement Web qui utilisent toujours HTTP 1.0 et les versions antérieures de PHP. Oui, même avec les avantages apparents de HTTP / 2 et PHP 7. Je ne bluffe même pas; certains de vos clients viennent à moi lorsque certains de leurs modules complémentaires ne fonctionnent pas, et c'est irritant!

Mais sérieusement, pourquoi? Le fait que certains fournisseurs d'hébergement Web ne se soucient pas du fait que PHP 5.6 est obsolète et présente des failles de sécurité est autre chose. Et s'ils ne prennent pas en charge HTTP / 2, c'est vraiment un facteur décisif pour le vôtre.

Contactez votre hôte ou utilisez l'outil KeyCDN pour vérifier si votre serveur prend en charge HTTP / 2. Le meilleur serveur Web prend en charge HTTP / 2 et la dernière version de PHP. Si votre hôte est en retard dans les deux cas, demandez-lui de mettre à niveau ou choisissez un meilleur hébergeur.

Derniers mots

Réduire les requêtes HTTP sur votre site WordPress consiste à supprimer les choses dont vous n'avez pas besoin. Si vous avez beaucoup sur votre site WordPress, vous aurez beaucoup de requêtes HTTP et des vitesses de page relativement lentes.

Pour réduire les demandes HTTP, organisez votre site, optimisez les images, corrigez les scripts de blocage du rendu, utilisez la mise en cache et assurez-vous que votre hôte est conforme à HTTP / 2. Sinon, essayez de créer des propre qui ne nécessite pas une tonne d'actifs à charger.

Si vous avez des questions, veuillez nous en informer dans la section des commentaires ci-dessous. Salutations aux sites Web plus rapides et un bel avenir à venir!