Réduisez l'impact environnemental des vidéos YouTube sur votre site web avec des vignettes

Il y a quelques semaines, l'un de nos clients nous a remis les résultats d'un audit d'éco-conception. L’audit a montré que l'une des pages auditées pesait 20 Mo, dont 9,7 Mo étaient attribuables aux lecteurs intégrés de YouTube ! De plus, 51 requêtes de cette page sur 221 concernaient uniquement YouTube.com, alors que la page ne comportait que 4 vidéos intégrées.

Pour remédier à cela, nous avons décidé d'intégrer une petite action rapide lors de notre sprint : réduire le poids de la page en diminuant la taille des vidéos YouTube.

Réduire la taille de votre page web en affichant des vignettes pour les vidéos YouTube.

Les vidéos en ligne, et surtout celles de YouTube, sont connues pour être de vrais ogres énergétiques. En fait, elles représentent environ 20 % du total des émissions de gaz à effet de serre (GES) dues au numérique, soit 1 % des émissions mondiales de gaz à effet de serre, d'après une étude menée par The Shift Project en 2019.

Une des solutions pour réduire cet impact est de remplacer le lecteur YouTube par une vignette. Cette vignette peut ressembler au lecteur et inciter l’utilisateur à cliquer pour lancer la lecture. Cela évite de charger le lecteur vidéo au chargement de la page pour rien si le visiteur décide de ne pas lire la vidéo.

Avec cette méthode, la page web sera plus légère et moins énergivore. En effet, les vignettes sont des images statiques qui sont généralement assez petites en taille, ce qui signifie qu'elles ne nécessitent pas beaucoup de bande passante pour être téléchargées. De plus, les vignettes sont souvent mises en cache sur les navigateurs des utilisateurs, ce qui signifie que si une vignette a déjà été téléchargée pour une vidéo particulière, elle ne sera pas téléchargée à nouveau lorsque l'utilisateur visite une autre page qui contient la même vignette.

En revanche, les players vidéo, comme celui de YouTube, nécessitent une grande quantité de bande passante et de temps de chargement. Ils doivent non seulement télécharger la vidéo elle-même, mais également charger tous les éléments nécessaires pour lire et contrôler la vidéo, tels que les boutons de lecture/pause, les barres de progression, les options de qualité vidéo, etc. En conséquence, les vignettes sont une alternative efficace aux players vidéo pour réduire la consommation de bande passante et le temps de chargement des pages web.

En plus d'être plus respectueux de l'environnement, remplacer le player YouTube par une vignette de la vidéo permettra à vos utilisateurs de ne pas être embêtés par des lectures automatiques de vidéos qui peuvent vite devenir agaçants.

Et pour vous, pas de souci : vous n'aurez qu'à veiller à la taille des vignettes pour garantir une expérience utilisateur optimale. Tout le monde y gagne !

Comment remplacer le player YouTube par une vignette ?

Récupération du code embed depuis le CMS Headless Prismic

Dans le cas de ce client, nous récupérons un code embed depuis le Ouvre une nouvelle fenêtreCMS Headless Prismic.

Nous avons donc les données nécessaires de la vignette. Si ce n'est pas le cas dans votre projet, vous pouvez récupérer l'URL de la vignette comme ceci pour YouTube :

Étape 1 : modification du composant

Nous allons modifier le composant

Étape 2 : Créer un composant

La deuxième étape consiste à créer un composant

Nous avons également ajouté un icône player pour donner à la vignette l'apparence d'une vidéo. Personnalisez le svg comme vous voulez !

Etape 3 : Utiliser le composant

Pour finir, nous utilisons le composant

Le résultat

Et voilà ! Le composant

Voici à quoi ça ressemble :

Vous vous souvenez de cette fameuse page dont l’audit a montré qu’elle pesait 20 Mo ? A présent elle pèse 12 Mo. Nous avons donc gagné 8 Mo sur cette page ! De plus, on a réduit le nombre de requêtes de la page. Précédemment, le navigateur faisait 221 requêtes pour charger tous les contenus de la page, aujourd'hui il n’y a plus que 136 requêtes !

Des astuces supplémentaires pour réduire l'impact environnemental de vos vidéos

Tout d'abord, essayez d'utiliser un lecteur vidéo optimisé pour la consommation d'énergie, comme le lecteur Ouvre une nouvelle fenêtrePlyr. En réduisant la quantité d'énergie nécessaire pour diffuser des vidéos, vous pouvez considérablement réduire l'impact environnemental de votre application.

De plus, si vous le pouvez, utilisez des plateformes alternatives à YouTube, comme Peertube. PeerTube est une plateforme décentralisée et open-source qui permet aux utilisateurs de créer et de gérer leur propre serveur PeerTube, créant ainsi un réseau de serveurs autonomes qui partagent du contenu vidéo via un protocole peer-to-peer (P2P). Contrairement à YouTube, où chaque vidéo est stockée sur les serveurs de Google et diffusée directement aux utilisateurs, PeerTube permet aux utilisateurs de télécharger des vidéos sur des serveurs locaux et de les diffuser en utilisant le protocole P2P, ce qui réduit la charge sur les serveurs centraux et la consommation d'énergie associée.

Si vous utilisez des vidéos YouTube, il est également possible de limiter la consommation énergétique en n'affichant pas l'iframe de la vidéo sur votre page. À la place, vous pouvez simplement afficher une vignette qui, lorsqu'elle est cliquée, ouvrira une nouvelle fenêtre avec la vidéo YouTube. Ouvre une nouvelle fenêtreSur notre site pour nos vidéos Peertube, nous avons opté pour cette solution.

De plus, au lieu de charger directement la vidéo, vous pouvez utiliser l'API Youtube (ou Peertube dans notre cas) pour récupérer les informations sur la vidéo, telles que le titre, la description et le nombre de vues. Cela vous permettra d'afficher ces informations sans avoir besoin de charger la vidéo elle-même. Astuce que l’on a aussi utilisé pour notre site !

Conclusion

En utilisant des vignettes et en chargeant les vidéos seulement lorsque l'utilisateur en a besoin, vous pouvez non seulement réduire la taille de votre page, mais aussi réduire la consommation d'énergie nécessaire pour charger votre site.

En utilisant ces bonnes pratiques, vous pouvez contribuer à la préservation de l'environnement tout en offrant une expérience utilisateur optimale à vos visiteurs et conforme au numérique responsable.