Code superflu

A quoi correspond le code superflu?

Il s'agit principalement de code JavaScript dont le rôle est de combler des fonctionnalités manquantes sur certains navigateurs, et plus particulièrement sur les anciennes versions. Ces fonctions, dont l'objectif est d'assurer la compatibilité sur les différents supports, s'appellent des polyfills. Ils peuvent être jugés comme superflus du fait que la majorité des navigateurs récents ne les utilisent pas.

En quoi est-ce problématique ?

Les polyfills (et attributs "transform") sont une bonne chose du fait qu'ils permettent aux anciens navigateurs d'utiliser des fonctionnalités récentes et sont donc importants pour l'accessibilité de tous les utilisateurs, même ceux qui ne mettent pas à jour leur navigateur. Ce qui est problématique, c'est le fait qu'ils soient chargés par les navigateurs modernes qui n'en ont pas besoin. Tout comme les scripts inutilisés, le téléchargement de code non utilisé retarde le chargement de la page et allourdit l'interpétation nécessaire du code par le navigateur, ce qui altère la rapidité de la page.

Comment accélerer le chargement sur les navigateurs récents ?

La solution la plus courante consiste à détecter le navigateur de l'internaute et à ne charger que les polyfills nécessaires :

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

function lancement() {
    ...
}

Une autre solution consiste à utiliser la nouvelle syntaxte pour le chargement de modules JavaScript, ce qui permet de charger le script adéquate en fonction de l'interpretation du code HTML par le navigateur :

<!-- Les navigateurs modernes chargeront ce script et les anciens l'ignoreront -->
<script type="module" src="script.js"></script>

<!-- Les anciens navigateurs chargeront ce script et les récents l'ignoreront -->
<script nomodule src="script_avec_polyfills.js"></script>

Retrouvez plus d'informations concernant cette technique sur l'article de Philip Walton, ingénieur chez Google (en anglais).