5568 sujets

Sémantique web et HTML

Feuilles CSS, limite de hits et optimisation: la meilleure solution??

Bonjour,

J'aurais une question afin d'avoir vos avis. Je suis en train d'optimiser mon site et j'en suis rendu aux feuilles de style.

Mon site (comme la plupart), a une structure assez fixe, ce qui fait qu'environ la moitié de mon code css est utilisé à chaque page. L'autre moitié, est l'amalgame de tous les autres styles utilisés sur une ou plusieurs pages.

Aujourd'hui, j'utilise qu'une seule grosse feuille css. L'avantage est que cela ne prend qu'un hit. l'inconvénient est que cela fait charger la totalité des styles du site à l'arrivée sur la première page, alors que cela n'est pas nécessaire.

Avant je fonctionnais avec plusieurs feuilles css: 1 pour la structure du site, et une par "groupe" de style (exemple descriptif de produit, formulaire de contact, etc...). Donc à chaque page, je ne faisais charger que les styles nécessaires, mais cela prenais plusieurs hits par page, donc pas optimisé.

La question est quelle est la bonne façon de faire ?

J'avais bien pensé à passer des variables dans l'url de ma requête de feuille css et d'ensuite par le biais d'include PHP, de générer une page avec des styles "personnalisés" pour chaque page ex: /stylesheet.css?descriptif&formulaire&calendrier

Qu'en pensez vous ?
Le problème que je voit de cette technique est la mise en cache, puisque "stylesheet.css" ne sera jamais 2 fois la même à chaque page. Et donc rechargement des styles "communs" du site à chaque page.
J'ai l'impression de me mordre la queue et de tourner en rond...

Vos avis ??

Merci et bonne journée à tous

(:)
Xavier
Salut,

Il te semble plus lourd de devoir télécharger une feuille de style plus complète à l'arrivée sur le site, et de ne plus télécharger de styles par la suite. Cependant, si tu divise tes styles en différents fichiers, tu vas multiplier les requêtes auprès du serveurs, qui alourdiront certainement plus considérablement le chargement du site qu'un fichier plus lourd dont la requête a déjà été faite.
Et puis bon, on parle de fichiers qui font quelques kilo-octets, ce n'est pas franchement ça qui va se sentir auprès du visiteur. Smiley cligne
Bonjour Mikachu, merci pour ta réponse.

En fait justement non, en ayant une feuille de style dynamique PHP (avec variable dans l'url des feuilles à intégrer), côté utilisateur, il n'y aurait qu'une requête.

Oui il est vrai qu'on parle d'environ 100ko, mais je cherche juste le moyen d'être le plus optimisé possible.
Tu peux compacter (minifier) ton fichier CSS pour gagner quelques kilos octets...Attention tout de même cela modifie des fois le rendu final.
Modifié par G3ronim0 (24 Aug 2011 - 23:10)
oui, minifier était dans mes projets aussi
mais en fait mon idée s'appliquerait aussi au javascript, afin de limiter les requetes, et de ne charger que l'essentiel. non?
Si ton fichier est effectivement trop lourd, éventuellement, plutôt chercher à lazy-loader, mais j'ignore si c'est bien efficace sur des parties de CSS.

Ceci dit, il faut voir ce que ça donne avec la compression gzip et minifié : là, je travaille sur une grosse CSS d'environ 65 ko, gzippée, ça donne 13.0 ko, ce qui me parait être très acceptable, en plus c'est mis en cache.
Salut Nico3333fr,

justement c'était une de mes questions. Comment on utilise la compression gzip ? Est ce une fonctionnalité de php ou de apache ? Est ce que tous les navigateurs l'acceptent ?

Si tu pouvais me donner du code en exemple ca serait super.

Merci
++
Salut Patidou,

ok j'ai bien vu le code du .htaccess, mais quelque chose m'échappe... leur .css n'est pas gzipé.
Est ce que ce code va simplement gzippé à la volée le .css pour le chargement et c'est le navigateur qui va le décompresser ??

tous les navigateurs fonctionnent ?
Oui c'est le serveur apache qui gzippe et qui envoie le résultat au navigateur qui dégzippe. Les fichiers .htaccess sont des fichiers de configuration locaux pour apache.

J'utilise en grande partie ce fichier sur mon site. Si tu regardes les entêtes http, tu verras que tous les fichiers de type texte sont compressés (css, html, js, etc).
Modifié par Patidou (25 Aug 2011 - 14:50)
Ok super.
Je viens de faire des tests et donc minifiée et gzippée, ma feuille de style passe de 100ko à 15ko. Je crois que ça vient de répondre à ma question. De plus j'utilise la mise en cache, ce qui fait que ma feuille de style n'est chargée qu'une fois.

Donc résumé, mieux vaut une bonne grosse feuille css minifiée, gzipée et mise en cache. De plus j'utilise un sous domaine pour ma feuille css et javascript. Ce qui permet de passer outre la limite de chargement simultanée pour un même domaine.

Merci à tous encore une fois pour votre aide
Sujet clos
Aller à