Superfluous code

What is the superfluous code ?

It is mainly JavaScript code whose role is to fill in missing functionalities on some browsers, and more particularly on older versions. These functions, whose objective is to ensure compatibility on the various supports, are called polyfills. They can be considered superfluous because the majority of recent browsers do not use them.

Why is this a problem ?

Polyfills (and "transform" attributes) are good because they allow older browsers to use recent features and are therefore important for the accessibility of all users, even those who do not update their browser. What is problematic is the fact that they are loaded by modern browsers that do not need them. Like unused scripts, downloading unused code delays the page loading and makes the necessary code interpretation by the browser slower, which affects the speed of the page.

How to speed up loading on recent browsers 

The most common solution is to detect the user's browser and load only the necessary polyfills :

if (recent_browser()) {
    lancement();
} else {
    charger_script('polyfills.js', lancement);
}

function lancement() {
    ...
}

Another solution is to use the new syntax for loading JavaScript modules, which allows to load the appropriate script according to the interpretation of the HTML code by the browser :

<!-- Modern browsers will load this script and older browsers will ignore it. -->
<script type="module" src="script.js"></script>

<!-- Modern browsers will load this script and older browsers will ignore it. -->
<script nomodule src="script_avec_polyfills.js"></script>

Find more information about this technique in the article by Philip Walton, engineer at Google.