Il y a quelques semaines, l'un de nos clients (chez Troopers) 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.

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 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 <iframe> en HTML.

import React, { useState } from 'react'
import YouTube from 'react-youtube'

import Thumbnail from './Thumbnail'

const YoutubePlayer = ({
  videoId,
  autoplay,
  subtitles = 0,
  thumbnailUrl,
  thumbnailHeight,
  title,
  ...props
}) => {
  const [showVideo, setShowVideo] = useState(false)

  const handleClick = () => {
    setShowVideo(true)
  }

  if (showVideo) {
    return (
      <YouTube
        key={videoId}
        videoId={videoId}
        opts={{
          playerVars: {
            autoplay: true,
            cc_load_policy: subtitles,
            cc_lang_pref: 'fr',
            rel: '0',
          },
        }}
        style={{ minHeight: thumbnailHeight }}
        {...props}
      />
    )
  }

  return (
    // Ici on affiche la vignette : Étape 3 
  )
}

Étape 2 : Créer un composant Thumbnail

La deuxième étape consiste à créer un composant Thumbnail pour afficher la vignette de la vidéo et charger la vidéo uniquement lorsque l'utilisateur clique sur play.

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

import React from 'react'
import styles from './YoutubePlayer.scss'
import cn from 'classnames'

const Thumbnail = ({ handleClick, thumbnailUrl, videoId, thumbnailHeight, title, ...props }) => {
  return (
    <button onClick={handleClick} {...props}>
      <img
        src={thumbnailUrl || `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`}
        alt={title}
        height={thumbnailHeight}
        className={styles.Thumbnail}
      />
        <div className={styles.playButton} title="Lire la vidéo">
          <svg
            version="1.1"
            id="play"
            x="0px"
            y="0px"
            height="70px"
            width="70px"
            viewBox="0 0 100 100"
            enable-background="new 0 0 100 100"
          >
            <path
              fill="black"
              d="M38,69c-1,0.5-1.8,0-1.8-1.1V32.1c0-1.1,0.8-1.6,1.8-1.1l34,18c1,0.5,1,1.4,0,1.9L38,69z"
            />
          </svg>
        </div>
    </button>
  )
}

export default Thumbnail

Etape 3 : Utiliser le composant Thumbnail

Pour finir, nous utilisons le composant Thumbnail que nous venons de créer dans notre composant YoutubePlayer.

import React, { useState } from 'react'
import YouTube from 'react-youtube'

import Thumbnail from './Thumbnail'

const YoutubePlayer = ({
  videoId,
  autoplay,
  subtitles = 0,
  thumbnailUrl,
  thumbnailHeight,
  title,
  ...props
}) => {
  const [showVideo, setShowVideo] = useState(false)

  const handleClick = () => {
    setShowVideo(true)
  }

  if (showVideo) {
    return (
      <YouTube
        key={videoId}
        videoId={videoId}
        opts={{
          playerVars: {
            autoplay: true,
            cc_load_policy: subtitles,
            cc_lang_pref: 'fr',
            rel: '0',
          },
        }}
        style={{ minHeight: thumbnailHeight }}
        {...props}
      />
    )
  }

  return (
    <Thumbnail
      handleClick={handleClick}
      thumbnailUrl={thumbnailUrl}
      thumbnailHeight={thumbnailHeight}
      title={title}
      videoId={videoId}
      {...props}
    />
  )
}

Le résultat

Et voilà ! Le composant Thumbnail charge la vignette de la vidéo et ne charge la vidéo que lorsque l'utilisateur clique sur play.

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 Plyr. 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. Sur 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.