Reporter l'interprétation JavaScript avec defer

Jusqu'à maintenant dans mon travail, j'ai optimisé les sites web en utilisant les suggestions provenant soit de l'extension YSlow de Yahoo!, soit de Page Speed de Google (soit dit en passant, les deux sont excellents pour l'apprentissage de bonnes pratiques). Compresser les librairies JavaScript et CSS (avec YUI Compressor), compression HTTP avec gzip, minimiser le nombre de requêtes HTTP et utiliser le cache ne sont que quelques exemples qui permettent d'accélérer le chargement des pages.

En toute honnêteté, le score maximum (depuis que je l'utilise) que j'ai obtenu dans l'analyse Page Speed sur la page principale d'un de mes projets avancés a été de 88/100. Impossible d'atteindre la perfection malgré tout le fine tuning.

Un des points proposés par PageSpeed est d'utiliser l'attribut defer dans la balise script des librairies JavaScript attachées à la page. Ceci permet d'indiquer au fureteur qu'il peut choisir de ne pas attendre que le code JavaScript soit fini d'être interprété pour poursuivre le chargement de la page, ce qui accélère l'affichage du contenu HTML. Bien entendu, il faut que le script ne crée aucun contenu, par exemple aucune instruction document.write().

Je n'avais pas l'habitude d'utiliser defer car seul Internet Explorer le supportait (depuis la version 4). Mais plus récemment, Firefox 3.5 et les versions suivantes tiennent compte de l'attribut defer. Sans surprise, des statistiques que j'ai consulté montrent que le pourcentage des développeurs qui utilisent defer est encore assez faible.

Faisons un essai avec le snippet HTML suivant :

<div id="myDiv"></div>
<button type="button" id="btn">OK</button>

<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript">
   $j = jQuery.noConflict();
   $j(document).ready(initialize);

   function initialize(){
       $j('#myDiv').html('Hello World');
       $j('#btn').click( function(){ alert('Click'); } );
   }
</script>

• Si je place un attribut defer="defer" sur le chargement de la librairie, la console Firebug de Firefox me lance l'erreur : jQuery is not defined. C'est normal, elle devrait être chargée à la fin, après le bloc de code JavaScript.
• Si j'ajoute defer="defer" au bloc de code, je n'ai pas plus de succès, la même erreur se produit.
• Si je retire defer du chargement de la libraire, tout se passe bien.

<script type="text/javascript" src="js/code-de-la-page.js" defer="defer"></script>

Tags: Extensions Firefox, JavaScript