Carnet Wiki

css ou javascript particuliers sur une page donnée

Version 3 — Mai 2016 — 86.218.xx.xx

Bonne pratique « performance » énoncée par Cerdic.

Peut on personnaliser le head inclu dans z-core, en fonction de la page, en lui passant l’environnement en paramètre ?

IL NE FAUT PAS faire dépendre le inclure/head en fonction de la page, et
encore moins pour ajouter/modifier des feuilles CSS de manière
conditionnelle. JAMAIS.

C’est une grave erreur en terme de performance, tant du côté serveur que
du côté client :

-  en passant un env au INCLURE on perd le cache commun, donc à chaque
page différente le compresseur CSS&JS va devoir ré-évaluer la nécessité
de concaténer/minifier les CSS et JS, ce qui est un peu couteux

-  en modifiant la liste des CSS et/ou JS en fonction de la page, cela
implique alors qu’en plus la liste de CSS et/ou JS change, et que le
compresseur DOIT concaténer/minifier les JS et CSS, ce qui beaucoup plus
couteux, et va donc produire un fichier CSS et/ou JS spécifique à cettepage

-  du coup d’une page à l’autre du site il y aura un GROS fichier CSS
et/ou JS différent, que l’utilisateur va devoir recharger, et là on perd
tout le bénéfice de la concaténation/minification.

Le principe de concaténer/minifier les CSS/JS c’est d’avoir UN SEUL
fichier à télécharger, UNE SEULE FOIS car utilisé sur TOUTES les pages
du site. C’est fondamental.

# Comment faire alors ?

Pour personaliser certaines pages, plusieurs possibilités, selon les cas :

-  ajouter des styles ou scripts dans dans head_js/xxx.html, ils ne
seront pas pris en compte par le compresseur et donc non minifiés, ils
seront donc chargé juste sur la page où ils apparaissent (les GROS
fichiers CSS et JS concaténés/minifiés etant déjà chargés en cache chez
l’utilisateur)

-  ajouter des styles ou scripts à tout le site, en les faisant
déclencher que sur la page concernée.
Pour les CSS, par exemple, il y a une classe page_xxx sur l’élément
de la page qui te permet de savoir que tu es sur la page xxx.
Il suffit donc dans tes css de prefixer tes sélecteurs par .page_xxx
pour qu’ils ne soient appliqués que sur cette page :
.page_xxx h1 color:red
Pour les JS, on applique en général le script que si tel ou tel élément
est présent dans la page, ce qui est générique.

Le choix entre les 2 stratégies dépend un peu de quoi on parle.
Quand il s’agit de règles CSS, c’est en général un poids en octets assez
léger et c’est plus simple et plus efficace de le charger sur toutes les
pages que d’avoir une seconde feuille de style à charger dans une page
Quand il s’agit de scripts, cela peut etre plus lourd (par exemple si
cela fait appel à une lib JS de plusieurs dizaines de ko) et dans ce cas
je privilégie le chargement « en plus » sur les pages concernées. Mais si
cela doit concerner une majorité de pages du site, alors par contre je
préfère que ce soit intégré dans toutes les pages du site, dans le JS
concaténé/minifié.