Mooc impacts environnementaux du numérique
Comparer le poids des éléments d'une page web
FR
EN

De nombreux éléments très différents composent une page web. Ceux-ci ont un impact sur la quantité de données stockées et surtout qui transitent sur le réseau à chaque consultation de la page.

Pouvez-vous classer les composants de cette page selon leur poids : du plus faible au plus lourd ?

Si vous n'êtes pas sur mobile, il vous suffit de glisser/déposer les éléments les uns par rapport aux autres. Vous pouvez également cliquer sur un élément, puis sélectionner un autre élément avant lequel le premier élément sera placé.

Déjà fatigué de chercher ? Cliquez ici pour voir la solution !

Bravo vous avez réussi !

Vous savez maintenant identifier quels sont les éléments les plus lourds à charger dans une page, et commencez à comprendre certaines bonnes pratiques de l'éco-conception de services numériques !

Deux pages web peuvent rendre la même fonctionnalité mais avec des impacts environnementaux très différents, selon les éléments qui la composent. Utiliser l'outil le plus minimaliste adapté à la fonctionnalité à rendre est un grand principe de la sobriété numérique.

Attention, certains contenus sont dynamiques et continuent de charger des données au fur et à mesure de la navigation : c'est le cas par exemple du fil twitter, de la carte et des vidéos. Plus le fil twitter est déroulé ou la carte manipulée, plus la quantité de données transférées sur le réseau va augmenter. Par opposition une image est un contenu fixe, une fois chargée elle ne génère plus de trafic.

De plus la définition d'une vidéo, et donc son poids, est variable et peut dépendre du paramétrage de l'utilisateur dans le navigateur : réduisez au maximum la définition des vidéos que vous mettez en ligne en fonction de leur contenu et de leur usage, et adaptez la définition des vidéos que vous regardez à la taille de votre écran !

Et surtout, privilégiez les podcasts à la vidéo si vous n'avez besoin que du son !

Code : 042

Choisissez un autre composant avant lequel placer l'élément sélectionné.

Pour aller plus loin : si vous avez un navigateur de bureau, vous pouvez obtenir une mesure précise du poids des éléments en ouvrant l'onglet “Réseau” de votre navigateur. Vous trouverez plus d'informations sur ses outils de développement intégrés ici.
Rechargez ensuite la page et recherchez dans le champ "filtre" les éléments afin d'identifier les fichiers chargés et leurs poids : par exemple "openstreetmap" ou "twitter".

Activité réalisée par Benjamin Ninassi
Icons faites par Roundicons de www.flaticon.com
Une coproduction Class'Code et Inria