Unused JavaScript resources

What is an unused JavaScript resource ?

It is a JavaScript script included by the page whose code is not or almost not used  (use less than 25%). For example, the page loads a JavaScript module offering a multitude of utilities and uses only the function necessary for date formatting.

Why is it useful to avoid them ?

Loading an unused resource adds to the overall weight of the page and delays its loading. Furthermore, the browser must also interpret the code, which delays the interaction time for the user. Even if the script is loaded asynchronously and is not required for the first rendering, the code competes for bandwidth with other resources during download, which has significant performance implications. Therefore, it makes sense to rework/remove these scripts to improve the speed of the page and the user experience.

How do I manage an unused JavaScript resource ?

Before intervening on JavaScript files, it is necessary to understand that page analysis focuses on page optimization without taking into account the overall site. Thus a script that is unused on a certain page can be used on another one. The grouping of different codes useful to the site in the same file is not a bad thing. It is therefore important to check this aspect before intervening and to ignore this criterion if the script found is useful globally.

In general, to solve this problem, it is necessary to :

• remove the <script> tag from the HTML code of the page if it is not used

...
    <script src="scripts/inutile.js"></script>
...

• remove unused code from the script to reduce its weight and the interpretation time required by the browser
• segment, if possible, the different codes in several files and load only the useful one for the page