Mooc Environmental Impacts of Digital Technologies
Weight comparison of various elements composing a web page

A web page is made of many very different elements. These have an impact on the amount of data stored and conveyed on the network with each page view.

Can you sort the components on this page according to their weight from lightest to heaviest ?

If you are not on a mobile phone, you can simply drag and drop the elements in relation to each other. You can also click on an element and then select another element before which the first selected element will be placed.

Already tired ? Click here to see the solution!

Congratulations !

You now know how to identify which elements are the heaviest to load on a web page, and begin to understand some good practices in the eco-design of digital services!

Two web pages can achieve the same goal but with very different environmental impacts, depending on the elements that compose it. Using the most minimalist tool adapted to the functionalities needed is a great principle of digital sobriety.

Please note that some content is dynamic and continues to load data as you browse : this is the case, for example, of the twitter feed, the map and the videos. The more the twitter feed is unrolled or the map manipulated, the more the amount of data transferred on the network will increase. In contrast, an image is a fixed content, once loaded it no longer generates traffic.

Furthemore, the definition of a video, and therefore its weight, is variable and may depend on the user's settings in the browser: reduce the definition of the videos that you put online as much as possible according to their content. Moreover, adapt the definition of the videos you watch to the size of your screen!

Above all, prefer podcasts to video if you only need sound!

Code : 042

Choose another component before which to place the selected item.

To go further : if you have a desktop browser, you can get an accurate measure of the weight by opening the “Network” tab of your browser. You will find more information about its integrated development tools here.
Then reload the web page and search in the "filter" field for the various elements in order to identify the loaded files and their weights: for example "openstreetmap" or "twitter".

Activity produced by Benjamin Ninassi
Icons by Roundicons from
A co-production Class'Code and Inria