Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
[fr-fr] CSS : merging + compression + static files
Bonjour à tous,
Je suis à la recherche d’une solution pour me faciliter le travail d’optimisation de mes sites.
Je travail avec beaucoup de fichiers CSS différents. je les segmente, je m’y retrouve mieux :
reset.css
typography.css
forms.css
core.css
etc…
Sur textpattern, jusqu’à présent, je faisais ça :
<style type="text/css" media="screen">
@import url(<txp:css format="url" n="reset" />);
@import url(<txp:css format="url" n="typography" />);
@import url(<txp:css format="url" n="form" />);
@import url(<txp:css format="url" n="base" />);
</style>Comme ça fait bcp de requêtes http, avant la mise en ligne, je merge manuellement les différents fichiers et je compresse avec YUI.
Le problème c que cela devient pas pratique du tout pour une modif. ultérieure.
Je cherche donc 1 solution pour conserver mes différents css, non compressés, avec la possibilité de les modifier depuis le back-office et que textpattern fasse le merging et la compression à la volée.
Le tag <txp:css /> ne permet pas de spécifier plusieurs n et c’est bien dommage (<txp:css n="reset,typography,form,core"/>)
le plugin rah_css_embed le permet, mais il encadre forcement les css de la balise <style> </style> ce qui ne me permet pas de créer un fichier externe et de le coupler avec aks_header pour la compression.
Le top (mais j’en demande peut-être trop) serait de pouvoir combiner le tout avec une solution comme rvm_css.
Quelqu’un aurait une piste ?
Offline
Re: [fr-fr] CSS : merging + compression + static files
Bonjour Sacripant,
Début de réponse rapide : si c’est uniquement la balise style qui te gêne dans rah_css_embed, tu peux aller dans >plugin >modifier et modifier l’avant dernière ligne du plugin comme suit :
'<style'.implode('',$att).'>'.n.implode(n,$out).n.'</style>';
devient :
implode('',$att).'>'.n.implode(n,$out).n;
Ça devrait marcher ;-)
Last edited by fpradignac (2010-04-14 19:01:52)
françois
Offline
Re: [fr-fr] CSS : merging + compression + static files
Merci françois pour ton aide,
Sans la balise <style> je peux en effet essayer de merger mes styles dans fichier externe.
Je test ça quand j’ai un peu de temps.
Offline
Re: [fr-fr] CSS : merging + compression + static files
Just released version 0.3 of rah_css_embed added html attribute which can be used to output just the styles :-)
<txp:rah_css_embed name="reset,typography,form,base" html="0" />Offline
Re: [fr-fr] CSS : merging + compression + static files
kiitos Jukka
Du coup j’ai fais un test avec le trio
ask_header : compression + gzip
+
rah_css_embed : merging
+
rah_exernal_output : créer une ressource externe
Vu que les 3 plugins sont interdépendants, il faut modifier leur ordre de tri :
ask_header en 1
rah_css_embed en 2
rah_external_output en 5
Dans le back-office, J’ai créé un nouvel “external_output”
name = screen.css
<txp:aks_header strip="1" gzip="1" />
<txp:rah_css_embed name="reset, typography, form, base, overlay_jquerytools, galerie_photos, galerie_videos, trombinoscope, blog, default" html="0" />type= text/css
dans le gabarit, j’ai appeler les css avec
<style type="text/css" media="screen">
@import url(<txp:site_url />?rah_external_output=screen.css);
</style>J’ai fait ce test avec plein de css pour exagérer le principe.
Au final j’ai bien l’effet recherché. tous mes css sont compilés en 1 seul endroit, compressés et gzipés.
Je peux continuer à faire évoluer mes css depuis le back-office de textpattern.
Mais
- rah_css_embed va compiler les css par ordre alphabétique et non pas par ordre noté dans l’attribut
name(pas très grave). - J’ai l’impression que les styles sont recompillés à chaque chargement de page et du coup, le temps de latence du serveur est long. Il n’y a pas de mise en cache des css par le navigateur (mais je ne suis pas très doué pour vérifier ce genre de chose).
En gros, je ne suis pas sur d’avoir gagné en vitesse de traitement, le temps gagné côté client est perdu côté serveur :(
Il faudrait peut-être que je creuse une autre solution…
Offline
Re: [fr-fr] CSS : merging + compression + static files
Je continue mon monologue. Mais comme je ne cesse d’apprendre, je me dis que mes notes peuvent peut-être servir un jour à d’autres.
Et puis ça fait vivre le forum français. :p
C’est la première fois que je me soucis vraiment d’optimisation (il faut 1 début à tout). Et c vrai que depuis que je travail avec de multiples fichiers css (la mode des frameworks), ce besoin m’est vraiment apparu.
Pat m’en avais pourtant déjà parlé
Mais je ne m’en souciais pas à l’époque :
En ayant les css sur la base, le navigateur va chercher un nouveau css pour chaque page. Donc pas d’utilisation du cache du navigateur. Il va re-charger les styles pour chaque page.
Donc si on a une grosse feuille de style (20 – 30 Ko) sur 10 pages web visités on est en dejà à 200-300 ko de chargés, multipliés par le nombre de visiteurs…
Ma solution ci-dessus n’est pas inintéressante par rapport au fonctionnement de Textpattern. Mais carrement nul par rapport à un fichier static “en dur” qui sera sauver dans le cache du navigateur et réutilisé.
Donc, même dans le cas de fichiers css multiples, je trouve rvm_css beaucoup plus efficace que la solution ci-dessus.
Le top serait de réussir à compresser et tout copier dans 1 fichier static.
Une version amélioré de rvm_css ?
En tout cas j’ai l’impression que la solution aujourd’hui n’existe pas (pour qui n’est pas à l’aise avec le php).
Je vais quand même utiliser rvm_css, c’est toujours ça de gagner, mais je suis quasi de retour à la case départ (pas de merging ni compression).
Je sais que comparaison n’est pas raison mais sous Drupal… on coche 1 checkbox et hop…merging – compression – cache.
Offline
Re: [fr-fr] CSS : merging + compression + static files
Bonjour,
sacripant a écrit:
Je sais que comparaison n’est pas raison mais sous Drupal… on coche 1 checkbox et hop…merging – compression – cache.
SPIP propose aussi cette option :
Compactage des scripts et CSS
SPIP peut compacter les scripts javascript et les feuilles de style CSS, pour les enregistrer dans des fichiers statiques ; cela accélère l’affichage du site.
Souhaitez-vous activer le compactage des scripts (javascript) ?
……………
françois
Offline
Re: [fr-fr] CSS : merging + compression + static files
A-Y-EST J’ai une solution
Nécessite PHP 5.1.6.+
Il suffisant de chercher ailleurs, ouvrir le champs de recherche plus loin que celui des plugins pour TxP :
- En premier, utiliser rvm_css pour créer une version static de vos css.
- utiliser minify pour en créer une version merger/compresser/gziper.
Ça marche à merveille, Je n’ai plus qu’une seule requête http pour récupérer mes css, tout est minifier et gziper.
Plus de requête sur la base, le résultat est mis en cache par le navigateur (très bonne gestion du cache, réponses 304, date d’expiration).
Et cerise sur le gateau, je peux continuer à modifier et travailler sur mes css depuis le back-office : rvm_css mettra à jour le fichier static, et minify se mettra alors à jour. Le tout automatiquement.
Neanmoins, une version plugifier pour textpattern serait top.
C’est pas compliquer, mais des que j’ai 1 peu de temps, je mettrais une version détaillée de l’utilisation de cette solution.
minify peut egalement être utiliser pour ses javascript
Last edited by sacripant (2010-04-19 16:49:55)
Offline
Re: [fr-fr] CSS : merging + compression + static files
You could also let Apache (mod_deflate) compress the static style sheet created by rvm_css. This avoids having to fire up PHP to let minify do it’s job, because unless you’re using some kind of opcode cache, using PHP instead of a static file tends to be expensive in terms of CPU usage. This of course doesn’t combine any CSS files. It would be interesting to see some benchmarks on the various methods used (do mention the way PHP is handled by the website).
Offline
Re: [fr-fr] CSS : merging + compression + static files
thank Ruud, to participate in my reflection.
You could also let Apache (mod_deflate) compress the static style sheet created by rvm_css.
Of course, but in my example I use a lot of CSS. And gzip 10 css is also CPU usage.
This of course doesn’t combine any CSS files
Doesn’t combine and doesn’t minify. And it’s my research, if it’s possible and interesting.
It would be interesting to see some benchmarks
I’ll try. I never make benchmark. I don’t know how bench/record CPU usage.
Offline
Re: [fr-fr] CSS : merging + compression + static files
@ruud
Is this a good method into .htaccess file?
<IfModule mod_deflate.c> <FilesMatch "\.(js|css)$"> SetOutputFilter DEFLATE </FilesMatch> </IfModule>
Had you some benchmarks results with this method?
Cheers,
Patrick.
Github | CodePen | Codier | Simplr theme | Wait Me: a maintenance theme | [\a mi.ni.ma]: a “Low Tech” simple Blog theme.
Offline
Re: [fr-fr] CSS : merging + compression + static files
Patrick, I haven’t tested it, but it looks okay. CSS and Javascript compress very well, so you’ll definitely save some bandwidth. At the same time, because compressed=smaller, the visitor experiences faster page loading. One might argue that compressing costs CPU time, but serving a large file also costs system resources, so that tends to even out.
Offline