Analyse et effets des requêtes HTTP sur les performances de WordPress

Dans le monde actuel, les sites Web rapides entraînent une mobilisation, une rétention et des conversions accrues des visiteurs. De nombreux facteurs contribuent à la vitesse du site Web. un de ces est le nombre de requêtes HTTP.

Dans ce tutoriel, je vais expliquer ce que sont les requêtes HTTP, comment déterminer le nombre de requêtes HTTP, leurs effets sur les performances WordPress, comment les plugins et les thèmes ne facilitent pas les choses, et les solutions au problème.

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

Lorsqu'un navigateur Web affiche une page Web, il envoie une requête au serveur Web via HTTP pour des ressources ou des composants statiques (tels que des images, CSS et JavaScript). Le serveur répond et envoie les fichiers au navigateur. Ainsi, une requête envoyée par le navigateur au serveur à l'aide de HTTP est appelé une requête HTTP.

Analyse d'une requête HTTP

Pour mieux comprendre le sens d'une requête HTTP, jetez un coup d'œil au code HTML d'une simple page Web:

De l'image ci-dessus, vous pouvez voir qu'il y a un total de quatre Requêtes HTTP.

L'effet des requêtes HTTP sur WordPress

Selon la règle de performance de Yahoo:

80% du temps de réponse de l'utilisateur final est passé sur le serveur frontal. La majeure partie de ce temps est consacrée au téléchargement de tous les composants de la page: images, feuilles de style, scripts, Flash, etc. Réduire le nombre de composants réduit également le nombre de requêtes HTTP nécessaires au rendu de la page. C'est la clé pour des pages plus rapides.

De l'extrait ci-dessus, nous avons raison de déduire que moins le nombre de requêtes HTTP est important, plus le site Web est rapide; Par conséquent, un site utilisant WordPress avec beaucoup d'images et des fichiers CSS et JavaScript référencés en externe a tendance à être lent.

Comptage du nombre de requêtes HTTP

En utilisant l'extension Firebug de Firefox, et Inspecter l'élément outil pour Google Chrome et Opera, vous pouvez facilement déterminer le nombre de requêtes HTTP d’une page Web.

Voyons comment vérifier le nombre de requêtes HTTP de notre blog WordPress.

Utiliser Firefox

Assurez-vous d'avoir l'extension Firebug installée.

  • Chargez votre blog WordPress et appuyez sur le F12 clé pour ouvrir la console Firebug.
  • Accédez au Net Panel. s'il est désactivé, activez-le simplement.
  • Actualisez votre site WordPress afin que Net Panel capture et enregistre les demandes HTTP..
  • Vous devriez voir le nombre de requêtes HTTP affiché en bas.

Utiliser Chrome et Opera

Contrairement à Firefox, vous n'avez pas besoin d'une extension dans Chrome et Opera pour vérifier la requête HTTP, mais plutôt dans la version intégrée. Inspecter l'élément l'outil est utilisé.

Les étapes ci-dessous sont valables pour Chrome et Opera..

  • Chargez votre blog WordPress.
  • Faites un clic droit et sélectionnez la sélection Inspecter l'élément.
  • Accédez au Panneau de réseau et actualisez votre site WordPress.
  • Vous devriez voir le nombre de requêtes HTTP indiqué en bas.

Savez-vous que l'installation de la plupart des plugins WordPress augmente le nombre de composants de pages Web, augmentant ainsi le nombre de requêtes HTTP?

Comment les plugins et les thèmes augmentent les requêtes HTTP

Un grand nombre de plugins que nous installons augmente le nombre de requêtes HTTP sans le savoir.

La plupart des plugins s'appuient sur leurs images personnalisées, leurs CSS et leurs fichiers JavaScript pour fonctionner. Ils le font en ajoutant un lien faisant référence à ces composants à WordPress, ce qui augmente le nombre de requêtes HTTP..

Comme cas, nous allons utiliser le formulaire d’abonné WP afin de bien comprendre comment les plugins augmentent. Requête HTTP.

L’activation du plugin ajoutera un formulaire d’inscription à la fin du contenu de la publication et un lien vers son contenu. feuille de style externe à WordPress.

Voir le source de la page de votre site WordPress après l’activation du plugin révélera l’ajout d’un nouveau composant CSS comme indiqué ci-dessous, ce qui signifie une augmentation du nombre de requêtes HTTP.

Comme les plugins, les thèmes WordPress contiennent de nombreux composants CSS et JavaScript. Un thème typique est constitué de polices incorporées, de CSS et de composants JavaScript, ce qui entraîne une augmentation du nombre de requêtes..

Relation entre la minification et la requête HTTP

La taille de chaque composant de site Web individuel a également un effet sur les performances de WordPress. plus la taille de la requête est courte, plus la requête HTTP adressée au composant est rapide, car le navigateur passe moins de temps à le télécharger car il est de petite taille.
La taille des composants CSS et JavaScript peut être réduite par une minification (suppression de tous les caractères et espaces inutiles du code source).

Comment réduire les requêtes HTTP dans WordPress

Pour réduire le nombre de requêtes HTTP, nous devons réduire le nombre d'images, de fichiers CSS et JavaScript sur WordPress..

Je sais que l'idée de réduire le nombre d'images sur votre blog risque de ne pas plaire à certains d'entre nous, mais vous devez essayer autant que possible de supprimer les images qui ne sont pas essentielles à la présentation de notre site..

Thèmes WordPress utilise images de fond dans leur CSS pour améliorer sa beauté. Vous pouvez réduire le nombre d'images en les transformant en sprites. Voir cet article de A List Apart et Tuts + Screencast pour comprendre le fonctionnement des sprites CSS.

Les performances de WordPress peuvent être considérablement améliorées lorsque les thèmes CSS et JavaScript des thèmes sont respectivement combinés et minifiés..

Il existe quelques plugins WordPress tels que WP Minify et Better WordPress Minify (que j'ai utilisés et que je recommanderai ces plugins) qui combinent respectivement JavaScript et CSS dans un seul fichier, réduisant ainsi le nombre de requêtes HTTP.

Si vous utilisez le plugin W3 Total Cache, vous n'avez pas besoin d'installer les plugins ci-dessus, car il dispose d'une option pour réduire et combiner CSS et JavaScript..

En tant que développeur, j'édite des plugins qui ajoutent des composants supplémentaires à mon blog WordPress, coupant le CSS et le JavaScript ajoutés par les plugins et les collant dans le fichier CSS et JavaScript de mon thème pour les unifier..

Conclusion

L'importance de la vitesse du site Web ne peut pas être surestimée. Un site Web qui ralentit les visiteurs.

Il existe de nombreuses meilleures pratiques pour accélérer les sites Web et l'une d'entre elles consiste à réduire le nombre de requêtes HTTP apprises dans cet article..