Comment éviter des charges réseau énormes dans WordPress (8 conseils d'experts)

La plupart des propriétaires de sites WordPress savent à quel point un site lent peut être frustrant. Vous avez fait le nécessaire : compressé les images, configuré la mise en cache et suivi les conseils de base pour la vitesse, mais vos pages prennent toujours trop de temps à se charger.

Nous avons constaté que le problème est souvent simple : les sites web téléchargent trop de données inutiles.

En termes techniques, cela s'appelle la « charge utile du réseau ». C'est simplement la quantité totale de données requise pour charger une page. La taille totale du téléchargement comprend le texte, les images, les vidéos, le CSS, le JavaScript, les polices et d'autres codes.

En gros, moins il y a de données à télécharger, plus la page se charge rapidement.

Donc, si vous cherchez à améliorer la vitesse de votre site web, vous êtes au bon endroit !

Dans ce guide, nous vous montrerons exactement comment réduire la taille de ces fichiers et éviter des charges utiles réseau énormes dans WordPress.

Pourquoi les charges utiles réseau énormes dans WordPress posent-elles problème ?

Avez-vous déjà utilisé un outil comme Google Lighthouse ou PageSpeed Insights pour vérifier la vitesse de votre site web ?

Parfois, vous pouvez voir un message indiquant : « Évitez les charges utiles réseau énormes ».

Essentiellement, cela signifie que votre page web est trop volumineuse, comme une valise trop lourde à porter. Une page web volumineuse prend plus de temps à se charger, ce qui peut être frustrant pour les personnes qui visitent votre site.

La charge utile réseau d'une page web est la taille totale de tous les éléments qui composent cette page. Cela comprend :

• Texte : Les mots que vous lisez sur la page
• Images & Médias : Les images et les vidéos que vous voyez
• Code : Les fichiers CSS et JavaScript qui donnent à la page son apparence et son bon fonctionnement
• Polices : Les styles spéciaux pour votre texte
• De plus, tous les autres éléments personnalisés

Ainsi, plus tous ces éléments sont importants combinés, plus il faut de temps pour que votre page Web apparaisse à l'écran.

Quelle taille est trop grande ? Voici un guide simple :

• Bon : Si toutes les parties de votre page Web totalisent moins de 2 Mo, c'est comme porter un sac léger. Elle est bien optimisée et se charge rapidement. Vous n'avez pas à vous en soucier outre mesure.
• À améliorer : Si votre page Web pèse entre 2 Mo et 4 Mo, c'est comme porter un sac à dos qui devient un peu lourd. Il y a peut-être des choses que vous pouvez alléger. Google vous donnera quelques conseils pour l'accélérer.
• Énorme : Si votre page Web pèse plus de 4 ou 5 Mo, c'est comme essayer de porter une valise énorme et débordante. Cela ralentira votre site Web pour vos visiteurs, vous devez donc faire de l'optimisation une priorité.

Si vous voyez le message « Éviter les charges réseau énormes », vous pouvez cliquer sur la petite flèche pour voir une liste de toutes les ressources qui composent votre page Web.

Vous voyez comment les fichiers les plus volumineux sont en haut de la liste ? Si vous vous concentrez sur la réduction de la taille de ces fichiers ou sur la suppression des fichiers inutiles, vous obtiendrez la plus grande amélioration des performances de WordPress.

En réduisant la taille de ces fichiers, vous utiliserez moins de données pour afficher la page Web, et elle se chargera plus rapidement.

Maintenant que vous savez pourquoi les pages Web volumineuses posent problème, explorons comment vous pouvez les éviter dans WordPress. Voici les 8 conseils que nous aborderons dans cet article :

1. Réduisez la taille de vos images
2. Intégrez les vidéos correctement
3. Utilisez le chargement différé pour les images et les vidéos
4. Réduisez la taille et le nombre des fichiers Javascript et CSS
5. Compresser les fichiers avec Gzip
6. Utiliser la mise en cache du navigateur pour éviter les téléchargements répétés
7. Utiliser moins de polices ou des polices système
8. Éviter les plugins lents
9. Frequently Asked Questions About Network Payloads in WordPress

Êtes-vous prêt ? Plongeons dans le vif du sujet !

1. Réduire la taille de vos images

L'une des principales causes de charges réseau importantes sont les grosses images.

Les smartphones et appareils photo d'aujourd'hui prennent des images de haute qualité avec des tailles de fichiers très importantes. Mais vous n'avez pas besoin de les conserver aussi volumineuses lorsque vous les affichez sur un site web.

Heureusement, vous pouvez optimiser les images pour les rendre jusqu'à 80 % plus petites sans perdre en qualité d'image. Cela a un impact plus important sur la charge réseau de votre site web que presque tout le reste.

Chez WPBeginner, nous optimisons toutes nos images avant de les télécharger. Nous redimensionnons nos images aux bonnes dimensions, puis nous réduisons leur taille de fichier à l'aide de divers outils.

Nous avons créé un guide utile basé sur la façon exacte dont nous procédons sur notre propre site web. Vous pouvez suivre notre article sur comment optimiser les images pour les performances web sans perdre en qualité.

2. Intégrer les vidéos correctement

Si vous avez des vidéos sur votre site web, vous devez faire attention à la manière dont vous les affichez.

Télécharger des vidéos directement sur votre site web peut entraîner des charges réseau importantes et ralentir considérablement votre site, surtout si elles commencent à se lire automatiquement.

La meilleure façon d'inclure des vidéos est de les intégrer à partir de plateformes vidéo comme YouTube ou Vimeo.

☝ Note : Nous utilisons YouTube pour héberger et diffuser nos vidéos. Vous pouvez découvrir nos tutoriels vidéo WordPress sur la chaîne YouTube WPBeginner.

Cette approche vous permet toujours de lire les vidéos sur votre site Web, mais comme elles sont stockées sur le serveur de quelqu'un d'autre, elles ne font pas partie de votre charge utile réseau.

C'est très utile car votre serveur n'a pas à gérer le transfert de données volumineux. De plus, ces plateformes sont conçues pour diffuser des vidéos efficacement, avec un streaming optimisé qui s'adapte à la connexion Internet de vos visiteurs.

De plus, de nombreux lecteurs vidéo de ces plateformes ne commenceront à charger la vidéo que lorsque l'utilisateur cliquera sur lecture, ce qui signifie moins de données transférées initialement.

Vous pouvez facilement ajouter les vidéos à votre site Web en utilisant le code d'intégration.

Pour en savoir plus sur ce sujet, consultez notre guide sur pourquoi vous ne devriez jamais télécharger une vidéo sur WordPress.

3. Utiliser le chargement différé pour les images et les vidéos

Le chargement différé est un autre excellent moyen d'éviter les charges utiles réseau importantes, surtout si votre site Web est rempli d'images ou de vidéos.

Normalement, lorsqu'une page Web se charge, le navigateur souhaite télécharger immédiatement toutes les images et vidéos, même si elles ne vont pas être vues tout de suite.

Imaginez si un restaurant vous apportait tous vos plats en même temps au lieu d'un par un. Ce serait écrasant !

C'est ce qui se passe sur une page Web si le chargement différé n'est pas implémenté. Tout doit être téléchargé d'avance, même si l'utilisateur ne peut pas encore le voir.

Ce n'est évidemment pas idéal, car cela signifie que votre site Web a une charge utile importante, et vous téléchargez beaucoup de données même si l'utilisateur ne consulte pas le contenu en bas de la page.

La solution à cela s'appelle le chargement différé.

Le chargement différé, c'est comme ce restaurant qui vous apporte chaque plat de votre repas au fur et à mesure que vous êtes prêt pour lui.

Avec le chargement différé, les images et les vidéos ne sont pas chargées tant qu'elles ne sont pas sur le point de défiler dans la vue de l'utilisateur à l'écran. De cette façon, le navigateur n'a besoin de charger que ce qui est nécessaire, quand c'est nécessaire.

Cela réduit la charge réseau initiale et la quantité de données à télécharger.

Voici quelques tutoriels utiles qui vous montrent comment configurer le chargement différé dans WordPress :

• Comment charger paresseusement les images dans WordPress
• Comment ajouter facilement le chargement différé pour les vidéos dans WordPress
• Comment charger en différé les Gravatars dans les commentaires WordPress

4. Réduisez la taille et le nombre des fichiers Javascript et CSS

L'un des meilleurs moyens d'éviter les gros volumes de données réseau sur votre site Web est de réduire la taille de vos fichiers CSS et JavaScript.

Votre site Web utilise des fichiers CSS pour le style et des fichiers JavaScript pour les fonctionnalités interactives.

Cependant, ces fichiers contiennent souvent des espaces et des commentaires supplémentaires qui ne sont pas nécessaires au fonctionnement du code. Vous pouvez supprimer ces éléments en toute sécurité pour réduire la taille des fichiers.

Cela signifie que ces fichiers fonctionneront toujours de la même manière, mais qu'il y aura moins de données à télécharger pour vos utilisateurs, ce qui accélérera le chargement de votre page.

Ce processus est appelé minification, et la bonne nouvelle est que vous pouvez utiliser un plugin WordPress comme WP Rocket pour minifier automatiquement vos fichiers.

Consultez notre guide sur comment minifier les fichiers CSS et JavaScript dans WordPress pour plus d'informations.

Maintenant, différentes parties de votre site Web auront généralement des fichiers CSS ou JavaScript différents. Par exemple, un fichier pour l'en-tête, un autre pour le corps, et peut-être même d'autres pour les plugins.

Mais de nombreux petits fichiers peuvent être moins efficaces qu'un seul gros fichier. Lorsqu'il y a de nombreux fichiers à charger, le navigateur doit les récupérer séparément, ce qui augmente la taille totale du téléchargement. Au lieu de cela, vous pouvez combiner plusieurs de ces petits fichiers en un seul fichier.

Des plugins populaires tels que WP Rocket (payant) et Autoptimize (gratuit) peuvent combiner et minifier automatiquement les fichiers CSS et JavaScript.

Vous pouvez apprendre à utiliser ces plugins dans notre guide sur comment corriger le JavaScript et le CSS bloquant le rendu dans WordPress.

5. Réduire la taille des fichiers avec Gzip

Une autre façon de réduire la taille de vos fichiers de site Web est de les compresser. Les fichiers textuels comme HTML, CSS et JavaScript peuvent être considérablement réduits en utilisant la compression Gzip.

En fait, la compression Gzip peut souvent réduire la taille de ces fichiers jusqu'à 70 % avant qu'ils ne soient envoyés au navigateur de l'utilisateur ! C'est une énorme économie sur la quantité de données qui doivent être transférées.

Cela réduit le temps de téléchargement des fichiers et rend le chargement de votre site Web WordPress beaucoup plus rapide. Une fois que les données compressées arrivent sur l'ordinateur de votre visiteur, le navigateur décompresse automatiquement les fichiers et les affiche à l'écran de l'utilisateur.

Vous n'avez pas à vous soucier de savoir si les navigateurs de vos utilisateurs prennent en charge la compression Gzip, car elle fonctionne dans tous les navigateurs Web populaires aujourd'hui.

De nombreux excellents plugins de mise en cache prennent également en charge la compression Gzip. Les options populaires incluent WP Rocket, WP Super Cache, et W3 Total Cache.

Nous avons précédemment utilisé WP Rocket sur le site Web WPBeginner, et nous avons eu une excellente expérience. Pour plus d'informations, consultez notre avis complet sur WP Rocket.

Avec WP Rocket, la compression Gzip sera automatiquement activée si votre hébergeur utilise le serveur Apache. Pour d'autres plugins de mise en cache, vous devrez peut-être l'activer dans les paramètres du plugin.

Pour des instructions détaillées, consultez notre guide sur comment activer la compression Gzip dans WordPress.

6. Utilisez la mise en cache du navigateur pour éviter les téléchargements répétés

Une autre façon d'éviter une charge réseau énorme dans WordPress, surtout si votre site a beaucoup de visiteurs réguliers, est d'essayer la mise en cache du navigateur.

Imaginez si vos visiteurs devaient télécharger tout le contenu de votre site web à chaque visite ! Ce serait incroyablement lent, et c'est exactement ce qui se passe si vous n'utilisez pas la mise en cache appropriée.

Lorsqu'une personne visite votre site web pour la première fois, son navigateur télécharge tout ce dont il a besoin : les images, le CSS, le JavaScript et toutes les autres ressources. Avec la mise en cache du navigateur, son navigateur enregistre une copie de ces fichiers sur son ordinateur.

Ensuite, la prochaine fois qu'elle visitera votre site web, son navigateur sera intelligent ! Il vérifiera les fichiers enregistrés localement avant de demander à nouveau tout le contenu à votre serveur.

Si le navigateur a une copie d'un fichier dans son cache, il l'utilise simplement au lieu de le télécharger à nouveau. Cela fait une grande différence pour réduire la charge réseau globale et offre aux visiteurs réguliers une expérience plus rapide et plus fluide.

Bien sûr, si le contenu de votre site web change fréquemment, comme pour un site d'actualités ou un blog mis à jour régulièrement, vous devrez indiquer aux navigateurs quand re-télécharger les dernières versions de vos fichiers. Cela garantira que tout le monde obtient le contenu le plus récent.

Vous pouvez contrôler cela en ajoutant des en-têtes Expires dans WordPress. Ces en-têtes indiquent au navigateur quand un fichier enregistré doit être considéré comme obsolète et doit être mis à jour.

7. Utilisez moins de polices ou des polices système

Les polices peuvent rendre votre site web attrayant et améliorer sa lisibilité. L'utilisation de polices personnalisées peut rendre votre site web unique et encourager vos visiteurs à passer plus de temps à naviguer.

Mais imaginez si vous deviez télécharger de nombreuses polices différentes chaque fois que vous visitiez un site Web. Il faudrait un certain temps pour afficher tout le contenu de la page.

L'astuce est d'utiliser un petit nombre de polices sur votre site Web. Nous vous recommandons de vous en tenir à deux polices principales et de les utiliser sur l'ensemble de votre site. Cela réduit le nombre total de fichiers que vos visiteurs doivent télécharger.

Encore mieux, vous pouvez utiliser des polices système au lieu de polices personnalisées.

Les polices système sont des polices déjà installées sur les ordinateurs des gens. Pensez-y comme à l'utilisation des polices standard de votre ordinateur, comme Arial ou Times New Roman.

Si vous choisissez des polices système pour votre site Web, vos utilisateurs n'ont pas besoin de télécharger de fichiers supplémentaires ! Cela réduit considérablement la taille de votre charge utile réseau et rend votre site Web plus rapide pour les visiteurs.

Pour plus d'informations, consultez notre guide sur comment désactiver les polices Google sur votre site WordPress.

8. Évitez les plugins lents

Enfin, parlons des plugins. Parfois, les plugins peuvent ralentir votre site Web et augmenter la taille de votre charge utile réseau en chargeant de nombreux fichiers JavaScript et CSS supplémentaires.

Vous devriez considérer les plugins comme des outils supplémentaires que vous ajoutez à votre site Web. Certains sont excellents et légers, tandis que d'autres peuvent être assez lourds. L'utilisation de trop de plugins lourds peut augmenter la taille de téléchargement de votre site Web.

Il est difficile de savoir quels plugins sont lents d'un coup d'œil, vous devrez donc faire quelques recherches. Pour plus d'informations, vous pouvez consulter notre guide sur quels plugins WordPress ralentissent votre site.

Une fois que vous avez trouvé les plugins qui augmentent la taille de téléchargement de votre page, vous avez quelques options.

Premièrement, vous pouvez contacter le développeur du plugin et voir s'il y a quelque chose que vous pouvez faire pour rendre le plugin plus efficace. Ou vous pourriez également rechercher un plugin plus rapide qui fait la même chose.

Pour des recommandations, consultez notre guide sur comment choisir les meilleurs plugins WordPress.

Parfois, vous constaterez que certains plugins lourds sont essentiels pour votre site Web. Dans ce cas, vous pouvez toujours rendre votre site Web plus rapide en chargeant ce plugin uniquement sur les pages qui en ont besoin au lieu de le charger partout.

Vous pouvez utiliser un plugin gratuit appelé Plugin Organizer pour désactiver les plugins sur les pages où ils ne sont pas nécessaires. Cela diminuera la charge réseau sur ces pages.

Foire aux questions sur les charges réseau dans WordPress

Voici quelques-unes des questions les plus courantes que les gens se posent sur la réduction des charges réseau dans WordPress. Ces réponses vous aideront à mieux comprendre les aspects techniques et les détails de mise en œuvre.

1. Qu'est-ce qu'une charge réseau exactement et pourquoi est-elle importante pour mon site WordPress ?

Une charge réseau est la quantité totale de données (images, CSS, JavaScript, HTML, etc.) que votre site Web envoie au navigateur d'un visiteur lorsqu'il charge une page. Des charges importantes ralentissent votre site car les visiteurs doivent télécharger plus de données, ce qui pose problème, en particulier pour les utilisateurs mobiles ou ceux qui ont des connexions Internet lentes. Google prend également en compte la taille de la charge lors du classement des sites Web, donc l'optimiser peut améliorer votre SEO.

2. Comment puis-je vérifier la taille actuelle de ma charge réseau ?

Vous pouvez vérifier votre charge utile réseau à l'aide de Google PageSpeed Insights, GTmetrix, ou des outils de développement de votre navigateur. Dans Chrome, appuyez sur F12, allez dans l'onglet Réseau, puis rechargez votre page. La taille totale apparaîtra en bas. Généralement, vous voudrez maintenir votre charge utile totale en dessous de 1-2 Mo pour des performances optimales.

3. La réduction des charges utiles réseau affectera-t-elle la fonctionnalité ou la conception de mon site Web ?

Pas si cela est fait correctement. Les techniques visent à optimiser et à compresser le contenu existant plutôt qu'à supprimer des fonctionnalités. Vous conserverez la même fonctionnalité et le même attrait visuel tout en diffusant le contenu plus efficacement. Cependant, testez toujours les modifications sur un site de staging d'abord pour vous assurer que tout fonctionne correctement.

4. À quelle fréquence dois-je optimiser mes charges utiles réseau ?

Vous devriez surveiller vos charges utiles mensuellement et optimiser chaque fois que vous ajoutez du nouveau contenu, des plugins ou des thèmes. Mettez en place des audits réguliers à l'aide d'outils tels que Google Search Console pour suivre vos Core Web Vitals. Des optimisations majeures peuvent être nécessaires trimestriellement, mais la maintenance continue devrait faire partie de votre routine de maintenance WordPress régulière.

5. Puis-je réduire les charges utiles réseau sans connaissances techniques ?

Oui, de nombreuses techniques d'optimisation peuvent être mises en œuvre à l'aide de plugins conviviaux tels que WP Rocket, Smush ou Autoptimize. Ces outils gèrent automatiquement la compression des images, la minification des fichiers et la mise en cache. Cependant, pour des optimisations avancées, vous pourriez avoir besoin de l'aide d'un développeur ou d'un expert WordPress.

Bonus : Guides d'experts liés aux performances de WordPress

Nous espérons que ce tutoriel vous a aidé à apprendre comment éviter des charges réseau énormes dans WordPress. Vous pourriez également consulter d'autres guides sur les moyens d'améliorer les performances de WordPress :

• Le guide ultime pour améliorer la vitesse et les performances de WordPress
• Pourquoi WordPress est-il lent ? Apprenez à le réparer
• Comment accélérer votre site web eCommerce
• Comment nous avons augmenté la vitesse de chargement des pages sur WPBeginner
• Comment effectuer correctement un test de vitesse de site Web
• Meilleurs plugins de mise en cache WordPress pour accélérer votre site Web
• Pourquoi avez-vous besoin d'un CDN pour votre blog WordPress ?
• Comment réduire les requêtes HTTP dans WordPress
• Comment décharger les médias WordPress pour améliorer la vitesse du site web
• Maintenance de la base de données WordPress : Comment optimiser votre base de données

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.