Il y a quelques semaines, l'un de nos clients (chez [Troopers](https://troopers.coop/)) 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.** ![Ce lecteur pèse lourd alors que la vidéo n'est même pas lancée, c'est triste.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zogk7j0i9a40peppdxds.png) _Ce lecteur pèse lourd alors que la vidéo n'est même pas lancée, c'est triste._ ## 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 [CMS Headless](https://troopers.coop/expertises/cms-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 : `https://img.youtube.com/vi/${videoId}/0.jpg`. (0.jpg est la taille de la vignette que vous voulez récupérer). ### Étape 1 : modification du composant `YoutubePlayer` Nous allons modifier le composant `YoutubePlayer` pour qu'il affiche soit la vignette, soit la vidéo au clic. Dans ce projet, nous utilisons la librairie react-youtube pour afficher la vidéo, mais vous pouvez, en fonction de votre projet, simplement faire un `

gautron_marie

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

Join Our Newsletter. No Spam, Only the good stuff.