Voici une histoire que vous aimerez si vous souhaitez accélérer votre site WordPress.
L’autre jour, j’ai construit un site Web brillant. J’ai tout mis en œuvre et ajouté WooCommerce, Google Tag Manager, OneSignal, helpdesk, Yoast, la radio en direct (oh oui, je l’ai fait), Cookie Notice, les médias sociaux et un tas d’autres plugins.
Tout comme vous, je tenais à impressionner mes visiteurs, du moins le pensais-je. Mais alors les choses sont devenues insupportablement lentes. Après beaucoup d’angoisse, j’ai tiré GTMetrix pour débusquer le problème.
À ma grande consternation, j’ai vu ceci:
Ai-je été impressionné? Enfer aux NAW! Je voulais obtenir un A parfait et réduire le temps de chargement des pages à moins de deux secondes.
Donc, j’ai appuyé sur le bouton de nouveau test, mais devinez quoi? Toujours le même résultat écoeurant. J’étais consterné, même 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 testé le site sur Pingdom parce que GTMetrix peut le sucer. Mais, voici les résultats lamentables, encore une fois:
J’étais exaspéré. L’épine proverbiale dans ma chair était les requêtes HTTP errantes, car je pouvais résoudre rapidement de nombreux autres problèmes.
Pour aggraver les choses, j’utilisais un thème WordPress de commerce électronique qui chargeait un milliard éléments pour construire la page d’accueil. Pour ma défense, ça avait l’air incroyable. Certains utilisateurs ont également convenu que le design était sur le point, alors oui, je ne suis pas tombé dans le piège seul 🙂
Mais une excellente conception visuelle et des vitesses lentes 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 à différents 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 qu’il faut beaucoup de parties différentes pour rendre votre site Web dans un navigateur. La bonne nouvelle est que vous pouvez 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 de 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 que vous devez améliorer. Avec vos rapports prêts, voici comment réduire les demandes HTTP / S et accélérer votre site WordPress.
Étape 1: désencombrement
Les gars, si vous avez beaucoup de choses sur votre site WordPress, vous aurez trop de requêtes HTTP. C’est une évidence. La première étape pour réduire les requêtes HTTP est le désencombrement.
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 une tonne de plugins, vous aurez certainement plus de requêtes HTTP. Moins il y a de plugins, moins il y a de requêtes. C’est tout simplement simple.
Que faire?
Effectuez un audit de vos plugins. Quels plugins devez-vous avoir pour exécuter votre site Web? Y a-t-il des plugins dont vous n’avez pas besoin? Avez-vous des plugins qui exploitent des serveurs tiers? Pouvez-vous vous passer de ces plugins?
Pour réduire les requêtes HTTP, désinstallez tous les plugins dont vous n’avez pas besoin. Si vous avez besoin d’un plugin de temps en temps, installez-le uniquement lorsque vous en avez besoin. Ensuite, désinstallez le plugin.
Il en va de même pour les thèmes et le contenu WordPress que vous n’utilisez pas. Nettoyez tout ça. Retirez 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 les 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 génial, tu n’es pas d’accord? Et penser que vous n’avez besoin que du Plugin WordPress Asset CleanUp.
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 les CSS / JS qui ne sont pas nécessaires pour charger, réduisant ainsi le ballonnement.
Nettoyez votre installation déjà hombre; se débarrasser de l’ordure – spam de commentaires inclus. Oh oui, éliminez les liens brisés et optimisez votre base de données. Ce sont des domaines importants à considérer pour augmenter la vitesse de votre site, mais je m’égare.
Revenons à la réduction des requêtes HTTP.
Étape 2: Optimiser les images
Un site Web sans images est, enfin, terne. Ils disent qu’une image vaut mille mots, et c’est cool. Mais chaque image représente une requête HTTP. Pour ajouter du sel aux blessures, les images figurent en tête des éléments qui prennent beaucoup de temps à charger.
Pourtant, nous ne pouvons pas ignorer le fait que la plupart des thèmes WordPress (sites de lecture) reposent sur des images, et de nombreuses 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 tout ce ballonnement – vous n’en avez pas besoin. Après cela, compressez et optimisez les images pour supprimer les données de fichiers inutiles.
Bien qu’il existe un certain nombre de plugins, nous aimons vraiment WP Compress. Bien qu’il s’agisse d’un service premium, la puissante optimisation automatique des images, la compression sans perte, le traitement cloud pour réduire la charge de votre serveur, la prise en charge des images WebP, le redimensionnement automatique et plus encore font que l’investissement en vaut la peine (consultez notre critique pour en savoir plus). De plus, vous pouvez être déclaré avec 100 images gratuitement – vous pouvez donc au moins essayer.
L’optimisation des images ne réduit pas vos demandes HTTP en soi, mais elle réduit la taille de vos fichiers d’images, ce qui se traduit par de meilleures vitesses de page sur toute la ligne.
Alternativement, pour réduire les requêtes HTTP, tirez parti de la puissance de Sprites d’image 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.
Supposons que vous ayez 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 fera qu’un seul voyage.
Voyez-vous où je vais avec ça? Moins il y a de trajets, moins les requêtes HTTP sont importantes. 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 tel que Générateur CSS Sprite. L’implémentation de sprites d’images CSS est facile, à condition de bien connaître CSS.
Conseil de pro: Vous pouvez tout oublier sur 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 la notation des performances, donc ne vous inquiétez pas s’il semble que vos images créent une tonne de requêtes HTTP.
Mais je dis: Si les sprites d’images CSS peuvent réduire considérablement les requêtes HTTP sur votre site et que vous savez comment les implémenter, allez-y et supprimez ces secondes supplémentaires sur le temps de chargement de votre 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.
Étape 3: Combinez et réduisez HTML, CSS et JavaScript
La principale cause de nombreuses requêtes HTTP sur mon site WordPress était les fichiers CSS et JavaScript externes. Oui, je faisais face à 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 représentaient environ 51% du problème! C’est tout simplement ridicule. Merci, GTMetrix, frappe mon poing.
Si je combine et minimise ces 44 fichiers JS et 22 CSS, je peux réduire considérablement mes requêtes HTTP, la taille du site Web et le temps de chargement. Mais qu’est-ce que c’est que «combiner» et «minimiser» les affaires?
Selon Raelene Morey de Words by Birds (je suis un grand fan 🙂), la minification est le processus de «… supprimer tous les caractères inutiles, comme les commentaires, la mise en forme, les espaces blancs et les nouvelles lignes des fichiers HTML, CSS et JavaScript qui ne sont pas nécessaires pour la code à exécuter. “
La réduction de la taille réduit la taille du fichier en éliminant 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:
La combinaison de fichiers, quant à elle, ressemble à ce qu’elle semble. Par exemple, si votre page Web charge 5 fichiers CSS externes et 5 fichiers JavaScript externes, la combinaison de vos CSS et JavaScript dans un seul fichier séparé entraînerait seulement 2 demandes au lieu de 10.
Tu as compris? J’espère bien. La combinaison de fichiers réduit les requêtes HTTP. La minification, en revanche, réduit la taille du fichier. Combinez les deux et vous tuez deux oiseaux avec la même pierre.
Existe-t-il des plugins? Oui bien sûr!
Il existe une tonne de plugins WordPress pour combiner et réduire vos fichiers. Un bon exemple est le plugin WP Rocket. C’est essentiellement l’un des meilleurs plugins de mise en cache qui vous offre des fonctionnalités pour combiner et réduire les fichiers en quelques clics.
Un autre populaire (et gratuit) est l’option Optimisez automatiquement brancher.
Au fait, pendant que vous y êtes, réduisez le nombre 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 je dis, éliminez tous les scripts et fichiers externes dont vous n’avez pas besoin.
Étape 4: ajuster les fichiers CSS et JavaScript bloquant le rendu
Dans certains cas, la combinaison de fichiers peut ne pas être une option, en particulier pour les fichiers et scripts tiers qui changent fréquemment. Dans de tels cas, vous pouvez différer le chargement de ces actifs. HTTP / 2 prend en charge le chargement asynchrone des fichiers, ce qui signifie que tous les fichiers se chargent simultanément.
Si le chargement asynchrone n’est pas en cours 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.
Gardez à l’esprit que vos pages Web se chargent de haut en bas. Si vous avez CSS et JS bloquant le rendu 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 du haut vers le bas de votre page Web. Mais faites attention ici; vous n’avez pas besoin de déplacer tous les scripts vers le bas. Je dis cela, car votre page peut avoir besoin de CSS et de JS pour offrir une expérience complètement engageante.
Si vous différez certains fichiers CSS ou JavaScript, vos utilisateurs peuvent voir une version déformée de votre page Web jusqu’à ce que la page se charge complètement, ce qui est exactement le contraire de ce que vous souhaitez réaliser.
Donc, ne différez que les scripts qui ne sont pas nécessaires au chargement de la page. De cette façon, vos utilisateurs n’attendront pas longtemps que votre page se charge. Pourquoi? 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 se chargeront éventuellement), mais cela réduit le nombre de requêtes HTTP nécessaires pour afficher votre page.
Cela ressemble beaucoup au chargement paresseux d’images; l’image n’est chargée que lorsqu’elle se trouve dans la fenêtre d’affichage, pas lorsque le reste (et les parties les plus importantes) de la page est en cours de chargement.
Soit dit en passant, la correction de CSS et JS bloquant le rendu 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 de partage social externe prend du temps à se charger, vous pouvez le reporter. En plus de cela, vous pouvez l’éliminer et intégrer le partage social dans votre thème.
Vous éliminerez les requêtes HTTP et accélérerez votre site tout en conservant les mêmes fonctionnalités. Je comprends que le codage des fonctionnalités dans votre thème est une tâche difficile pour la plupart des débutants, alors vérifiez 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 casser votre site Web.
Y a-t-il des options gratuites? Bien sûr! Nous travaillons avec WordPress, vous vous en souvenez? Vous pouvez utiliser le JavaScript asynchrone, entre autres plugins.
Étape 5: utiliser la mise en cache et le CDN
Saviez-vous que la mise en cache et les CDN peuvent réduire vos requêtes HTTP? Cela ne semble pas être un fait au premier abord, 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 consiste à stocker des fichiers statiques sur un navigateur afin que les utilisateurs ne téléchargent pas les fichiers lors des visites suivantes. Supposons que vous disposez d’un plug-in de cache et que l’utilisateur télécharge votre contenu 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 à partir du navigateur, réduisant les demandes HTTP et augmentant la vitesse de votre site.
Un CDN (ou Content rélivraison Network) est un réseau de serveurs répartis dans le monde entier. Un CDN utilise également la mise en cache, mais pour des vitesses encore plus rapides, le fournisseur CDN sert votre mis en cache le contenu d’un 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. est-ce que vous saisissez?
Et le meilleur de tous, il existe un certain nombre d’options CDN gratuites (ou au moins des essais gratuits afin que vous puissiez littéralement voir la différence). Chez WPExplorer, nous utilisons et recommandons fortement CLoudflare, mais choisissez le CDN qui, selon vous, vous convient le mieux.
Bonus: assurez-vous que HTTP / 2 est pris en charge
Vous pourriez tout faire pour réduire les requêtes HTTP, mais votre hébergeur pourrait être la cause de vos problèmes. Ne soyez pas surpris; demander et penser, qui – à cette époque et à cette époque – utilise autre chose que HTTP / 2?
Vous ne savez probablement même pas quoi HTTP / 2 c’est tout. Eh bien, pour commencer, HTTP / 2 prend en charge le chargement asynchrone de fichiers, 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 prompt à juger; J’ai vu des fournisseurs d’hébergement Web qui utilisent toujours HTTP 1.0 et les anciennes versions de PHP. Oui, même avec les avantages apparents de HTTP / 2 et PHP 7. Je ne bluffe même pas; certains de leurs clients viennent à moi lorsque certains de leurs plugins ne fonctionnent pas, et c’est irritant!
Mais vraiment pourquoi? Le fait que certains fournisseurs d’hébergement Web ne soient pas gênés par le fait que PHP 5.6 est obsolète et présente des failles de sécurité est juste autre chose. Et s’ils ne prennent pas en charge HTTP / 2, c’est vraiment une rupture pour vous.
Contactez votre hôte ou utilisez Outil de KeyCDN pour vérifier si votre serveur prend en charge HTTP / 2. Le meilleur hébergeur prend en charge HTTP / 2 et la dernière version de PHP. Si votre hôte est à la traîne dans les deux cas, demandez-lui de mettre à niveau ou de choisir un meilleur hébergeur.
Mots finaux
Réduire les requêtes HTTP sur votre site WordPress consiste à éliminer les choses dont vous n’avez pas besoin. Si vous avez beaucoup de choses sur votre site WordPress, vous aurez beaucoup de requêtes HTTP et des vitesses de page relativement lentes.
Pour réduire les requêtes HTTP, désencombrez votre site, optimisez les images, corrigez les scripts de blocage du rendu, utilisez la mise en cache et assurez-vous que votre hôte prend en charge HTTP / 2. En dehors de cela, essayez de créer des sites Web simples et propres qui ne nécessitent pas une tonne d’actifs pour se charger.
Si vous avez des questions, veuillez nous en informer dans la section des commentaires ci-dessous. Bravo à des sites Web plus rapides et un bel avenir à venir!
