[Spip] Chargement conditionnel de CSS
Joseph Cornevaux
Dans mon site Spip (2.08), chaque page (article, rubrique, ...) inclut
des squelettes spécifiques correspondant aux différents éléments à
afficher (ex : menu, bloc de titre, liste d'auteurs, bibliographie,
...). Pour chacun de ces squelettes, il existe un fichier CSS
correspondant. Ces fichiers CSS sont actuellement inclus dans un fichier
CSS dynamique central (c'est celui-ci qui est appelé dans le <head>).
Jusque là, tout va bien.
Mon problème est que cette liste d'éléments est amenée à s'étoffer, et
que toutes les CSS correspondantes aux différent éléments sont chargée
sur chaque page du site. Ceci alourdit considérablement le temps de
chargement de la page lorsque la CSS centrale n'est pas en cache.
J'aimerais donc savoir s'il existe une solution pour charger uniquement
les fichiers CSS correspondant aux éléments utilisés sur la page, tout
en conservant la fonctionnalité du cache CSS de Spip.
J'ai essayé par le pipeline affichage_final, d'appliquer une expression
régulière sur la page générée pour récupérer les attributs class css des
éléments, puis de déclarer dans le <head> les liens vers les feuilles de
styles correspondantes. Ça marche, mais les CSS chargées de cette façon
ne sont pas mises en cache.
J'ai également essayé, à chaque chargement d'élément, d'alimenter un
tableau dans $GLOBALS indiquant les CSS à utiliser. Mais je ne vois pas
comment l'exploiter à la fin du chargement de la page pour inclure les
liens CSS correspondant (le pipeline insert_head s'exécutant au début du
chargement de la page).
Merci
--
Joseph Cornevaux
E.N.S. Lettres et Sciences Humaines
Centre de Ressources Informatiques
courriel : joseph.c...@ens-lsh.fr
telephone : (33) 4 37 37 61 28
_______________________________________________
liste spip
sp...@rezo.net - désabonnement : envoyer un mail à spip...@rezo.net
Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
http://archives.rezo.net/spip.mbox/
Documentation de SPIP : http://www.spip.net/
Irc : de l'aide à toute heure : http://spip.net/irc
Grégoire
> Bonjour,
>
> Dans mon site Spip (2.08), chaque page (article, rubrique, ...) inclut
> des squelettes spécifiques correspondant aux différents éléments à
> afficher (ex : menu, bloc de titre, liste d'auteurs, bibliographie,
> correspondant. Ces fichiers CSS sont actuellement inclus dans un fichier
Bonjour,
s'il n'existe qu'un nombre limité de feuilles de styles, et que tes
pages les utilises régulièrement, le navigateur va les conserver
dans son cache, donc, seule la première visite sera plus lente que
les autres.
Je te recommande d'avoir des feuilles de styles regroupées.
A bientôt
Grégoire
RealET
> Joseph Cornevaux a écrit :
>> Bonjour,
>>
>> Dans mon site Spip (2.08), chaque page (article, rubrique, ...) inclut
>> des squelettes spécifiques correspondant aux différents éléments à
>> afficher (ex : menu, bloc de titre, liste d'auteurs, bibliographie,
>> ....). Pour chacun de ces squelettes, il existe un fichier CSS
>> correspondant. Ces fichiers CSS sont actuellement inclus dans un fichier
>> [...]
>
> Bonjour,
>
> s'il n'existe qu'un nombre limité de feuilles de styles, et que tes
> pages les utilises régulièrement, le navigateur va les conserver
> dans son cache, donc, seule la première visite sera plus lente que
> les autres.
>
> Je te recommande d'avoir des feuilles de styles regroupées.
des CSS qui va faire que SPIP va rassembler les CSS en une seule.
--
RealET
Joseph Cornevaux
> * Grégoire tapuscrivait, le 22/07/2009 16:33:
>> Joseph Cornevaux a écrit :
>>> Bonjour,
>>>
>>> Dans mon site Spip (2.08), chaque page (article, rubrique, ...)
>>> inclut des squelettes spécifiques correspondant aux différents
>>> éléments à afficher (ex : menu, bloc de titre, liste d'auteurs,
>>> dans le <head>). Jusque là, tout va bien.
>>> Mon problème est que cette liste d'éléments est amenée à s'étoffer,
>>> et que toutes les CSS correspondantes aux différent éléments sont
>>> chargée sur chaque page du site. Ceci alourdit considérablement le
>>> temps de chargement de la page lorsque la CSS centrale n'est pas en
>>> cache.
>>>
>>> J'aimerais donc savoir s'il existe une solution pour charger
>>> uniquement les fichiers CSS correspondant aux éléments utilisés sur
>>> la page, tout en conservant la fonctionnalité du cache CSS de Spip.
>>>
>>> J'ai essayé par le pipeline affichage_final, d'appliquer une
>>> expression régulière sur la page générée pour récupérer les
>>> attributs class css des éléments, puis de déclarer dans le <head>
>>> les liens vers les feuilles de styles correspondantes. Ça marche,
>>> mais les CSS chargées de cette façon ne sont pas mises en cache.
>>> J'ai également essayé, à chaque chargement d'élément, d'alimenter un
>>> tableau dans $GLOBALS indiquant les CSS à utiliser. Mais je ne vois
>>> pas comment l'exploiter à la fin du chargement de la page pour
>>> inclure les liens CSS correspondant (le pipeline insert_head
>>> s'exécutant au début du chargement de la page).
>>>
>>> Merci
>>
>>
>> s'il n'existe qu'un nombre limité de feuilles de styles, et que tes
>> pages les utilises régulièrement, le navigateur va les conserver
>> dans son cache, donc, seule la première visite sera plus lente que
>> les autres.
>>
>> Je te recommande d'avoir des feuilles de styles regroupées.
> Et donc d'activer dans la configuration avancée de SPIP la compression
> des CSS qui va faire que SPIP va rassembler les CSS en une seule.
>
Merci pour vos réponses.
En fait, je développe un plugin, sorte de jeu de squelettes modulaire,
avec une panoplie d'éléments (squelettes HTML) pouvant être intégrés
dans les pages. À chaque élément est associée une CSS dynamique.
Certains peuvent être présents sur toutes les pages d'un site, et
d'autres, plus spécifiques, sur aucune. Pour l'instant, j'en ai une
bonne trentaine (avec autant de CSS)... et ce nombre devrait augmenter à
mesure de l'intégration de nouvelles fonctionnalités !
L'idéal serait alors de charger uniquement les CSS correspondant aux
éléments utilisés.
Effectivement, la compression CSS de Spip fonctionne très bien ; une
fois la CSS compressée en cache, il n'y a aucun problème (bien que ce ne
soit pas très propre quand les 3/4 de la CSS chargée ne servent à rien !).
Mon problème se pose principalement pendant le premier chargement et la
phase de développement du site (pour tester des modifs de CSS). Le temps
de chargement alloué aux CSS est actuellement compris entre 10s et 15s
en local (c'est plus rapide sur un vrai serveur), et devrais augmenter à
l'avenir si je ne trouve pas d'autre solution. En ne chargeant que les
CSS dont j'ai besoin, je devrais tomber en dessous des 5 secondes.
@ Grégoire : Qu'entends tu par "feuilles de styles regroupées" ?
--
Joseph Cornevaux
E.N.S. Lettres et Sciences Humaines
Centre de Ressources Informatiques
courriel : joseph.c...@ens-lsh.fr
telephone : (33) 4 37 37 61 28
_______________________________________________
Grégoire
> [...]
>
> En fait, je développe un plugin, sorte de jeu de squelettes modulaire,
> avec une panoplie d'éléments (squelettes HTML) pouvant être intégrés
> dans les pages. À chaque élément est associée une CSS dynamique.
> Certains peuvent être présents sur toutes les pages d'un site, et
> d'autres, plus spécifiques, sur aucune. Pour l'instant, j'en ai une
> bonne trentaine (avec autant de CSS)... et ce nombre devrait augmenter à
> mesure de l'intégration de nouvelles fonctionnalités !
> L'idéal serait alors de charger uniquement les CSS correspondant aux
> éléments utilisés.
>
> @ Grégoire : Qu'entends tu par "feuilles de styles regroupées" ?
>
Bonjour,
Peut être que ton "plugin" pourrait à tout moment savoir ce qui est
utilisé, et confectionner une feuille de style *unique* avec la
somme des feuilles de styles utilisées. (elles seraient donc regroupée).
Un peu comme le fait la compression des CSS.
Il faudra voir à l'usage.
A bientôt
Grégoire
Joseph Cornevaux
Mes feuilles de style sont actuellement toutes chargées par des <INCLURE> dans un même fichier CSS.
Mon problème est que je ne peux pas savoir (à ma connaissance) quelles seront les feuilles de styles utilisées avant le chargement complet de la page. Une fois la page chargée, je peux le savoir, soit en parcourant la page à l'aide d'une expression régulière à la recherche des attributs "class" correspondant aux fichiers CSS ; soit en ajoutant, à chaque chargement d'un élément (squelette HTML), le nom de la CSS correspondante dans un tableau $GLOBALS['use_css']. Mais jusqu'à présent, la seule solution que j'ai trouvé pour récupérer ces infos et écrire le(s) lien(s) vers le(s) fichier(s) CSS dans la page (qu'ils soient chargés un par un ou regroupés dans une CSS globale), c'est par le pipeline "affichage_final". Ça marche, mais la compression CSS de Spip ne fonctionne pas dans ce cas la ; ce qui est apparemment normal puisqu'il est exécuté après la mise en cache. L'idéal serait de lier les CSS à la page juste avant la mise en cache, je ne sais pas si c'est possible.
Joseph
Michel Roche
Le 23 juil. 09 à 11:55, Joseph Cornevaux a écrit :
>
> Merci,
>
> Mes feuilles de style sont actuellement toutes chargées par des
> <INCLURE> dans un même fichier CSS.
> Mon problème est que je ne peux pas savoir (à ma connaissance)
> quelles seront les feuilles de styles utilisées avant le chargement
> complet de la page. Une fois la page chargée, je peux le savoir,
> soit en parcourant la page à l'aide d'une expression régulière à la
> recherche des attributs "class" correspondant aux fichiers CSS ;
> soit en ajoutant, à chaque chargement d'un élément (squelette HTML),
> le nom de la CSS correspondante dans un tableau $GLOBALS['use_css'].
> Mais jusqu'à présent, la seule solution que j'ai trouvé pour
> récupérer ces infos et écrire le(s) lien(s) vers le(s) fichier(s)
> CSS dans la page (qu'ils soient chargés un par un ou regroupés dans
> une CSS globale), c'est par le pipeline "affichage_final". Ça
> marche, mais la compression CSS de Spip ne fonctionne pas dans ce
> cas la ; ce qui est apparemment normal puisqu'il est exécuté après
> la mise en cache. L'idéal serait de lier les CSS à la page juste
> avant la mise en cache, je ne sais pas si c'est possible.
>
> Joseph
Bonjour,
une idée (peut-être à deux balles, mais peut-être à 200€, qui sait ?)
qui me vient :
Plutôt que de chercher à savoir quelles sont les classes exactes
utilisées, ce que tu ne sais que trop tard apparemment, peut-être peux-
tu plutôt savoir à temps quels vont être les éléments de page utilisés
(par exemple un calendrier, un bloc de ceci, un de cela...) et passer
ces informations dans l'environnement au moment de l'appel de ta
feuille d'inclusion calculée.
Ainsi tu pourrais mettre des #INCLURE dans des conditions et ne
charger que les bouts de css correspondant aux modules affichés. Ca
fait raisonner plus sur le contexte que sur les classes effectivement
utilisées, mais ça pourrait déjà t'alléger un peu la css finale, non ?
Michel