DEV Community: Marie Gautron

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

Marie Gautron — Mon, 17 Apr 2023 17:24:20 +0000

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.

Comment travailler avec des boomers ? Le point de vue de la génération Z

Marie Gautron — Sat, 15 Apr 2023 10:04:10 +0000

Nous étions dans l'open space et ma designer avait besoin d'aide :

"Marie, tu peux m'aider pour une formule Excel*?"

— Ah mais je connais pas les formules Excel moi !

— Oui mais tu es développeuse…

— Oui mais pas une développeuse _ des années 80 _ !" 👀

En quelques instants, plusieurs regards de trentenaires se sont dirigés vers moi. D'une remarque, j'avais failli lancer un conflit de génération au sein de l'agence.

Seule représentante de la génération Z de l'agence parmi une dizaine de trentenaires et récemment embauchée, je suis aussi la plus jeune avec 23 ans. Si nos manières de travailler sont à peu près les mêmes, nous échangeons parfois des regards amusés (best of en bas) en employant des expressions différentes ou en parlant de nos séries TV favorites.

Du coup, je me suis posé la question : comment fais-je pour travailler avec des ~~vieux~~ boomers ? Est-ce que je fais des efforts en particulier comme quand je regarde Louis la brocante à la télé avec ma grand-mère ? J'ai fait des efforts pour m'adapter à mon environnement de travail mais lesquels étaient dus au boomers de mon entourage et lesquels étaient normaux ?

Vous l'aurez compris, toute personne plus âgée que la génération Z est pour moi un boomer. Un peu comme le "nord" commence à Lyon pour les sudistes.

Mon expérience peut profiter à toute ma génération et j'ai décidé d'écrire cet article. Après tout, des articles RH plus ou moins sérieux tentent bien d'expliquer comment travailler avec la génération Z. C'est dommage car si on lit plusieurs articles, on peut en ressortir avec des généralités du style "la génération Z ne veut pas travailler ou alors avoir des horaires random" et on passe pour une génération de fainéants.

OK, boomer! Le parler boomer

Le principal décalage entre les boomers et moi vient sans surprise du langage. C'est aussi celui qui nous fait le plus rire. Le boomer est avide de passer pour un jeune ou d'utiliser des expressions pour communiquer avec son entourage non-boomer. Quand nous parlons de nos expressions favorites, la cohésion de l'équipe atteint un niveau de teambuilding 100/100 !

Les expressions que mes boomers font semblant de comprendre

"Si tu fais ça en shlag c'est normal que ton site soit rincé" : si tu fais du mauvais code c'est normal que ton site soit pourri ;
La designer est en PLS : en position latérale de sécurité donc clairement en mauvaise santé ;
"Je go faire ça" : anglicisme pour dire qu'on va/il faut faire quelque chose notamment
"Claquée au sol cette maquette !" : si la designer est en PLS, il y a de fortes chances que son travail le soit aussi, donc claquée au sol.
"J'ai la turbo flemme" : en génération de feignant, il nous fallait bien une expression pour exprimer que l'on a pas envie de travailler. 🙄 Turbo entre dans la famille des : gavé, tarpin, grave …

Les expressions des boomers que je comprends quand même

"Ça me fait trop triper" : apparemment c'est quand tu as pris de la drogue ou qu'un truc est chanmé ;
"Allez j'imprime mon billet de train et j'y vais" : no comment ;
"Ah j'ai perdu mes mots de passe" : c'est un comportement tragique du boomer qui choisit des mots de passe à la sécurité trop faible ou les oublie.

Travailler dans un environnement boomer

Travailler avec des boomers, c'est souvent au sein d'une entreprise. Qu'attend la génération Z de l'entreprise ? Apparemment que "leur manager leur confie des missions stimulantes avec des objectifs précis à atteindre en espérant toutefois qu'ils pourront travailler en autonomie, notamment à distance, et avoir des responsabilités." Je suis assez d'accord avec ça mais en parlant avec mes collègues boomers… eux aussi cherchent ça !

Le boomer manager

Je lis notamment sur Internet que "le rapport à la hiérarchie est différent. On passe d'un mode pyramidal à un mode réseau." Pour le coup je suis assez d'accord avec ça et c'est d'ailleurs ce que je vis chez Troopers où nous appliquons l'Holacracy. C'est une méthode de travail pour les réunions et l'organisation de l'entreprise, elle garantit que chacun peut s'exprimer et décider, quel que soit son âge ou son expérience !

En Holacracy, chacun peut donner son avis où rejoindre une partie de l'entreprise qui lui plaît. Les réunions sont très cadrées, on sépare les réunions où l'on parle du travail de celles où l'on parle de nos méthodes de travail (un peu comme la revue et la rétrospective dans Scrum). La prise de parole est aussi équitable que possible car chacun doit la prendre tour à tour et ça évite aux personnes les plus sûres d'elles de la monopoliser.

D'ailleurs, c'est là que j'ai dû faire des efforts, me mettre en avant et dire haut et fort ce que pensais et voulais. Si j'avais eu un manager pour me mettre en avant ou dire "Oui Marie peut prendre ce ticket", j'aurais été plus à l'aise que si j'avais dû le dire à moi-même. Le seul inconvénient de l'Holacracy est qu'une fois que tu l'as expérimentée, c'est sans doute un peu plus difficile de revenir ~~en arrière~~ dans une entreprise classique.

Dans ce mode d'organisation, il faut prendre ses responsabilités et finalement ça te met plus de pression qu'un manager, mais la liberté qu'elle procure permet de plus tester et d'expérimenter ; l'entreprise évolue plus librement. Donner son avis c'est fatigant, surtout quand en arrivant sur le monde du travail tu ne sais pas grand chose.

Le boomer développeur

Chez Troopers, je suis développeuse front et experte accessibilité. Je travaille avec plusieurs devs back et front, un PM et une designer (celle qui était en PLS). Même en cherchant bien, il n'y a pas de gouffres entre les différentes générations de développeurs, juste quelques particularités.

	Génération X	Génération Y (Millenials)	Génération Z
Leur travail	Dinosaures codant en C des applications ou même d’autres langages de programmation.	Avant on les appelait Webmasters, maintenant on les appelle dev front ou back	Ces devs se demandent ce qui les mettra au chômage entre le no code et l’IA CoPilot de GitHub
Leurs outils	Avant d’utiliser la ligne de commande, ils l’ont littéralement créée pour pouvoir s’en servir	Travaillent en ligne de commande	Travaillent avec l’interface graphique de Git
Il ou elle dit	“Je lance la compilation”	“On met pas en prod le vendredi”	“Go en prod”

Le boomer non-développeur

En tant qu'agence développant des outils numérique responsable, on s'est inscrit au Tech for Good Challenge et j'ai créé un tableau de suivi en ligne genre Trello. Mais mes collègues boomers ont l'habitude d'utiliser des mails et Excel**. Du coup mon tableau a fini au fond du cloud et j'ai dû envoyer un résumé par mail et faire un suivi des actions sur Excel, qui a presque provoqué la démission de notre product manager qui n'utilise que Jira.

L'autre point tragique, c'est la présence d'une imprimante dans l'agence. Elle est régulièrement utilisée par mes boomers pour imprimer le badge d'accès à un festival ou leur billet de train. Heureusement l'imprimante souffre d'obsolescence programmée et nous allons bientôt ne pas la remplacer.

En guise de conclusion

Est-ce que c'est dur de travailler avec des boomers ? La réponse est non car une année de naissance ne détermine pas tout ce que vous êtes. Quelles sont les différences entre les générations ? Il y en a sans doute quelques-unes mais le mieux est de s'intéresser à l'individu plutôt que d'essayer de le classifier.

D'après les articles les générations X et Y sont plus investies dans l'entreprise et ont pour ambition de gravir les "échelons". Ce que les Z remettent en question. Quand j'ai posé la question à mes boomers, ils étaient plutôt team génération Z car l'équilibre vie pro/perso est plus important pour eux car ils préfèrent accomplir des missions qui ont du sens que de se sacrifier au travail. Ces articles creusent un peu les incompréhensions et l'écart générationnel de manière artificielle.

Par exemple, je préfère passer par la ligne de commande au lieu de l'interface de Git, c'est quand même plus propre… Attendez… Serais-je moi-même en train de me boomeriser ?

* En réalité, c'était sur un tableau Google Sheets mais parler d'Excel est une astuce de boomer pour cacher son accent anglais et éviter de dire « Google Tschiit ».

**Oui, toujours "Google Shtit"