Mur social 
Analyse des flux 
Vous avez lancé PageSpeed Insights. Le rapport s'est mis au rouge. Et le coupable ? Vos éléments intégrés provenant des réseaux sociaux, signalés comme étant la cause de la baisse de vos scores. À présent, tous les articles que vous trouvez disent la même chose : il suffit de les supprimer.
J'ai discuté avec de nombreux propriétaires de sites qui se trouvent précisément dans cette situation. Ils adorent leur flux. C'est une preuve sociale qui les aide à générer des conversions. Mais ils craignent que ce soit la cause du ralentissement de leur site, et ils préféreraient ne pas le supprimer.
J'ai donc effectué ces tests moi-même. Un site WordPress : comparaison entre l'intégration directe de contenus et l'utilisation d'un plugin de flux, mesurée à l'aide de PageSpeed Insights, des outils de développement de Chrome et de Pingdom.
Ces chiffres m'ont moi-même surpris. Lors d'un test, le fait de remplacer l'élément « embed » a permis de réduire le poids de la page de près de 90 % et de faire passer le temps de blocage de 4 510 ms à zéro.
Je vais vous expliquer pourquoi votre flux a été signalé, ce que cela coûte et comment le conserver tout en respectant les critères Core Web Vitals. Il existe une méthode compliquée et une méthode simple, et je vais vous présenter les deux.
- Réponse rapide : Faut-il supprimer son fil d'actualité sur les réseaux sociaux ?
- Pourquoi PageSpeed a signalé un problème avec votre flux (ce n'est pas ce que vous croyez)
- Pourquoi « Il suffit de l'effacer » n'est pas la bonne solution
- Ce que coûte réellement votre fil d'actualité (nous l'avons mesuré)
- La méthode difficile ou la méthode facile pour régler ce problème
- Comment les formules d'abonnement de Smash Balloon contribuent à chaque indicateur
- Est-ce que cela fonctionne également pour les autres flux Smash Balloon ? (Oui — même solution)
- Conservez votre flux. Réussissez vos Core Web Vitals. Commencez dès maintenant.
Réponse rapide : Faut-il supprimer son fil d'actualité sur les réseaux sociaux ?
Non. Vous n'avez rien à supprimer.
Le flux n'a jamais été le véritable problème. Le problème, c'est le code d'intégration brut que vous avez collé. Cet iframe ou cet oEmbed tiers charge un lecteur complet avant même que quiconque n'ait cliqué sur quoi que ce soit.
Remplacez ce code d'intégration brut par un flux natif de WordPress. Il charge les images de manière différée et affiche le lecteur plus tard, ce qui permet à votre page de se charger plus rapidement, même si vos intégrations fonctionnent parfaitement.
Voici ce que protège chaque correctif :
- Évitez les iframes, utilisez le chargement différé des images et proposez des fichiers au format WebP. C'est là que réside le gain mesurable. Cela réduit le poids de la page et accélère le « Largest Contentful Paint », précisément là où les intégrations brutes ont échoué.
- Réservez de l'espace pour chaque image. Cela permet de stabiliser votre mise en page et de limiter le « Cumulative Layout Shift ».
- Attendez qu'un utilisateur clique avant de charger le lecteur tiers. Cela évite que le navigateur ne soit ralenti, ce qui permet à la page de rester réactive et d'éviter tout blocage pendant son chargement.
Il y a une méthode compliquée et une méthode simple pour y parvenir. Nous allons vous présenter les deux. C'est la méthode simple qui l'emporte.
Pourquoi PageSpeed a signalé un problème avec votre flux (ce n'est pas ce que vous croyez)
Pourquoi PageSpeed a-t-il spécifiquement signalé votre flux social ? Parce que vous n'avez pas simplement ajouté un flux. Vous avez ajouté un lecteur multimédia complet.
Voici ce que la plupart des gens ignorent. Ces codes oEmbed d'Instagram ou d'intégration YouTube ne se contentent pas d'afficher discrètement une photo. Dès le chargement de votre page, ils chargent l'intégralité du lecteur de la plateforme, ainsi que les scripts et l'iframe.
Pas quand quelqu'un clique. Avant que quiconque ne fasse quoi que ce soit.
Le navigateur cesse donc de charger votre page et va d'abord récupérer le code d'Instagram ou de YouTube. Cette requête est très gourmande en ressources. Et elle intervient au pire moment possible.
Lors de mon propre test Pingdom sur un site WordPress, neuf éléments YouTube intégrés bruts ont généré environ 7,5 Mo de code de lecteur avant même que quiconque n'appuie sur le bouton « Lecture ».
Cela représentait environ 92 % du poids de la page. Il s'agissait simplement de joueurs qui restaient là, en cours de chargement.
C’est ce qui influe sur votre « Largest Contentful Paint », c’est-à-dire la vitesse de chargement de votre contenu principal. Le lecteur s’impose devant votre contenu réel et oblige votre visiteur à attendre.
Imaginez maintenant une page contenant plusieurs éléments intégrés. Chacun d'entre eux répète l'ensemble du contenu.
Tout ce script monopolise également le thread principal, c'est-à-dire le seul canal utilisé par votre navigateur pour répondre aux clics et aux tapotements. Lorsqu'il est saturé, deux autres éléments en pâtissent :
- Votre « Interaction to Next Paint », c'est-à-dire la rapidité avec laquelle la page réagit lorsqu'un utilisateur appuie dessus.
- Votre « Cumulative Layout Shift », c'est-à-dire le déplacement des éléments à l'écran lorsque du contenu s'affiche tardivement.
PageSpeed n'a donc pas tort. Il détecte une page lente. Il pointe simplement du doigt « le flux », alors que le véritable facteur de ralentissement est le lecteur tiers qui y est intégré.
Le flux, c'est ce qui vous intéresse. La charge du lecteur, c'est ce qui ne vous intéresse pas.
Pourquoi « Il suffit de l'effacer » n'est pas la bonne solution
Voici la partie où j'ai raison. Les éléments intégrés au format Raw sont effectivement lents. Mon propre test l'a prouvé, et je vais vous montrer les chiffres ci-dessous.
Réfléchissez à ce que votre fil d'actualité vous apporte. C'est une preuve sociale. Il montre de vraies personnes qui utilisent votre produit, de vrais avis, de vraies publications. Cela renforce la confiance, et la confiance stimule les ventes.
Le supprimer pour réussir un test de vitesse n'est pas une bonne idée. Vous obtiendriez un score « vert », mais vous perdriez ce qui vous aide à convertir.
En réalité, le véritable choix n'a jamais été entre « le garder » et « le supprimer ». C'est un faux dilemme.
Le véritable choix est le suivant :
- Un code d'intégration brut s'affiche dans le lecteur lourd de la plateforme et fait chuter vos indicateurs de performance.
- Un flux de plugin natif affiche les mêmes articles, mais charge les images de manière différée et affiche le lecteur en second plan.
Même flux. Même preuve sociale. Une vitesse bien différente qui offre à vos visiteurs une meilleure expérience.
Continuez à lire. Chaque correction proposée à partir de là repose sur ce seul changement.
Ce que coûte réellement votre fil d'actualité (nous l'avons mesuré)
Vous connaissez déjà la théorie. Voici maintenant les chiffres.
J'ai effectué un test concret sur un site WordPress public, en comparant une version utilisant des intégrations brutes et une autre utilisant un flux de plugin. J'ai effectué les mesures à l'aide de PageSpeed Insights, des DevTools de Chrome et de Pingdom.
Voici l'impact de neuf codes d'intégration YouTube bruts sur cette page et les modifications apportées par le flux du plugin :
| Ce que j'ai mesuré | Éléments intégrés bruts | Flux des plugins |
|---|---|---|
| Code YouTube chargé | 8,8 Mo (92 % du poids de la page) | 457 Ko (baisse d'environ 95 %) |
| Durée totale de blocage | 4 510 ms | 0 ms |
| Indice de vitesse mobile | 15.1s | 4.9s |
| Score PageSpeed pour mobile | 49 | 72 |
| Score PageSpeed pour ordinateur de bureau | 52 | 99 |
Regardez cette première ligne. Près de 8,8 Mo de code du lecteur YouTube ont été chargés avant même que quiconque n'appuie sur « Lecture ».
Cela représentait environ 92 % de la page entière. Le flux du plugin a réduit ce volume d'environ 95 %, pour le ramener à 457 Ko.
Le « Total Blocking Time » est passé de 4 510 ms à zéro. Il s'agit du temps pendant lequel votre page reste figée, incapable de répondre à un appui. Ce temps est directement lié à votre « Interaction to Next Paint ».
J'ai ensuite vérifié l'intégralité de la page sur Pingdom pour m'en assurer. Les résultats concordaient. La page intégrée brute pesait 8,4 Mo et comportait 176 requêtes.
À titre de comparaison, la page de flux du plugin WordPress pesait 1,1 Mo et nécessitait 42 requêtes.
Deux outils distincts, testés sur la même page, qui ont donné les mêmes résultats.
Instagram a présenté le même scénario à plus petite échelle. Une intégration iframe fonctionnelle a atteint un temps de « Largest Contentful Paint » de 3,2 s sur mobile. C'est un échec.
En revanche, le même nombre de publications Instagram intégrées dans le flux d'un plugin a été chargé en 2,3 s.
Je vais tout vous dire, pour que vous puissiez me faire confiance par la suite. Il y a toutefois quelques points qui méritent une mise en garde.
- Certaines intégrations brutes ont affiché un LCP vidéo plus faible en laboratoire. Il s'agissait d'un artefact. Le navigateur utilisé pour le test n'a pas pu afficher la vignette. Pour les visiteurs réels, le LCP serait plus élevé.
- Le chiffre LCP d'Instagram correspond à un seul test ; il faut donc le considérer comme un indicateur utile, et non comme un verdict définitif.
- Il s'agit d'un site de test. Vos chiffres varieront en fonction de votre thème, de votre hébergeur et de votre contenu.
Je vous parle exprès de ces points faibles. L'important, ce n'est pas d'obtenir un chiffre parfait. Ce qui compte, c'est l'ampleur de l'écart, et le fait que les deux outils s'accordent sur ce point.
Vous souhaitez vérifier votre propre site ? Lancez PageSpeed Insights, ouvrez Chrome DevTools et testez la page sur Pingdom. Ce sont les trois mêmes outils que j'ai utilisés. Vous pouvez refaire tous les tests mentionnés ci-dessus.
La méthode difficile ou la méthode facile pour régler ce problème
Vous souhaitez donc conserver le flux et réussir l'examen. Il existe deux façons d'y parvenir.
L'une est manuelle. Vous effectuez chaque correction à la main. L'autre est un plugin qui effectue ces corrections à votre place.
Les deux fonctionnent. Mais elles ne demandent pas le même effort. Je vais vous montrer ce que chacune d'elles implique réellement.
La méthode manuelle : coder soi-même à la main
Vous voulez corriger ça vous-même, à la main ? C'est possible. Mais ça représente beaucoup de code, et on n'en voit jamais vraiment le bout.
Voici en quelques mots ce que signifie « le faire soi-même ». Vous devrez traiter chacun de ces points, un par un :
- Supprimez l'oEmbed. Supprimez le code d'intégration brut qui charge le lecteur lourd.
- Hébergez vous-même les vignettes. Téléchargez chaque image et mettez-la à disposition depuis votre propre site.
- Indiquez la largeur et la hauteur de chaque image. Cela permet de réserver l'espace nécessaire pour que votre mise en page ne se déforme pas.
- Créez une façade. Affichez une fausse image du lecteur et ne chargez le véritable lecteur YouTube que lorsqu'un utilisateur clique dessus.
- Chargement différé des images. Indiquez au navigateur de ne pas charger les images tant qu'elles ne sont pas visibles à l'écran.
- Convertissez manuellement chaque image au format WebP. C'est ce format plus léger qui s'est avéré efficace lors de mon test.
Voilà pour la configuration. Maintenant, voici la partie dont personne ne vous parle.
Il faut tout mettre à jour. À chaque fois qu'Instagram ou YouTube modifie son balisage, votre code risque de ne plus fonctionner. Et vous voilà obligé de vous y remettre pour le corriger à nouveau.
C'est un travail valable. C'est un travail honnête. Mais tu devras t'en occuper sans arrêt.
La solution simple : un plugin de flux natif pour WordPress
Voici la méthode la plus simple. Utilisez un plugin de flux natif de WordPress, comme Smash Balloon, qui se chargera de toutes les étapes décrites ci-dessus à votre place.
Aucune connaissance en programmation n'est requise. Le plugin supprime le code d'intégration, héberge lui-même les images et les charge de manière différée, réserve l'espace nécessaire, fournit les images au format WebP et ne lance le lecteur qu'au moment où l'utilisateur clique dessus. Il gère tout cela de manière autonome.
Voilà toute la liste des manuels, gérée automatiquement. Même si vous n'êtes pas un as de l'informatique, vous pouvez le configurer.
Et vous n'êtes pas le premier à l'utiliser. Smash Balloon compte plus de 1,75 million d'utilisateurs actifs et affiche une note de 4,9 étoiles sur 5.
Ce type d'adoption en dit long. De nombreux propriétaires de sites ont déjà opté pour la solution la plus simple, et celle-ci a fait ses preuves. Je vais maintenant vous montrer précisément comment elle protège chaque indicateur.
Comment les formules d'abonnement de Smash Balloon contribuent à chaque indicateur
Mais comment un seul plugin peut-il améliorer ces trois indicateurs à la fois ? Il s'attaque précisément à ce qui les pénalise : le chargement des fichiers lourds dès le début de la page.
Chaque correction correspond à un indicateur. Voici la version simplifiée.
| Mécanisme | Fonctionnalités |
|---|---|
| Aucun lecteur tiers ni aucune iframe ne se charge au démarrage | Supprime le code lourd du lecteur avant que quiconque ne clique dessus |
| Optimisation des images WebP | Affiche des images plus légères qui se chargent plus rapidement |
| Chargement différé et mise en cache intelligente | Charge les images uniquement lorsque cela est nécessaire, puis les conserve en cache |
Regardez la première ligne. Ce seul changement résume tout ce qui ressort de mon test.
Neuf codes d'intégration YouTube bruts ont généré environ 8,8 Mo de code de lecteur avant même que quiconque n'appuie sur « Lecture ».
Le flux du plugin a ignoré cette étape et a affiché des vignettes à la place. L'encombrement de YouTube a diminué d'environ 95 %, pour atteindre 457 Ko.
Moins de données à charger signifie que votre contenu principal prend la tête. C'est ainsi que vous réussissez le test « Largest Contentful Paint ».
La deuxième partie concerne les images elles-mêmes. Smash Balloon Instagram Feed Pro affiche vos photos au format WebP, un format plus léger. Les images plus légères s'affichent plus rapidement, ce qui, là encore, améliore votre LCP.
Le troisième aspect concerne la synchronisation et la réutilisation. Les images se chargent au fur et à mesure que le visiteur fait défiler la page, et non toutes en même temps. Les images mises en cache se chargent alors rapidement lors de la visite suivante.
C'est pour cette raison que les chiffres du laboratoire ont évolué ainsi. Le flux ne s'est pas allégé comme par magie. Il s'est allégé parce que le lecteur ne le chargeait jamais tant que personne ne le demandait.
Les mêmes publications que voient vos visiteurs. La même preuve sociale que vous avez établie. Mais avec beaucoup moins de poids.
Est-ce que cela fonctionne également pour les autres flux Smash Balloon ? (Oui — même solution)
Est-ce que ça ne fonctionne que pour Instagram ? Non. C'est la même solution pour tous les flux Smash Balloon.
Pour YouTube, le plugin associé est YouTube Feed Pro. Même principe, même résultat : les vignettes en premier, le lecteur à la demande.
La cause profonde reste toujours la même. L'intégration d'un fichier « raw » charge d'emblée le lecteur lourd de la plateforme.
En revanche, YouTube Feed Pro affiche des vignettes et ne lance la lecture qu'une fois que l'utilisateur a cliqué dessus.
N'oubliez pas que, d'après les tests, YouTube est le pire contrevenant de tous.
Neuf codes d'intégration YouTube bruts ont téléchargé environ 8,8 Mo de code de lecteur avant même que quiconque n'appuie sur « Lecture ». Le temps de blocage total s'est élevé à 4 510 ms.
L'utilisation de YouTube Feed Pro a permis de renverser la tendance. L'application affichait les mêmes vidéos sous forme de vignettes et ne chargeait le lecteur qu'au moment du clic. L'empreinte de YouTube a diminué d'environ 95 %, et le temps total de blocage est tombé à 0 ms.
Et ce n'est pas tout. Tous les plugins de flux de Smash Balloon sont conçus pour offrir une vitesse et un chargement rapides. Cela concerne Facebook, Instagram, TikTok, YouTube et X (anciennement Twitter).
Commencez dès maintenant à optimiser votre flux
Téléchargez les plugins Smash Balloon pour votre fil d'actualité et laissez-les maintenir vos Core Web Vitals au vert tout en conservant votre « social proof » exactement là où vous le souhaitez.
Questions fréquemment posées
Si je supprime l'élément intégré, est-ce que je perds le flux sur ma page ?
Non, supprimer l'élément intégré ne fait pas disparaître le flux de votre page. Vous le remplacez par un bloc de flux de plugin ou un shortcode à l'aide d'un outil comme Smash Balloon. Mêmes articles, même emplacement, mais beaucoup plus léger.
Est-ce que l'ajout d'un plugin ne risque pas de ralentir encore plus mon site ?
Tous les plugins ne ralentissent pas forcément votre site ; ainsi, en choisissant le bon, vous ne risquerez pas de le ralentir davantage. Une intégration brute affiche d’emblée le lecteur complet de la plateforme. Un plugin charge les images de manière différée et reporte l’affichage de ce lecteur, ce qui explique pourquoi mon test a permis de réduire le poids de la page de près de 87 %.
Comment savoir si c'est vraiment mon flux qui pose problème ?
Vous pouvez vérifier en quelques minutes si le problème vient de votre flux. Lancez PageSpeed Insights et examinez deux éléments : l'élément LCP et les transferts réseau les plus volumineux. Si l'élément signalé correspond à votre intégration, ou si les octets les plus volumineux proviennent des scripts du lecteur, c'est là que réside le problème.
Dois-je modifier le code pour régler la vitesse d'affichage de mes flux sociaux ?
Non, vous n'avez pas besoin de toucher au code. Il vous suffit d'installer le plugin, de connecter votre compte et d'insérer un bloc. Même si vous n'êtes pas un as de l'informatique, c'est tout ce qu'il y a à faire.
Conservez votre flux. Réussissez vos Core Web Vitals. Commencez dès maintenant.
Voici la seule chose qu'il faut retenir : votre fil d'actualité n'a jamais été le problème. Le problème venait de l'intégration brute, qui chargeait le lecteur complet de la plateforme avant même que quiconque n'ait cliqué.
Remplacez cet élément intégré par un plugin de flux social comme Smash Balloon, et constatez que la vitesse de votre site s'améliore tout en conservant votre « preuve sociale » là où elle doit être.
Il n'est donc pas nécessaire de supprimer votre fil d'actualité. Conservez-le et laissez-le se charger en mode allégé.
La solution la plus simple, c'est le pack « All Access ». Il comprend tous les plugins Smash Balloon pour les flux, donc que vous soyez sur Instagram, YouTube, Facebook, TikTok ou X, vous êtes paré.
Procurez-vous le pack « All Access », remplacez votre code d'intégration et regardez votre rapport PageSpeed passer au vert.
