L’insoutenable poids des vidéos qu’on ne regarde pas

D’après le Shift Project, “le visionnage de vidéos en ligne a généré en 2018 plus de 300 MtCO2, soit autant de gaz à effet de serre que l’Espagne, ou près de 1 % des émissions mondiales.” Regarder des vidéos sur le Web a un impact, c’est tout sauf dématérialisé. Mais qu’en est-il des vidéos que l’on ne regarde pas ? 

Dans la plupart des systèmes de gestion de contenu, on intègre une vidéo dans une page Web en s’appuyant sur des plateformes de diffusion vidéo, comme YouTube, Vimeo, Dailymotion ou Peertube. Pour ce faire, on colle l’adresse de la vidéo dans un champ de formulaire, et la suite est automatisée. Mais quel est l’impact de cette pratique sur le poids de la page ? Prenons une page - lien externe gérée avec Osuny - lien externe, le commun numérique sur lequel nous travaillons. Sur cette page, ajoutons des vidéos provenant des 4 plateformes. Mesurons maintenant la page avec notre outil libre de diagnostic écologique, qui utilise Google Lighthouse.  

La page pèse 2.82 Mo, et génère 76 requêtes à des ressources externes. La majeure partie de ces ressources provient de l’intégration YouTube, une petite partie des trois autres plateformes. Et pourtant, on n’a pas cliqué sur les vidéos, personne ne les a regardées. 2.82 Mo, c’est très lourd, mais 2.82 Mo pour rien, c’est particulièrement absurde.

Pourquoi une vidéo que l’on ne regarde pas est-elle si lourde ? Parce qu’on charge le player vidéo, un ensemble de ressources HTML, JS, CSS et images, qui permettent d’afficher une image avec un bouton “play”, et souvent d’autres informations plus ou moins utiles et esthétiques. Cette image s’appelle parfois un poster, parfois une vignette (thumbnail). Dans le cas de YouTube, ce player est très lourd et très intrusif, n’hésitant pas à générer des cookies pas forcément acceptés.

Pour faire pareil, mais mieux, il suffirait d’utiliser juste l’image du poster, et de ne charger le player que quand la personne a cliqué sur le bouton “play”. Marie Gautron - lien externe a très bien expliqué l’approche dans un article titré “Réduisez l'impact environnemental des vidéos YouTube sur votre site web avec des vignettes. - lien externe” Nous avons adopté cette approche (merci beaucoup Marie !) dans le thème Osuny. La première itération nous a permis de nous débarrasser des players YouTube, Dailymotion et Vimeo, et de passer à 537 ko. YouTube et Dailymotion proposent une URL très simple pour obtenir le poster correspondant à une vidéo. Pour Vimeo, ce n’est pas si simple, mais le service gratuit Vumbnail permet de compenser le manque.

Malheureusement, nous n’avons pas trouvé de solution simple permettant d’obtenir un poster avec Peertube. Nous avons donc fait le choix d’afficher un bouton play sur un fond noir, avec le titre et la transcription de la vidéo si tout est rempli correctement. Cela permet de ramener la page à 221 ko.

Quand la personne souhaite voir la vidéo et clique sur le bouton “play”, on déclenche en JavaScript le téléchargement du player et la lecture de la vidéo. Là, c’est trop lourd, surtout YouTube, mais au moins ce n’est pas pour rien ! Et au passage, bénéfice collatéral, les boutons sont beaucoup plus jolis et unifiés, et personnalisables en fonction des choix de design du site concerné.