Mur social 
Analyse des flux 
Si vous avez déjà inséré le code d'intégration d'Instagram dans une page, constaté qu'il fonctionnait correctement pendant quelques mois, puis remarqué un espace blanc à l'endroit où se trouvait auparavant le fil d'actualité, vous connaissez déjà le problème dont traite cet article.
La plupart des personnes qui gèrent un flux social sur WordPress sont confrontées à ce problème, sous une forme ou une autre. Le flux devient vide, et il n’y a rien dans votre tableau de bord qui permette d’y remédier. Il ignore les polices de votre thème, ce qui lui donne toujours un aspect un peu « rajouté ».
Ou bien il continue de s'afficher sans problème pendant des mois, tandis que les articles qu'il contient deviennent de plus en plus anciens, car sa mise à jour a toujours été une tâche manuelle et cette tâche a fini par être oubliée.
Rien de tout cela n'apparaît dès le premier jour. Les deux approches semblent valables dès le premier jour.
Cette comparaison porte donc sur le sixième mois. Ce que chacun charge à chaque consultation de page, ce que chacun affiche lorsque la source cesse de répondre, et où se trouve la solution lorsque le flux est interrompu : sur votre tableau de bord ou sur celui de quelqu’un d’autre.
Dans cet article :
- Plugin de flux social ou widget d'intégration : la réponse en bref
- Attendez, un widget intégré, c'est la même chose qu'un flux social ?
- Qu'est-ce qui pose réellement problème une fois que l'alimentation fonctionne déjà ?
- J'ai testé les flux sociaux et les widgets : voici ce que j'en ai pensé
- Ce flux semble-t-il à sa place sur votre site ?
- Comment un flux de plugin continue de s'afficher alors que la plateforme ne le fait plus
- Alors, lequel choisir ?
- La vraie différence
Plugin de flux social ou widget d'intégration : la réponse en bref
Les deux prennent environ dix minutes à installer. C'est pourquoi l'installation n'est pas un critère de comparaison pertinent.
Un plugin de flux social stocke les données de votre flux au sein de votre installation WordPress et les affiche à l'aide du code propre à votre site. Un widget d'intégration, quant à lui, affiche le contenu provenant d'une source sur laquelle vous n'avez aucun contrôle.
Presque tout ce qui va de travers par la suite remonte à cette seule rupture.
| Plugin de flux social | Intégrer un widget | |
|---|---|---|
| Où se trouvent les données du flux | Au sein de votre installation WordPress | Sur les serveurs de la plateforme |
| Ce qui s'affiche sur la page | Le code HTML et CSS de votre site | Un bloc ou une iframe chargée depuis un autre emplacement |
| Lorsque la source est inaccessible | Permet de continuer le rendu à partir des données locales | Espace vide à l'endroit où se trouvait le flux |
| Qui peut le réparer quand il tombe en panne ? | Vous, dans votre tableau de bord | Celui à qui appartient l'objet qui s'est cassé |
C'est à cette dernière ligne que je prêterais attention. Lorsqu'une intégration ne fonctionne plus, le problème ne provient généralement pas de votre site ; vous n'avez donc aucun paramètre à modifier et il ne vous reste plus qu'à attendre.
Attendez, un widget intégré, c'est la même chose qu'un flux social ?
Réponse courte : non, ce sont deux choses différentes, même si elles servent toutes les deux à intégrer du contenu issu des réseaux sociaux.
Le code d'intégration d'Instagram correspond au bout de code que vous copiez à partir d'une publication spécifique. Un iframe YouTube ou Twitter/X fonctionne de la même manière. Vous récupérez le code sur la plateforme, vous le collez dans votre page, et c'est la plateforme qui affiche le contenu.
C'est cette dernière partie qui résume toute l'histoire. Ce qui s'affiche sur votre page n'est qu'un espace réservé qui indique au navigateur où aller chercher le contenu.
Ainsi, à chaque chargement de page, le navigateur de votre visiteur demande votre page à votre hébergeur, lit cet élément de remplacement, puis effectue une deuxième requête vers une destination totalement différente.
Votre message n'apparaîtra qu'une fois cet aller-retour terminé, et pas une seconde avant.
Un flux social fonctionne à l'inverse. Un plugin se connecte à votre compte, récupère vos publications dans votre installation WordPress et les y stocke. Lorsqu'un utilisateur charge la page, le flux s'y trouve déjà. Il n'y a rien à aller chercher, personne à attendre.
L'autre différence réside dans ce que vous publiez sur la page au départ. Un contenu intégré correspond à un seul article, figé au moment où vous l'avez collé. Un flux, quant à lui, est un ensemble d'articles en continu qui se met à jour automatiquement au fur et à mesure de vos publications.
C'est pourquoi on les compare souvent, mais on les utilise rarement à la place l'un de l'autre. L'un sert à afficher un message spécifique. L'autre sert à afficher le dernier message que vous avez publié.
Qu'est-ce qui pose réellement problème une fois que l'alimentation fonctionne déjà ?
Presque tous les propriétaires de sites avec lesquels je discute des flux décrivent le même scénario. La configuration s'est bien passée. Un problème est survenu quelques mois plus tard. Et lorsqu'ils ont voulu y remédier, ils se sont rendu compte qu'il n'y avait rien à corriger dans leur tableau de bord.
Trois versions de cette histoire reviennent sans cesse. Ce qui est intéressant, ce n’est pas l’échec en soi, mais plutôt de savoir qui a pu y remédier.
L'espace vide où se trouvait auparavant le fil d'actualité
C'est celui dont la partie silencieuse est la plus longue. Le flux cesse de s'afficher, et il ne reste plus qu'un espace vide à la place des publications.
Personne ne reçoit d'alerte lorsque cela se produit. WordPress ne détecte pas la disparition du flux, car du point de vue de votre installation, rien n'a changé sur votre site.
Du coup, les gens le découvrent par hasard. Un visiteur en parle. Ou bien, quelques mois plus tard, alors qu’ils modifient cette page pour une raison sans rapport, ils remarquent cette lacune.
Le flux qui ne tient pas compte de votre thème
Ce n'est pas un échec. C'est une irritation qui s'installe petit à petit et qui finit par se transformer en projet.
Le propriétaire remarque que le flux semble avoir été ajouté à la va-vite. La police ne convient pas, la couleur des liens n’est pas la bonne, les coins sont trop arrondis ou pas assez. Son site a un style bien défini, et le flux ne s’y intègre manifestement pas.
Ils essaient donc de le redessiner, mais ça s'arrête là. Le style n'est pas disponible dans leur personnalisateur de thème ni dans les paramètres de leurs blocs, car le code source ne leur appartient pas. Il est arrivé déjà stylisé depuis l'endroit d'où il a été chargé.
Le fil d'actualité qui s'est périmé sans tomber en panne
C'est le plus problématique, et il vaut mieux le séparer du bloc vide.
Un bloc vide est visible. Il manque manifestement quelque chose, donc tôt ou tard, quelqu’un le signalera. Un flux obsolète ne s’affiche pas du tout. Le flux s’affiche. Les images se chargent. La mise en page semble correcte.
Ces messages datent d'à peine trois mois.
Cela s'explique par le fait qu'un flux intégré n'est pas un flux à proprement parler. Il s'agit simplement des publications que vous aviez intégrées le jour où vous avez créé la page, et ce sont toujours ces mêmes publications.
Lorsque vous publiez une nouvelle vidéo, celle-ci est ajoutée à votre chaîne, et non à votre site. Pour qu'elle apparaisse sur votre page, vous devez revenir en arrière, copier un autre code d'intégration, puis le coller.
Ce qui ne pose pas de problème le premier mois. Au huitième mois, c'est une corvée qui a discrètement disparu de la liste, et personne ne s'en rend compte car rien ne s'est cassé.
J'ai constaté que cela ne fonctionnait pas du tout. Le site mène une campagne, la page d'accueil affiche un fil d'actualité, et le dernier article publié dans ce fil date de la saison dernière. Tous les visiteurs l'ont vu. Personne ne l'a signalé, car il n'y avait rien à signaler.
C'est le même schéma qui se répète dans les trois cas. L'espace vide, la mise en page incohérente, les articles obsolètes. Dans chaque cas, ce qu'il fallait faire ne relevait pas des capacités de votre tableau de bord.
Donc, soit vous attendez que ça passe, soit vous vous en accommodez, soit vous modifiez la manière dont le flux s'affiche sur la page dès le départ.
J'ai testé les flux sociaux et les widgets : voici ce que j'en ai pensé
Jusqu'à présent, nous avons surtout parlé de l'emplacement où sont stockées les données du flux. C'est dans cette section que tout cela se traduit en chiffres.
J'ai créé deux pages sur un site de test WordPress. Même thème, même modèle de page, même emplacement dans la mise en page. L'une des pages comportait des éléments intégrés sans mise en forme.
L'autre utilisait un flux du plugin Smash Balloon. Même contenu, même nombre d'articles. J'ai ensuite évalué les deux sites à l'aide de PageSpeed Insights, des DevTools de Chrome et de Pingdom.
Commencez par la page entière, car c'est la partie à laquelle personne ne s'attend.
| Page d'intégration Raw | Intégration d'un plugin | |
|---|---|---|
| Taille de la page | 8,4 Mo | 1,1 Mo |
| Demandes | 176 | 42 |
Une page de 8,4 Mo n'est pas forcément une page lente. C'est une page qui télécharge un fichier énorme, et le flux est le seul élément suffisamment volumineux pour expliquer cela. J'ai donc décomposé la charge utile par domaine pour voir qui l'envoyait réellement.
Page intégrée, taille du contenu par domaine :
| Domaine | Taille | Partager cette page |
|---|---|---|
| www.youtube.com | 7,5 Mo | 91.31% |
| fonts.gstatic.com | 292,3 Ko | 3.56% |
| www.google.com | 211,5 Ko | 2.58% |
| c0.wp.com | 71,4 Ko | 0.87% |
Relisez la ligne du haut. YouTube a fourni 91,31 % de cette page. Mon installation WordPress a apporté le thème, le contenu textuel, les images que j’avais mises en ligne, et pratiquement rien d’autre en termes de poids. La page provenait en grande partie des serveurs de quelqu’un d’autre.
Page d'actualités des plugins, mêmes domaines contactés :
www.youtube.com—widgetapi.js9 KiB etiframe_api4 KiB, et aucun des deux ne charge le lecteur tant que personne n'a cliqué dessusi.ytimg.com— vignettes, d'environ 49 à 57 Ko chacune
C'est là toute l'incidence externe. La page du plugin continue de communiquer avec YouTube, mais elle ne lui transmet tout simplement pas la page. Le lecteur s'affiche lorsqu'un visiteur demande une vidéo, et pas avant.
DevTools présente la même situation du point de vue des tiers, et ajoute l'élément qui fait vraiment mal.
| Coûts liés aux tiers | Page d'intégration Raw | Page des flux des plugins |
|---|---|---|
| Contenu YouTube | 8 772 KiB | 457 Ko |
| Heure du thread principal | 6 036 ms | — |
| Durée totale de blocage | 4 510 ms | 0 ms |
La charge utile a diminué d'environ 95 %. Mais le chiffre que je retiendrais, c'est le « Total Blocking Time », qui est passé de 4 510 ms à 0 ms, car celui-ci n'a absolument rien à voir avec la taille du téléchargement.
Cela signifie que le thread principal du navigateur est occupé à exécuter du code JavaScript tiers, période durant laquelle votre page ne peut pas répondre à un appui ou à un défilement. Cela a duré quatre secondes et demie, sur une page qui « semblait fonctionner correctement ».
Intégré dans le score que les gens courent réellement :
| Avant (intégration via iFrame) | Après (flux du plugin) | |
|---|---|---|
| PageSpeed mobile | 49 | 72 |
| PageSpeed pour ordinateur de bureau | 52 | 99 |
| Indice de vitesse mobile | 15.1s | 4.9s |
C'est l'indice de vitesse mobile qu'il faut retenir. Une différence de 15,1 s à 4,9 s : voilà ce qui sépare une page qui se charge pendant que l'utilisateur attend d'une page qui s'affiche déjà en grande partie à son arrivée.
Le principe est le même que pour les autres : le flux de la page intégrée était hébergé sur des serveurs que je ne contrôle pas, si bien que chaque visiteur payait le coût total de son chargement, et aucun paramètre de mon tableau de bord ne permettait de réduire ce coût.
La page du plugin fournissait le flux à partir des données déjà présentes dans l'installation WordPress ; il ne restait donc plus qu'à récupérer les fichiers multimédias que le visiteur demandait effectivement.
Conseil d'expert: si vous souhaitez en savoir plus, nous proposons un guide intitulé « Les flux des réseaux sociaux ralentissent-ils votre site web ? », dans lequel nous abordons le sujet plus en détail.
Ce flux semble-t-il à sa place sur votre site ?
Voici la question qui m'est le plus souvent posée au sujet des éléments intégrés, généralement formulée avec une certaine frustration : « Pourquoi cet élément ne ressemble-t-il en rien au reste de mon site ? »
Les deux pages de préproduction sont identiques, et le même thème est activé sur chacune d'elles. J'ai ajouté un flux créé à l'aide de Smash Balloon et je l'ai comparé à l'intégration manuelle effectuée précédemment.
Le flux du plugin a repris les paramètres du thème. Ses titres utilisent la police définie par le thème, et ses liens utilisent la couleur définie par le thème, car ce balisage s'affiche via la feuille de style de votre site, comme n'importe quel autre contenu de la page.
Ce n'était pas le cas du flux intégré. Il s'affichait avec une typographie et des couleurs définies ailleurs, et les appliquait quoi qu'en dise votre thème.
Voilà tout le principe. L'un des flux est mis en forme par votre site. L'autre est mis en forme avant d'arriver sur votre site.
Comment un flux de plugin continue de s'afficher alors que la plateforme ne le fait plus
Tout ce qui se trouve au-dessus de cette ligne constitue le problème. Cette section présente le mécanisme qui y apporte une réponse. Voici comment chaque élément correspond à un dysfonctionnement dont vous avez déjà pris connaissance.
Il conserve une copie locale de votre flux
Avec un plugin de flux social de haute qualité comme Smash Balloon, vous bénéficiez d'un système de mise en cache de sauvegarde qui stocke les données de votre flux au sein même de votre installation WordPress.
En cas de panne d'Instagram ou si l'API cesse de répondre, le plugin dispose d'un contenu à afficher. Votre fil d'actualité continue de s'afficher sans laisser de vide.
C'est là toute la différence sur laquelle repose l'ensemble de cet article. La page du plugin conserve vos articles dans la base de données ; elle a donc du contenu à afficher lorsque la plateforme ne répond pas.
Mais la page d'intégration comporte un espace réservé et une adresse, et si aucune réponse n'est renvoyée depuis cette adresse, rien ne s'affiche.
Il ne charge pas les iframes tierces
Smash Balloon affiche les flux sans charger d'iframes tierces qui ralentissent les pages.
C'est pourquoi la page du plugin a contacté moins de domaines externes et pesait 1,1 Mo, contre 8,4 Mo pour la page intégrée. Il n'y a pas de chaîne de requêtes, car il n'y a rien à récupérer.
Il utilise le chargement différé et la mise en cache intelligente
Les images se chargent au fur et à mesure que le visiteur fait défiler la page, et grâce aux données mises en cache, votre serveur n'a pas besoin d'interroger l'API à chaque consultation de page.
Voici le résultat concernant le « Total Blocking Time » : 4 510 ms sur la page intégrée, 0 ms sur la page du plugin.
La solution se trouve dans votre propre tableau de bord
Aucune connaissance en programmation n'est requise. Les paramètres du flux se trouvent dans votre interface d'administration WordPress, à côté de tous les autres éléments que vous gérez.
C'est l'aspect auquel j'accorderais le plus d'importance. Même dans le cas improbable où un problème surviendrait, il vous suffit d'ouvrir une page à laquelle vous avez déjà accès ou de contacter l'équipe d'assistance. Avec les intégrations manuelles, vous êtes à la merci d'une infrastructure que vous ne contrôlez pas.
Environ 1,75 million de personnes utilisent les flux Smash Balloon sur leurs sites WordPress, ce qu'il est bon de savoir, notamment parce que cela signifie que les problèmes mentionnés ci-dessus ont été rencontrés et gérés à grande échelle.
Alors, lequel choisir ?
La question déterminante n'est pas de savoir lequel est le plus facile à configurer. Elle est la suivante : en cas de panne du flux, la solution se trouve-t-elle dans votre tableau de bord ou dans celui de quelqu'un d'autre ?
Voici comment je répondrais à cette question, en fonction de ce que vous développez concrètement.
- Vous intégrez un article ou une vidéo dans un article. Utilisez le code d'intégration fourni par la plateforme. Il s'agit d'un contenu unique qui n'est pas destiné à être mis à jour ; c'est donc l'option la plus simple, bien que limitée, qui s'impose.
- Vous gérez un flux en continu sur une page que vous souhaitez voir s'afficher rapidement et être indexée. Utilisez un plugin. Les chiffres de performance cités plus haut dans cet article en expliquent la raison : 8,4 Mo contre 1,1 Mo, 176 requêtes contre 42. Un flux en direct se charge à chaque visite ; quel que soit son coût, vous le payez donc à chaque fois.
- Vous ne vous connectez pas à votre site chaque semaine, ou bien c'est un client ou un freelance qui s'en occupe. Utilisez un plugin. Le problème, dans ce cas, c'est le silence. Aucun message d'erreur n'apparaît ; le flux cesse simplement de s'afficher, tandis que la page continue de se charger normalement.
- Vous gérez des flux provenant de plusieurs plateformes. Utilisez un plugin, et choisissez-en un qui les couvre toutes. Avoir des codes d'intégration distincts pour chaque site, c'est s'exposer à cinq sources potentielles de dysfonctionnement. Le « Social Wall » de Smash Balloon vous permet de créer des flux pour toutes ces plateformes et même de les regrouper au sein d'un mur social.
La vraie différence
Au premier abord, les deux semblent assez similaires, mais la différence apparaît dès qu'un problème survient. Lorsque j'ai rendu la source des deux flux inaccessible, la page du plugin a continué à afficher les articles à partir des données stockées dans l'installation WordPress.
La page d'intégration ne disposait d'aucune solution de secours locale. C'est là que réside la véritable différence. Dans un cas, les données de votre flux sont hébergées sur votre propre serveur et la correction s'effectue depuis votre propre tableau de bord. Dans l'autre, les deux se trouvent hors de votre portée.
Si vous gérez un fil d'actualité en continu, Smash Balloon Instagram Feed Pro est un excellent point de départ qui vous permettra de créer des fils d'actualité pour la plateforme visuelle n° 1 du marché.
Vous gérez plusieurs flux provenant de différentes plateformes ? Le pack « All Access » regroupe Instagram, Facebook, YouTube et X dans un seul écran de paramètres.
