Les intégrations YouTube sont beaucoup trop lourdes, et on peut y remédier

• Les intégrations YouTube pèsent environ 1,3 Mo et ne mutualisent pas les ressources entre plusieurs embeds
• En utilisant le composant web <lite-youtube>, on peut descendre à environ 100 ko, mutualiser les ressources et ne sacrifier aucune fonctionnalité

Intégrer une vidéo YouTube

• Il est possible d’intégrer une vidéo YouTube dans un site web
• Dans le menu Share de YouTube, l’option < > Embed fournit un code HTML contenant un <iframe>
• Les <iframe> ne sont pas bons pour les performances, mais ils conviennent bien aux contenus tiers protégés

Suggestions pour améliorer les performances

• Ajouter l’attribut loading="lazy" pour éviter que la vidéo ne se charge immédiatement lorsqu’elle n’est pas visible
• Ajouter des styles inline pour conserver le ratio d’origine de la vidéo et la rendre fluide

Problèmes des intégrations YouTube actuelles

• Sur une page avec une seule intégration YouTube, on compte 32 requêtes, 1,3 Mo de données transférées et 2,76 secondes de chargement
• Les ressources n’étant pas mutualisées entre plusieurs embeds, le volume de données transférées augmente linéairement avec leur nombre

Apparence et fonctionnalités

• L’intégration YouTube fournit l’image « poster » de la vidéo, le titre de la vidéo et un gros bouton de lecture
• Ces fonctionnalités peuvent être reproduites sans consommer beaucoup de ressources

Pourquoi cette approche ?

• Des tests d’intégrations allégées auraient montré une baisse de l’engagement
• Mais ce résultat va à l’encontre de l’intuition et mérite un examen plus approfondi
• Une consommation excessive de ressources pose aussi un problème environnemental

Solution : reproduire l’expérience d’intégration autrement

• Il existe un composant web lite-youtube-embed, créé par Paul Irish de Google
• Ce composant met l’accent sur les performances visuelles et s’affiche environ 224 fois plus vite
• Il offre les mêmes fonctions que l’intégration par défaut tout en améliorant la vitesse, l’efficacité et la confidentialité par défaut

Comment utiliser Lite YouTube Embed

1. Lier le JavaScript qui initialise le composant web
2. L’utiliser

• Il peut être installé depuis npm ou copié dans le projet
• Il peut aussi être utilisé via un lien CDN

Alternatives

• Version Shadow DOM (protection des styles, mais stylisation plus difficile)
• Implémentation maison
  • Raymond Camden : création d’un composant web d’intégration YouTube (versions vanilla et WebC)
  • Adrian Roselli : composants web YouTube et Vimeo
• Mux : <youtube-video> (aligné sur la DOM API)
• Port React et version officielle Next.js

Récapitulatif de GN⁺

• Les intégrations YouTube consomment beaucoup de ressources et nuisent aux performances
• Des composants web comme lite-youtube-embed peuvent améliorer fortement les performances
• Cela peut aussi avoir un impact positif sur le plan environnemental
• D’autres composants web offrant des fonctions similaires méritent aussi d’être envisagés

[xguru]

lite-youtube-embed - intégration YouTube plus rapide

[GN⁺]

Avis sur Hacker News

• Sur une plateforme de forum communautaire, les intégrations YouTube sont détectées et remplacées par des miniatures proxy qui ne se chargent pas avant le clic

  • Le fait qu’une personne partage une vidéo YouTube ne devrait pas obliger tous les utilisateurs à télécharger plus de 1 Mo de JavaScript YouTube ni à voir leur IP suivie par Google

• L’auteur ne croit pas qu’une version légère réduise l’engagement

  • À l’inverse, j’y crois totalement
  • Dans la démo de la page du projet lite-youtube-embed recommandée, la version légère met plus de temps à lancer la lecture de la vidéo
  • Plus le temps de chargement augmente, même de quelques millisecondes, plus l’engagement diminue

• Il n’est pas surprenant qu’un autre lecteur soit perçu différemment par les utilisateurs

  • lite-youtube-embed empêche de cliquer vers la véritable page YouTube
  • Cela peut donner l’impression d’une tentative d’empêcher l’accès à la source réelle du contenu
  • Je lance rarement les vidéos intégrées, mais quand je le fais, je préfère l’expérience YouTube standard
  • S’il semble y avoir une couche supplémentaire, je suis moins enclin à cliquer

• C’est un exemple de la croyance erronée selon laquelle les développeurs ne peuvent pas savoir exactement comment les utilisateurs se servent d’un logiciel

  • Je veux réduire l’usage de la vidéo et de Google, ainsi que les mégaoctets de JavaScript
  • Pour un meilleur web, il faut arrêter d’intégrer des vidéos YouTube

• Il faut obliger les blogueurs à ne pas utiliser les intégrations GitHub Gist

  • Les générateurs de sites statiques comme Hugo prennent en charge les extraits de code avec coloration syntaxique
  • Les sites dynamiques peuvent utiliser highlight.js

• Une façon de réduire le poids total des intégrations et d’améliorer l’UX est de bloquer les publicités

  • On peut utiliser des Content Security Policies pour bloquer les publicités sur une page

• Côté utilisateur, on peut utiliser click 2 load comme solution pour les utilisateurs de uBlock

  • Cela pourrait ne pas fonctionner, car Chrome est en train de passer à manifest v3

• Des tests montrent que les intégrations légères réduisent l’engagement

  • Un temps de chargement plus rapide devrait améliorer l’engagement, mais si celui-ci baisse avec les intégrations légères, c’est probablement que des fonctionnalités ont été sacrifiées

• Une vidéo intégrée pourrait être un élément <video> pointant vers des fichiers sur les serveurs de YouTube

  • Les intérêts commerciaux s’y sont opposés

• Plus le nombre d’intégrations augmente, plus le poids augmente de façon linéaire

  • La politique de même origine devrait permettre de réutiliser les ressources mises en cache

• Je partage ma solution comme alternative à lite-youtube-embed

  • Elle offre un meilleur compromis en matière de personnalisation complète