Les applications Ajax ne cesse de progresser et elles utilisent de plus en plus de code Javascript et CSS pour fonctionner, parfois même des centaines de ko…

Table des matières

Introduction

La démocratisation des applications Ajax ne cesse de progresser. Il suffit pour s’en convaincre de regarder le nombre d’applications web qui sortent jour après jour: stockage en ligne, gestion des comptes personnels, webmail, bureautique, etc. La marche vers les “Dynamic Webtop Application” est en cours !

Ces applications utilisent de plus en plus de code Javascript et CSS pour fonctionner, parfois même des centaines de ko. Afin d’optimiser le trafic réseau et le temps de chargement d’une page web, il est nécessaire de réduire au maximum la taille de ces fichiers.

Cet article présente quelques solutions et pistes.

Compression des fichiers JavaScript

Ecrire du code Javascript valide : JavaScript Lint

JavaScript Lint est un validateur de syntaxe Javascript. Il permet de repérer les erreurs de syntaxe, mais aussi les constructions pouvant poser des problèmes (ex : les if() sans accolades). Ce logiciel est basé sur le moteur JavaScript du navigateur Firefox.

Une version en ligne est proposée directement sur le site web, ainsi que différentes distributions permettant d’utiliser cet outil en ligne de commande ou de l’intégrer directement dans son IDE favori.

Suppression des blancs et des commentaires : Dean Edwards Packer

Dean Edwards Packer est un compresseur/obstrurateur de code source JavaScript. Je l’utilise essentiellement pour supprimer les blancs et les commentaires (utiliser pour cela le niveau de compression “none”). Cet outil est utilisable directement en ligne.

Compression du code : Memtronics

Une fois les blancs et les commentaires supprimés, on peut utiliser l’outil Memtronics, lui aussi disponible directement en ligne. Cet outil est un réducteur/obscurateur/encodeur de code JavaScript (obscurateur pas encore disponible). Les options que j’utilise pour compresser mes fichiers sont Method = better et Hardcore sélectionné.

Je conseille d’utiliser cet outil en ligne avec Internet Explorer, qui attend plus longtemps que Firefox avant de réagir lorsqu’un script prend beaucoup de temps à s’exécuter.

Exemple : prototype-1.5.0.js final

Compression des fichiers CSS

Ecrire du code CSS valide

The W3C CSS Validation Service: https://jigsaw.w3.org/css-validator/

Suppression des blancs et des commentaires

Pour cela j’utilise le module Python slimmer.py, qui permet d’optimiser également du code HTML, XHTML et JavaScript. http://www.issuetrackerproduct.com/Download#slimmer

Charger du code seulement lorsque c’est nécessaire

Afin de ne pas surcharger la page d’accueil en chargeant l’ensemble des fichiers JavaScript et CSS nécessaires à l’application, il est possible de charger du code dynamiquement seulement lorsque c’est vraiment nécessaire.

Voici un exemple d’implémentation de cette fonctionnalité (avec Prototype.js):

var loaded_files = $A(); // fichier JS et CSS déjà chargés 
    
/** 
* Chargement dynamique de fichiers JavaScript ou  CSS
* 
* @param {String} url Url du fichier JavaScript ou CSS à charger
*/ 
function loadFile(url){  
    if (loaded_files.indexOf(url) == -1) { 
        // le fichier n'a pas encore était chargé 
            
        // ajout dans la balise HEAD 
        var head = document.getElementsByTagName("head").item(0); 
        var file; 
            
        if (url.indexOf(".css") != -1) { 
            // chargement d'un fichier CSS 
            file = document.createElement("link"); 
            file.setAttribute("rel", "stylesheet"); 
            file.setAttribute("type", "text/css"); 
            file.setAttribute("media", "all"); 
            file.setAttribute("href", url); 
            head.appendChild(file); // ajout effectif 
            loaded_files.push(url); // mémoire 
                            
        } else if (url.indexOf('.js') != -1) { 
            // chargement d'un fichier JavaScript 
            file = document.createElement("script"); 
            file.setAttribute("type", "text/javascript"); 
            file.setAttribute("src", url); 
            file.setAttribute("charset", "iso-8859-1"); 
            head.appendChild(file); // ajout effectif 
            loaded_files.push(url); // mémoire 
        } 
    } 
}

Conclusion

En conclusion, je citerais deux autres pistes non traitées dans cet article mais permettant d’accélérer encore le chargement d’une page web :

• Fusionner tous les fichiers JavaScript à charger en un seul (idem pour les CSS). Le but est de réduire le nombre de requêtes HTTP.
• Nettoyer et compresser à la volée le code HTML renvoyé par le serveur, via le module gzip du serveur web Apache par exemple.