Compression JS/CSS avec TYPO3

Publié le Mis à jour le

Un intégrateur ou un développeur doit forcément avoir les bons outils pour juger de la qualité d’une maquette, des performances d’un site internet, etc. Si je vous parle d’Yslow par exemple, vous n’êtes pas censé (normalement) ignorer que cet outil est une extension Firefox qui vous permet d’analyser des pages web et vous fournir des pistes pour optimiser l’affichage de ces dernières. A vrai dire, on a pas besoin forcément de cet outil pour juger de la qualité d’un code HTML. Il suffit de regarder la source HTML avec son navigateur pour avoir déjà une première opinion !

De nos jours, nous utilisons de plus en plus de fichiers css et javascript lorsque nous ajoutons telle ou telle fonctionnalité à un site. Vous voyez déjà où je veux en venir ? Bien 🙂 Si je prends l’exemple de ma librairie JS préférée, Jquery, il arrive un moment où le nombre de fichiers appelés pour chaque plugin devient important. C’est encore plus le cas quand vous jetez un oeil à des maquettes HTML toutes prêtes sur le net.

Récemment, j’ai eu affaire à ce type de maquette HTML pour un client. Quelques CSS externes étaient appelées mais par contre, côté JS, c’était un peu la catastrophe : 15 fichiers ! Parmi ces JS, il y a l’appelle à la librairie Jquery, puis un plugin complémentaire à Jquery, un autre pour améliorer les polices, un autre pour un slider, un autre pour une galerie, etc.

Voici par exemple le score avec Yslow :

C’est là que je me suis tournée vers la compression CSS et CSS. Que faut-il entendre par là ? On va tout d’abord minifier puis coller tous les fichiers pour en faire un seul. Il y a la compression gzip mais je l’utilise déjà sur le serveur. Au final, nous en aurons deux fichiers:

– un fichier pour les CSS
– un fichier pour les JS

On a pas loin de 6000 extensions sur le TER mais peu concernent la compression. Je vais donc vous en présenter une : scriptmerger

Cette extension fonctionne particulièrement bien. Son auteur, dans la documentation, avertit le lecteur que plusieurs tests peuvent être nécessaire pour arriver au fonctionnement optimal, sans encombre. Dans mon cas, j’ai l’habitude d’appeler mes CSS et mes JS avec page.headerData pour contrôler plus facilement les entêtes de mes pages. Avec ce type d’extension, le mieux est de passer par la bonne vieille méthode que voici :

page {
includeCSS {
file1 = fileadmin/templates/…/css/style.css
file2 = fileadmin/templates/…/css/red.css
}

includeJS {
file1 = fileadmin/templates/…/js/jquery.min.js
file2 = fileadmin/templates/…/js/query.easing.1.3.js
[…]
file14 = fileadmin/templates/…/js/browserDetect.js
}
}
Oui, plus que 14 js ici car j’en ai supprimé un en trop après le 1er test.

Installez l’extension scriptmerger puis ajouter les constantes et le setup de l’extension dans le gabarit TS de votre site. Je ne saurais trop vous conseiller de vous entrainer sur une page, plutôt que sur le site. En effet, si la manipulation ne fonctionne pas du premier coup, tout le site sera impacté !
La documentation de l’extension est très bien expliquée. Toutefois, je vous donne ma configuration pour information :

Constantes :

###
# These are the default TS-constants for scriptmerger
###
plugin.tx_scriptmerger {
css {
enable = 1
addContentInDocument = 0

# minification
minify {
enable = 1
ignore = \.min\.
}

# gzip compression
compress {
enable = 0
ignore = \.gz\.
}

# merging
merge {
enable = 1
ignore =
}
}

javascript {
enable = 1
parseBody = 1
addBeforeBody = 0
doNotRemoveInDocInBody = 1
addContentInDocument = 0

# minification
minify {
enable = 1
useJSMinPlus = 1
ignore = \?,\.min\.
}

# gzip compression
compress {
enable = 0
ignore = \?,\.gz\.
}

# merging
merge {
enable = 1
ignore = \?
}
}
}

Setup :

plugin.tx_scriptmerger {
# minification, compressing and merging of css files
css {
enable = {$plugin.tx_scriptmerger.css.enable}
addContentInDocument = {$plugin.tx_scriptmerger.css.addContentInDocument}

# minification
minify {
enable = {$plugin.tx_scriptmerger.css.minify.enable}
ignore = {$plugin.tx_scriptmerger.css.minify.ignore}
}

# gzip compression
compress {
enable = {$plugin.tx_scriptmerger.css.compress.enable}
ignore = {$plugin.tx_scriptmerger.css.compress.ignore}
}

# merging
merge {
enable = {$plugin.tx_scriptmerger.css.merge.enable}
ignore = {$plugin.tx_scriptmerger.css.merge.ignore}
}
}

# minification, compressing and merging of javascript files
javascript {
enable = {$plugin.tx_scriptmerger.javascript.enable}
parseBody = {$plugin.tx_scriptmerger.javascript.parseBody}
addBeforeBody = {$plugin.tx_scriptmerger.javascript.addBeforeBody}
doNotRemoveInDocInBody = {$plugin.tx_scriptmerger.javascript.doNotRemoveInDocInBody}
addContentInDocument = {$plugin.tx_scriptmerger.javascript.addContentInDocument}

# minification
minify {
enable = {$plugin.tx_scriptmerger.javascript.minify.enable}
useJSMinPlus = {$plugin.tx_scriptmerger.javascript.minify.useJSMinPlus}
ignore = {$plugin.tx_scriptmerger.javascript.minify.ignore}
}

# gzip compression
compress {
enable = {$plugin.tx_scriptmerger.javascript.compress.enable}
ignore = {$plugin.tx_scriptmerger.javascript.compress.ignore}
}

# merging
merge {
enable = {$plugin.tx_scriptmerger.javascript.merge.enable}
ignore = {$plugin.tx_scriptmerger.javascript.merge.ignore}
}
}
}

Pour le setup, je n’ai rien modifié. Donc, intéressons-nous seulement aux constantes. Il y a un découpage en deux parties : une pour le traitement des CSS et une autre pour le traitement des JS. Les deux traitements sont ici activés. En revanche, je n’ai pas activé la compression gzip comme expliqué un peu plus haut. J’ai également modifié l’option « parseBody » à un pour que l’extension analyse le body de la page. L’extension utilise des librairies que l’on retrouve dans le dossier « resources » de l’extension. JSMin+ est par exemple utilisée pour minifier les fichiers javascript.

Il n’y a donc certes pas de magie à tout celà mais il faut avouer que l’extension scriptmerger est efficace. Voilà mon résultat juste après :

En résumé, passage du grade B au grade A grâce à l’obtention de 7 points supplémentaires. Pour vérifier que l’extension fonctionne bien, il suffit de jeter un oeil à la source HTML.

<link rel= »stylesheet » type= »text/css » media= »all » href= »typo3temp/scriptmerger/uncompressed/head-fd4495d07e02c20d26f8aab7626f7626.merged.css » />
<script type= »text/javascript » src= »typo3temp/scriptmerger/uncompressed/head-740be043a9a8a1e3eb25bc6b410b4a52.merged.js »></script>

Deux fichiers seulement. C’est plus propre non ?

Publicités

8 réflexions au sujet de « Compression JS/CSS avec TYPO3 »

    Asakurayoh a dit:
    22/02/2011 à 17:16

    Je trouvais cette extension super et simple à utiliser, mais elle ne tiens pas compte du paramètre « title » pour les CSS… Car ce paramètre est utilisé parfois pour des script de changement de CSS (pour changer la taille du texte, par exemple…).
    C’est pourquoi je l’ai abandonné jusqu’à ce que ce soit réglé…

    Blogger a dit:
    03/03/2011 à 14:03

    Et au niveau des performances côté serveur? le fait d’ajouter cette extension ralentit un peu la génération des pages je pense?

    Christian BELLET a répondu:
    03/03/2011 à 15:52

    Comme toute extension je suppose. Après, il faut vraiment voir si au rendu, c’est ce que l’on souhaite car dès qu’on a des plugins avec du jquery ou autre, il est parfois nécessaire de modifier l’organisation de ses fichiers, leur contenu. Récemment, j’ai eu le cas avec un plugin Google Map qui ne fonctionnait plus parce que l’API de Google était appelée après les traitements… donc attention.
    Pour les perfs globales, tu peux toujours procéder à des benchs 🙂

    Blogger a dit:
    19/04/2011 à 16:17

    Est-ce possible de dire à l’extension qu’elle ne « merge » pas le code qui est entre balise ? exemple typique pour le code de Google Analytics, par défaut il viens merger dans le fichier compresser avec le reste du JS, du coup Google n’arrive pas à trouver le code…

    popy a dit:
    27/05/2011 à 19:56

    A priori il y a moyen de lui dire d’ignorer certains fichiers, avec les constantes exclude. Ceci dit, je prefere ma propre implementation qui permet de déterminer le comportement lorsqu’on ajoute le fichier

      Blogger a dit:
      01/06/2011 à 13:32

      Bonjour,

      Et quelle est la méthode de votre implémentation?

      Merci

    Popy a dit:
    10/06/2011 à 18:37

    Un petit exemple à l’arrache ci dessous. Les fichiers css / js sont ajoutés, séparément ou par lots, et regroupés en fonction de leur « scope ». Chaque scope peut être « minifié » ou pas, au choix (dans l’exemple, le javascript va être packé vu que l’option est activée. Tout le js ajouté ultérieurement a ce scope sera regroupé avec ces fichiers et packé).
    Puisque c’est le scope qui détermine le regroupement, on a la main sur quels fichiers seront regroupés ensemble ou pas.

    A savoir que le « packing » javascript est celui de http://javascriptcompressor.com/
    Les fichiers sont regroupés avant d’être packés, ce qui améliore la compression.
    SI le gzip est activé, une version gzippée sera servie au client.

    Bien entendu, la version packée et la version gzippée sont des fichiers différents stockés dans typo3temp, pour éviter de tout recalculer.

    20 = PPLIB_JSFILE
    20 {
    filename (
    typo3/contrib/prototype/prototype.js
    EXT:belink_jslibs/contrib/fastinit.js
    EXT:xxx_template/main_template/html/main.js
    EXT:belink_jslibs/div/ie-correctpng.js
    )

    pack = 1
    compileAsScope = template
    }

    Prune a dit:
    14/09/2011 à 21:55

    Je n’ai pas compris pourquoi tu n’a pas activé le gzip des fichiers ?
    Est-ce que tu laisse cette tache a ton serveur web ?

Les commentaires sont fermés.