Impact d'une vidéo intégrée sur une page Web.

Les vidéos intégrées, également connues sous leur équivalent anglophone « embedded videos », sont des ressources populaires pour enrichir une page Web.

Dans l'éditeur de Ghost CMS, le logiciel de gestion de contenu que nous préconisons, il suffit de copier-coller l'URL de la vidéo et celle-ci se fait directement intégrée au reste de la page en quelques secondes.

Malheureusement, les vidéos sont connues pour être très gourmandes en ressources et en données. Mais à quel point? 🤔

N'ayant pas la réponse à cette question, nous avons décidé aujourd'hui de mener quelques expérimentations pour évaluer la quantité de données transférées, l'empreinte carbone générée et l'effet sur la vitesse de chargement de la page.

Méthodologie

Pour réaliser ces tests, nous avons utilisé notre seule page contenant actuellement une vidéo : celle où nous présentons notre vidéo de présentation dans le cadre du défi OSEntreprendre 2023.

Afin d'avoir un comparatif, nous avons dupliqué cette page de façon à avoir une page avec une vidéo et une autre sans. Les deux pages avaient exactement le même contenu, à l'exception de la vidéo.

Dans le but de garantir un environnement exempt d'interférences, nous avons effectué nos tests avec le navigateur Firefox, en mode de navigation privée.

Expérimentation #1 – Données transférées sans lecture

Saviez-vous que même si la vidéo n'est pas jouée par l'utilisateur, de nombreuses données sont néanmoins transférées? Notre expérimentation ci-dessous vise à découvrir combien.

Notre page Web contenant la vidéo a nécessité :

• 38 requêtes
• Plus de 1 100 Kibioctets (Kio) transférés
• Totalisant 3 700 Kio une fois décompressés par le navigateur

alors que celle ne l'ayant pas :

• 14 requêtes
• Seulement 44 Kio transférés
• Totalisant 124 Kio une fois décompressés par le navigateur

À elle seule, la vidéo a donc eu besoin de :

• 24 requêtes
• Près de 1 056 Kio transférés
• Totalisant 3 575 Kio une fois décompressés par le navigateur

Nous pouvons en conséquence affirmer sans l'ombre d'un doute que cette vidéo est la ressource la plus volumineuse de notre page Web, à un tel point qu'elle représente 95 % de son poids!

Le pire dans tout ça est que celle-ci n'a toujours pas jouée! 🙄

Expérimentation #2 – Données transférées lors de la lecture

Souhaitant approfondir nos connaissances sur les vidéos, nous avons décidé de poursuivre nos tests et de mesurer les données transférées lors de la lecture.

Comme la qualité de la vidéo a un impact significatif sur la quantité de données transférées, nous avons fait deux tests : l'un avec la qualité par défaut de 360p et l'autre, avec une qualité de 720p.

Les résultats ci-dessous sont pour notre vidéo durant approximativement 97 secondes (1 minute 37 secondes). Les chiffres peuvent varier selon la durée des vidéos.

Qualité de 360p

• 55 requêtes
• 5 400 Kio transférés
• Soit approximativement 55 Kio par seconde de contenu.

Qualité de 720p

• 80 requêtes
• 21 900 Kio transférés
• Soit approximativement 225 Kio par seconde de contenu

Doubler la qualité de la vidéo ne double pas la quantité de données, elle les quadruple (4 X) plutôt! 😯

Expérimentation #3 – Ce qu'en pensent les outils

Afin de rendre nos sites Web plus écoresponsables et plus performants, nous utilisons de nombreux outils gratuits qui analysent individuellement une page Web.

Nous les avons donc utilisés de nouveau dans le but de savoir ce qu'ils pensaient des deux versions de notre page Web. 🤨

Website Carbon

Website Carbon est l'un des premiers calculateurs qui permet d'estimer la quantité d'équivalent de CO₂ qu'une page Web peut produire. Une fois l'analyse d'une page terminée, deux métriques principales sont calculées :

• le nombre de pages plus propres que celle testée
• ainsi qu'une estimation de la quantité d'équivalent de CO₂ (CO₂e).

Page avec vidéo

• Plus propre que 76 % des pages testées
• 0,23 g de CO₂e émis par page vue

Page sans vidéo

• Plus propre que 99 % des pages testées
• 0,01 g de CO₂e émis par page vue

J'avoue que je ne m'attendais pas à ce que la page contenant la vidéo YouTube soit 23 fois plus polluante que celle ne l'ayant pas! L'ajout d'une seule vidéo YouTube intégrée a ainsi augmenté l'empreinte carbone de la page de façon significative. 🙈

PageSpeed Insights

Bien que l'outil de Google nommé PageSpeed Insights permette d'analyser plusieurs facettes d'une page Web, le comparatif ci-dessous ne se base que sur la performance, qui était la seule métrique qui différait entre les deux pages. Plus son score s'approche de 100 % et plus la page testée est considérée comme étant de meilleure qualité. 😎

• Page avec vidéo : 38 %
• Page sans vidéo : 97 %

Le retrait de la seule vidéo de la page pourrait donc causer une augmentation de 59 %, sans aucune autre modification! 😅

Conclusion

À l'aide de ces quelques expérimentations, nous avons pu constater que l'intégration d'une vidéo YouTube sur une page Web peut avoir des conséquences importantes en termes de performance et de responsabilité numérique.

Les résultats que nous avons obtenus aujourd'hui ont démontré que les vidéos intégrées entraînent :

• une augmentation significative des données transférées et de l'empreinte carbone
• ainsi qu'une baisse de la vitesse de chargement de la page.

Avant d'intégrer une vidéo dans une page Web, il est de ce fait important de considérer tous ces aspects, de se demander si elles sont vraiment nécessaires et, le cas échéant, réduire notre utilisation de la vidéo dans nos pages Web.