[Webdesign] Améliorez les performances de vos sites en téléchargeant les scripts en parallèle

La quête de la vitesse et de la performance est récurrente pour les webdesigners.

A chaque fois que je parle de performance « web », je me réfère à deux choses :

• Les attentes des utilisateurs. Les internautes sont de plus en plus exigeants vis à vis des sites qu’ils visitent.
• Les attentes de Dieu. Google « note » les sites aussi en fonction de leurs temps de réponse.

Partant de ce constat, il est aujourd’hui impensable de ne pas optimiser ses sites (du moins si on veut exister).

L’une des techniques les plus utilisées consiste à minifier et concaténer vos scripts. Cependant parfois ce n’est pas possible. Il y a donc plusieurs scripts à télécharger (hors effet de cache).
 

L’existant

Aujourd’hui vous déclarez vos scripts comme ceci :

<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="script2.js"></script>
...

Le problème est que, par défaut, votre navigateur bloque le téléchargement de toutes les autres ressources (images, CSS, autres scripts …) tant qu’il télécharge un script. C’est ce qu’on appelle le « waterfall pattern » (le motif de la cascade). J’aurais plutôt parlé d’écluses…

C’est d’ailleurs pour cette raison que l’on recommande de placer ces appels à la fin du fichier (règle 6), juste avant la balise &lt/html>, pour en limiter au maximum l’impact sur l’affichage.

Mais ce n’est pas toujours possible.
 

Le souhait

Ce que l’on voudrait obtenir, c’est un téléchargement non-bloquant et en parallèle des différentes ressources, notamment des scripts.

De plus, on ne veut pas se soucier du domaine source du script et on veut que les dépendances demeurent (si script2 à besoin de script1, alors script1 doit être téléchargé en premier).
 

Le futur

Bien entendu, ce problème n’est pas nouveau. Et HTML5 tente de combler cette lacune. Un nouvel attribut de la balise <script> a d’ailleurs été introduit. async permet en effet d’exécuter le script de manière asynchrone et defer (qui existait déjà) permet de ne télécharger le script qu’après le chargement de la page.

Seul problème, pour l’instant ces deux attributs ne sont pas interprétés par tous les navigateurs. Et il semblerait que même les navigateurs compatibles HTML 5 ne le fasse pas non plus …

En encore, le but recherché n’est pas forcément le même…
 

Et en attendant ? Une alternative …

L’idée est de déclarer et charger les scripts nécessaires en utilisant … du javascript.

<script type="text/javascript">
    (function() {
        var s = [
            "/url/to/script1.js",
            "/url/to/script2.js",
            "/url/to/script3.js",
            ...
        ];

        var sc = "script", tp = "text/javascript", sa = "setAttribute", doc = document, ua = window.navigator.userAgent;
        for(var i = 0, l = s.length; i < l; ++i) {
            if(ua.indexOf("Firefox") !== -1 || ua.indexOf("Opera") !== -1) {
                var t = doc.createElement(sc);
                t[sa]("src", s[i]);
                t[sa]("type", tp);
                doc.getElementsByTagName("head")[0].appendChild(t);
            } else {
                doc.writeln("<" + sc + " type="" + tp + "" src="" + s[i] + ""></" + sc + ">");
            }
        }
    })();
</script>

Il est tout à fait possible d’optimiser ce code un peu plus. Il fonctionne avec IE, Firefox, Safari, Chrome et Opera. En revanche il ne garantie pas le maintien des dépendances.

Cette solution permet de télécharger les différents scripts en parallèle. Le temps de téléchargement, même s’il est individuellement plus long, reste très largement inférieur au total (grâce à la parallélisation).

Il est possible, je pense, d’améliorer un peu cette solution. Notamment en créant une fonction que l’on pourra placer à la fin de la page et un fichier pour externaliser le script de chargement lui-même.

<script type="text/javascript" src="scriptsloader.js"></script>
<script type="text/javascript">
var scriptstoload = [
    "script1.js",
    "script2.js"
];

loadScripts(scriptstoload );
</script>

Il suffit alors de télécharger le minuscule fichier scritpsloader.js (bloquant mais rapide) et de l’exécuter en fin de page.

crédits : piecesofrakesh