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.
💡After 5 tries, you may 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 facebook feed, the map and the videos. The more the facebook 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
💡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 "facebook".
Want to learn more?
Feel free to read this article by Laurent Devernay, which goes even further.