Fusionner les fichiers Javascript, oui mais...

  • De le 17 juillet 2012
  • Difficulté : 2/4

Fusionner les fichiers Javascript, oui mais... La fusion des fichiers Javascript proposé par Magento est une excellente solution pour diminuer le nombre de requêtes HTTP d'une page. 24 fichiers JS sont inclus par défaut. Les fusionner dans l'état n'est pas forcement une bonne solution... (Rédigé à partir d'un Magento CE 1.7)

La fusion des fichiers JS permet de réduite considérablement le nombre de requêtes HTTP. On obtient alors un chargement plus rapide de la page. Mais en étudiant d'un peu plus près la manière dont Magento fusionne ces fichiers, on s’aperçoit que dans l'état, la fusion n'est pas nécessairement une bonne idée.

Principe

Si nous activons la fusion des fichiers depuis l'administration, Magento examine les fichiers JS ajoutés depuis les layouts du template, puis les enregistre en un seul fichier. Cette opération est réalisée pour chacune des pages du site : page CMS, page catégorie, page produit, page panier...

Javascript Merge

Or la modularité de Magento permet l'inclusion d'un fichier Javascript sur une page déterminée (selon le handle défini par l'action, par exemple : catalog_product_view). Le fichier js/varien/product.js n'a pas d'utilité sur une page CMS, il est donc tout naturel de ne l'inclure que sur la fiche produit.

Au final, le nombre et le type de fichiers diffèrent d'une page à l'autre. Un nouveau JS fusionné sera généré pour chacune des pages.

Performances

Sur un Magento de base, nous pouvons établir le schéma suivant (Magento version 1.7) :

Fichiers Javascript de Magento

Le poids des fichiers mentionné dans la suite de l'article est indiqué sans compression gzip ou deflate.

Sur ces 6 pages, certains fichiers Javascript sont identiques. Une fois placés en cache par le navigateur, ils ne seront pas de nouveau téléchargés.

On comptabilise en tout 24 fichiers, pour un poids total de 529ko.

Ainsi, si la fusion des fichiers n'est pas activé, un client validant une commande sur le site générera 24 requêtes HTTP et téléchargera 529ko pour le Javascript.

Si nous reprenons ces 6 mêmes pages, mais en activant cette fois la fusion des fichiers Javascript, nous obtenons alors 5 fichiers Javascript, soit 5 requêtes HTTP (les fichiers des pages CMS et catégories sont identiques).

Mais le client téléchargera au total 1969ko de données ! Soit presque 4 fois plus que sans la fusion des JS.

Comparaison de la performance avec et sans fusion

Solution

Pour une performance optimale il faudra faire quelques concessions (charger tout le Javascript pour toutes les pages du site en une seule fois).

L'idée est de déplacer l'inclusion des fichier JS dans le handle default, pour chacun des layouts, en prenant soin de commenter afin de na pas oublier pour quel handle il était initialement utilisé.

Par exemple, prenons le fichier layout catalog.xml. Le handle catalog_product_view intègre pour la référence head 5 fichiers Javascript.

On déplace simplement cette référence dans le handle default du fichier :

catalog.xml

<default>
    <!-- ... -->

    <!-- catalog_product_view -->
    <reference name="head">
        <action method="addJs"><script>varien/product.js</script></action>
        <action method="addJs"><script>varien/configurable.js</script></action>

        <action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>
        <action method="addItem"><type>js</type><name>calendar/calendar.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
        <action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
    </reference>
</default>

Une fois cette opération effectuée pour l'ensemble des layouts et avec la fusion des JS activé, nous obtenons une seule et unique requête HTTP, pour un poids total de 529ko.

Niveau performance, charger l'ensemble des JS du site en une seule fois au sein d'un même fichier reste à mon avis la meilleure des solutions (passer de 24 requêtes à une seule n'est pas négligeable...).

commentaires

Commentez cet article : Fusionner les fichiers Javascript, oui mais...