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 à cette page
- 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é.