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é.
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
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".