Ce qu'un élément YouTube intégré natif ne peut pas afficher sur votre site

Les autres propriétaires de sites WordPress ne cessaient de me répéter la même chose : les vidéos YouTube intégrées manuellement sont plus lourdes qu'elles n'en ont l'air, elles cessent de fonctionner plus souvent qu'on ne le pense et ralentissent imperceptiblement vos pages.

Après en avoir tant entendu parler, j'ai décidé de faire le test pour voir dans quelle mesure toutes ces critiques sont fondées.

Je vais vous montrer précisément ce qu’un code d’intégration natif de YouTube ne permet pas de faire sur votre site, de la limite d’une seule vidéo aux défaillances silencieuses que vous ne pouvez pas contrôler, sans oublier les chiffres réels « avant-après » issus de mon propre test.

À la fin, vous saurez quelles sont les limites de l'intégration native et comment afficher l'intégralité de votre chaîne sur votre site, rapidement et avec une mise à jour automatique.

• En bref : 4 choses que l'intégration native ne permet pas de faire
• Pourquoi l'argument « c'est juste lent » passe à côté du véritable problème
• Le lecteur intégré par défaut affiche une seule vidéo — et non votre chaîne ni votre liste de lecture
• L'intégration qui échoue en silence : « Vidéo indisponible » et « Lecture restreinte »
• Ce que les propriétaires de sites WordPress indiquent réellement avant de changer de plateforme
• Comment un plugin de flux résout ce que l'intégration ne peut pas faire
• Avant et après : un véritable test de poids des pages
• Conclusion : afficher plusieurs vidéos

En bref : 4 choses que l'intégration native ne permet pas de faire

Le module d'intégration natif affiche une seule vidéo sélectionnée manuellement, ne se met jamais à jour automatiquement, peut cesser de fonctionner sans prévenir et ralentit votre page. Ce sont là les quatre aspects à prendre en compte, et seul l'un d'entre eux correspond au coût en termes de vitesse que tous les guides mentionnent.

Selon Swarmify, l'intégration par défaut de YouTube ajoute entre 1,5 et 3 secondes au temps de chargement, entre 1,3 et 2,6 Mo au poids de la page et plus de 20 requêtes HTTP.

Comme vous pouvez le constater, le problème de vitesse est bel et bien réel. Mais c'est aussi le moins grave des quatre problèmes.

Une vitesse que vous pouvez mesurer et gérer. Les trois autres limites sont inhérentes au fonctionnement de l'intégration native, et aucun paramètre de votre côté ne permet de les désactiver. Les voici, en toute simplicité :

• Il affiche une seule vidéo sélectionnée manuellement. Il n'est pas possible d'ajouter une chaîne entière ou une playlist en un seul bloc. Il faut coller les vidéos une par une, manuellement.
• Elle ne se met jamais à jour automatiquement. Dès que vous publiez une nouvelle vidéo, votre page reste figée. Vous devez y retourner et intégrer vous-même le nouveau clip, à chaque fois.
• Le problème survient sans avertissement. Une vidéo qui s'affiche correctement sur YouTube peut afficher le message « Vidéo indisponible » ou « Lecture restreinte » une fois intégrée, et c'est le propriétaire de la vidéo qui contrôle ce paramètre, comme l'indique l'aide de YouTube. Il n'est pas possible de contourner cette restriction.
• Cela alourdit votre page. Chaque élément intégré charge les scripts et génère les requêtes correspondantes, comme l'indiquent les chiffres de référence ci-dessus.

Même si vous ne lisez que cela, vous aurez une vue d'ensemble de la situation. L'intégration native convient très bien pour une seule vidéo. Mais si vous lui demandez de mettre en avant votre chaîne, de rester à jour ou d'être fiable, elle se heurte à ses limites.

Pourquoi l'argument « c'est juste lent » passe à côté du véritable problème

La plupart des articles consacrés à l'intégration de vidéos YouTube s'arrêtent à un certain point : les vidéos intégrées ralentissent votre site, il faut donc les charger de manière différée et passer à autre chose. Ce conseil n'est pas faux. Mais il ne reflète qu'une partie de la réalité.

Moi-même, je suis longtemps tombé dans ce piège. La vitesse est un aspect que nous remarquons tous immédiatement, mais alors qu'elle monopolise toute l'attention, les problèmes les plus complexes sont laissés de côté.

Même une vidéo intégrée avec un chargement différé parfait n'affiche qu'une seule vidéo. Elle n'ajoute toujours pas automatiquement vos nouvelles vidéos mises en ligne. Elle affiche toujours le message « Vidéo indisponible » dès que le propriétaire de la vidéo désactive l'intégration, et l'aide YouTube confirme que ce paramètre relève de leur responsabilité, et non de la vôtre.

La vitesse est donc un symptôme, et non la cause du problème. La véritable limite est d'ordre structurel. Elle est inhérente au fonctionnement même d'un iframe, et aucun réglage, aussi poussé soit-il, ne peut y remédier.

Même en réglant la vitesse, vous ne parvenez toujours pas à intégrer votre chaîne à une page. C'est là que réside le problème. La suite de cet article vous explique comment le résoudre, étape par étape.

Le lecteur intégré par défaut affiche une seule vidéo — et non votre chaîne ni votre liste de lecture

Ouvrez le panneau « Partager » > « Intégrer » de YouTube et examinez le code qui s'affiche. Dans cet iframe se cache un identifiant de vidéo unique. Cet identifiant constitue l'ensemble du code. L'intégration native est conçue pour afficher une seule vidéo, celle que vous avez copiée, et rien d'autre.

Ça fonctionne très bien, jusqu'à ce que vous souhaitiez mettre votre chaîne en avant.

Imaginons que vous publiiez des vidéos chaque semaine et que vous souhaitiez créer une page sur votre site pour les mettre en avant. La fonctionnalité d'intégration native ne propose pas d'option « Afficher ma chaîne » ni d'option « Afficher cette playlist ». Elle ne prend en compte que l'identifiant de la vidéo que vous avez collé.

Il faut donc le faire manuellement. Vous copiez le code d'intégration de la première vidéo et vous le collez. Vous copiez celui de la deuxième vidéo et vous le collez. Vous répétez l'opération pour chaque clip que vous souhaitez ajouter à la page.

Et puis tu recommences la semaine prochaine, et celle d'après.

C'est là que ça prend les gens au dépourvu. Une fois que ces vidéos intégrées sont sur votre page, elles restent figées. Même si vous publiez une nouvelle vidéo sur YouTube, votre page ne change pas.

Pour ajouter la nouvelle vidéo, il faut retourner dans WordPress, récupérer le nouveau code d'intégration et le coller soi-même à chaque fois que l'on publie une nouvelle vidéo. C'est le premier obstacle, et c'est le plus important.

L'intégration qui échoue en silence : « Vidéo indisponible » et « Lecture restreinte »

Voici le problème qui prend les gens au dépourvu. Une vidéo fonctionne parfaitement sur YouTube, vous l'intégrez à votre site, mais une fois en ligne, c'est un message d'erreur qui s'affiche à la place.

Le problème ne vient pas de votre côté. Le propriétaire de la vidéo a défini une règle qui bloque l'intégration, et vous ne pouvez pas la contourner depuis votre site, selon l'aide YouTube.

Voici les messages exacts qui pourraient s'afficher à la place de la vidéo :

• « Vidéo indisponible »
• « Regarder sur YouTube »
• « Vidéo indisponible. La lecture de cette vidéo est interdite sur certains sites. »
• « Vidéo indisponible. L'auteur de la vidéo ne l'a pas rendue accessible dans votre pays. »
• « La lecture sur d'autres sites web a été désactivée par le propriétaire de la vidéo »

Ces erreurs relèvent de la responsabilité du propriétaire de la vidéo ou du détenteur des droits, et non de la vôtre. C'est le propriétaire de la vidéo qui décide si celle-ci peut être lue en dehors de YouTube, et il peut désactiver l'intégration quand il le souhaite.

Voici donc le deuxième obstacle. L'intégration native peut céder sans que ce soit de votre faute ; elle se rompt sans avertissement, et vous n'avez aucun contrôle sur le paramètre qui a provoqué cette rupture.

Ce que les propriétaires de sites WordPress indiquent réellement avant de changer de plateforme

Si vous vous heurtez à ces obstacles, vous n'êtes pas seul. On entend sans cesse les mêmes plaintes.

Smash Balloon développe des plugins de flux sociaux utilisés par des millions de sites web ; à lui seul, son plugin YouTube Feed compte plus de 100 000 installations actives sur WordPress.org.

En parcourant les commentaires laissés par les utilisateurs lors du passage à l'intégration via des plugins, trois critiques reviennent le plus souvent.

Je trouve cet aspect rassurant, et je pense que vous le trouverez aussi. Les problèmes que vous rencontrez ne sont pas dus à une erreur de votre part. Ils sont inhérents à l'intégration native, et des milliers d'autres propriétaires ont rencontré exactement les mêmes.

Voici ces trois cas et les raisons pour lesquelles l'intégration native les provoque :

Ce que rapportent les propriétaires	Pourquoi l'intégration native en est la cause
« Certaines de mes vidéos affichent un message d'erreur au lieu de se lancer. »	Le propriétaire de la vidéo a désactivé l'intégration, et l'intégration native ne permet pas de contourner ce paramètre.
« Je ne peux pas afficher l'intégralité de ma chaîne ou de ma liste de lecture sous la forme d'un bloc unique qui reste à jour. »	L'intégration native est liée à un identifiant vidéo unique ; elle ne peut donc pas récupérer de contenu depuis une chaîne ni se mettre à jour automatiquement.
« La dernière chose que j'ai essayée a perturbé la mise en page de mon thème. »	Un iframe « brut » utilise une taille fixe qui ne correspond pas toujours à l'espace que lui attribue votre thème ; il peut donc déborder ou se rétrécir.

Ce dernier point répond à une question que beaucoup de gens se posent après une mauvaise expérience : pourquoi mon dernier plugin vidéo a-t-il perturbé la mise en page de mon thème ? Souvent, tout est une question de dimensions.

Un iframe natif n'est pas conçu pour s'adapter à votre thème ; il peut donc déborder de sa colonne ou laisser des espaces irréguliers sur les petits écrans.

Remarquez le point commun entre ces trois cas. Aucun d'entre eux n'est lié à la vitesse. Ils concernent le contrôle, les mises à jour et l'ajustement, et ce sont les raisons invoquées par les propriétaires juste avant de passer à un système d'alimentation.

Maintenant que vous avez une idée de la nature du problème, la solution est plus facile à comprendre. La section suivante explique comment un plugin de flux comble chacune de ces lacunes.

Comment un plugin de flux résout ce que l'intégration ne peut pas faire

Sur WordPress, c'est là que YouTube Feed Pro intervient comme solution. Le plugin de flux de Smash Balloon affiche votre chaîne, vos playlists et vos vidéos individuelles sur votre site, et s'adapte à chacun des cas de figure que nous avons évoqués plus haut.

Je vais vous expliquer comment cela permet de combler chaque lacune.

• Cela permet d'afficher l'intégralité de votre chaîne. Une fois que vous avez intégré le flux d'une chaîne YouTube ou d'une playlist, toutes les vidéos s'affichent dans un seul bloc. C'est la solution pour contourner la limite d'une seule vidéo.
• Il se met à jour automatiquement. Il suffit de publier une nouvelle vidéo sur YouTube pour que le flux l'ajoute tout seul. Plus besoin de retourner sur WordPress pour coller un nouveau code d'intégration chaque semaine. C'est la solution au problème de la réintégration manuelle qui bloquait le site.
• Il s'adapte à votre thème. Le plugin est conçu pour s'harmoniser avec votre thème actuel ; ainsi, le flux s'intègre parfaitement à votre mise en page, sans déborder de sa colonne ni se rétrécir sur les petits écrans. C'est la solution idéale pour répondre à la plainte « le dernier plugin a perturbé ma mise en page ».

• Le chargement est plus rapide. Le chargement différé intelligent retarde le chargement du lecteur YouTube jusqu’à ce qu’un visiteur interagisse réellement avec une vidéo ; ainsi, les scripts lourds ne se chargent que lorsqu’un utilisateur clique. C’est la solution au problème de la taille de la page et du temps de chargement, et j’ai mesuré son efficacité dans la section suivante.
• Il reste fiable. Un système de mise en cache de secours permet à votre flux de continuer à s'afficher même en cas d'indisponibilité de YouTube. Cela permet d'éviter le problème de « défaillance silencieuse » évoqué précédemment.

Voici chaque élément intégré natif, accompagné de la manière dont le fil d'actualité le gère.

Limite d'intégration native	Comment le flux gère cela
Affiche une vidéo, associée à un identifiant de vidéo unique	Affiche l'intégralité de votre chaîne ou de votre liste de lecture sous forme d'un seul flux
Il ne se met jamais à jour, donc il faut le réintégrer manuellement après chaque mise en ligne	Ajoute automatiquement les nouveaux fichiers mis en ligne une fois le flux configuré
Charge des scripts lourds liés aux joueurs à chaque consultation de page	Le chargement différé intelligent retarde le lancement du lecteur jusqu'à ce que le visiteur interagisse avec le contenu
Échoue sans message d'erreur lorsque le propriétaire bloque l'intégration	La mise en cache de secours permet de maintenir l'affichage du flux pendant les périodes d'indisponibilité
Correction d'un problème lié à la taille fixe des iframes pouvant perturber la mise en page	Conçu pour s'harmoniser avec votre thème actuel et s'adapter à l'espace disponible

Voilà comment ça fonctionne. Pour chaque barrière érigée par l'application native, le fil d'actualité apporte une réponse directe. Ce que je ne vous ai pas encore montré, ce sont les preuves, les chiffres concrets tirés d'une page réelle. Je vais vous les présenter tout de suite.

Avant et après : un véritable test de poids des pages

Voici la preuve que je vous avais promise. Je voulais vérifier si le chargement différé tenait réellement ses promesses, comme tout le monde le prétend, alors j'ai effectué le test moi-même au lieu de me fier aux chiffres avancés par d'autres.

La configuration était simple. J'ai créé un site WordPress de test et j'ai intégré quatre vidéos sur une seule page.

Dans un premier temps, je les ai intégrés sous forme d'iframes YouTube brutes, en utilisant le même code « Partager pour intégrer » que vous auriez vous-même copié-collé.

J'ai ensuite diffusé ces quatre mêmes vidéos via YouTube Feed Pro, en activant la fonctionnalité de chargement différé intelligent. J'ai mesuré les performances des deux pages à l'aide de Pingdom.

Ce sont mes propres résultats, obtenus sur un site de test. Il ne s'agit pas d'allégations du fournisseur, et vos chiffres varieront en fonction de votre thème, de votre hébergeur et de vos vidéos. Mais la tendance est difficile à ignorer.

Mesure	Intégrations YouTube brutes	YouTube Feed Pro (chargement différé)	Modifier
Temps de chargement	2.60s	1.49s	43 % plus rapide
Requêtes HTTP	145	61	58 % de moins
Poids de la page	7,0 Mo	1,9 Mo	73 % plus léger

C'est le chiffre indiquant le grammage du papier qui m'a fait m'arrêter et y regarder à deux fois.

Sur la page d'intégration brute, youtube.com représentait à lui seul 68,88 % du poids total de la page. Cela correspond à 4,7 Mo récupérés depuis YouTube avant même qu'un visiteur n'ait cliqué sur quoi que ce soit.

Sur la page du fil d'actualité, l'empreinte de YouTube est passée sous la barre des 1 % de la taille de la page et des 3,28 % des requêtes.

Cela s'explique par le mécanisme décrit dans la section précédente, qui fonctionne avec des nombres réels. Grâce au chargement différé, le fil d'actualité affiche d'abord une vignette et ne charge le lecteur YouTube complet que lorsqu'un utilisateur clique sur une vidéo.

Les scripts volumineux ne se chargent que pour les visiteurs qui souhaitent réellement les visionner. Tous les autres bénéficient d'une page légère et rapide.

Pour répondre directement à la question : oui, les éléments intégrés ralentissent suffisamment votre site pour que cela ait une incidence, et le chargement différé permet d'y remédier. Quatre éléments intégrés bruts ont fait passer ma page à 7,0 Mo et 2,60 s.

Ces quatre mêmes vidéos, diffusées via un flux utilisant le chargement différé intelligent, ont atteint 1,9 Mo et 1,49 s.

C'est là toute la différence entre charger l'intégralité de YouTube à chaque consultation de page et ne le charger que lorsqu'un visiteur en fait la demande.

Conclusion : afficher plusieurs vidéos

La véritable limite de l'intégration native ne se limite pas à la vitesse. Elle n'affiche qu'une seule vidéo, ne se met jamais à jour, échoue sans avertissement lorsque le propriétaire bloque l'intégration et alourdit votre page. Une approche basée sur un flux résout ces quatre problèmes d'un seul coup.

Il affiche l'intégralité de votre chaîne ou de votre liste de lecture dans un seul bloc, ajoute automatiquement les nouvelles vidéos mises en ligne, continue de s'afficher même en cas de panne et se charge rapidement.

J'ai constaté la différence lors de mes propres tests, et vous pouvez le vérifier par vous-même. Le fait de remplacer les intégrations brutes par un flux a permis de transformer une page lourde et lente en une page légère et rapide, alors que les quatre vidéos étaient les mêmes dans les deux cas.

Vous bénéficiez ainsi d'un contenu plus riche sur la page tout en réduisant son encombrement.

Prêt à diffuser plusieurs vidéos ? Commencez dès aujourd'hui à afficher votre flux grâce à Smash Balloon YouTube Feed Pro.

Pour un guide détaillé, consultez ce tutoriel qui explique comment intégrer un flux YouTube à votre site WordPress.