Resources weight

What is the weight of resources ?

The resource weight corresponds to the bytes to be downloaded by the browser to retrieve all the elements necessary for the page (CSS styles, JavaScript scripts, images etc).

We distinguish the real weight of the resource from the transferred weight. The real size corresponds to the brute size of the file (the space it occupies in memory or on a hard disk) as for the transferred size, it is the space it occupies after compression. Usually WEB servers compress the resources before sending them in order to reduce the bandwidth needed for their download, then browsers decompress them after reception in order to restore them.

Why is it important ?

The more resources to load, the more the global weight of these resources is important and it takes time for the browser to recover everything. Also, the browser may limit simultaneous connections to the same site and put other connections on standby, which further increases the time it takes to load the page. Integrating a lot of resources into a page, therefore, directly impacts its loading speed, especially if the user does not have a good Internet connection, or if he is on a phone with a limited connection.

How to make it acceptable

Beyond all the methods to reduce the weight of resources (image compression, CSS style minimization, etc.), it is recommended to :

• do not exceed a global weight to be transferred of 4 MB
• limit the number of resources to be loaded as much as possible
• favour a simple and fast page, where the information the user is looking for is clearly accessible, rather than a heavy page with a lot of visual elements that take the user away from his search for information
• load dynamic elements when triggered by the user, for example, if clicking on a button brings up a modal window with an image, load the image at the time of the click and not in advance