Je vais mettre sur le carnet de temps en temps des astuces que j'utilise pour la conception web, donc essentiellement du php/mysql/css/js/html...
Rien de révolutionnaire, le développement web ce n'est finalement pas mon métier, mais ça peut servir à d'autres personnes qui cherchent des astuces simples leur facillitant la vie.
Aujourd'hui donc, voici une astuce permettant d'organiser et d'optimiser le chargement de ses feuilles de styles. La problématique consiste à diminuer le temps de chargement d'une page en diminuant la taille de la feuille de style d'une part et en combiant les feuilles de styles multiples d'autre part.
Si on a une mise en page en feuilles de styles un peu complexe, on modularise en général ses règles, ce qui donne quelque chose de ce genre :
<link rel="stylesheet" href="/theme/miseenpage.css" type="text/css" media="screen"> <link rel="stylesheet" href="/theme/formulaires.css" type="text/css" media="screen"> <link rel="stylesheet" href="/theme/pageaccueil.css" type="text/css" media="screen"> ...
Ma solution pour améliorer le rendement est de combiner ces fichiers via php et de les renvoyer compressées par gzip, ainsi on économise à la fois sur le nombre de connexions pour obtenir plusieurs petits fichiers et on envoie un seul fichier compressé :
<link rel="stylesheet" href="/theme/" type="text/css" media="screen">
Dans le dossier theme je mets un index.php avec le code suivant :
<?php
header("Content-type: text/css; charset=UTF-8");
ob_start('ob_gzhandler');
include "miseenpage.css";
include "formulaires.css";
include "pageaccueil.css";
ob_end_flush();
?>
Commentaires
L'idée est sympa, mais attention à plusieurs détails:
* Le cache. La si c'est plus ton serveur web qui gère ces fichiers vu qu'ils ne sont plus statiques, il faut envoyer les bons headers pour que ca soit cachable, sinon ça provoque plein de requêtes avec ton serveur pour rien... Voir www.mnot.net/cache_docs/
* Modification des fichiers. Si tu modifies souvent tes fichiers séparément, ca ne marchera pas bien avec le cache justement, donc faut faire un truc un peu plus subtil.
* PHP. Sur des gros sites, ça peut être très coûteux de passer par PHP pour des bêtes fichiers statiques, et c'est plus intéressant de générer une fois soit même le fichier résultant de la concaténation des CSS.
* Le cache encore. Si tu utilises ces CSS de manière séparée sur une autre page, tu ne profites plus du cache du navigateur vu que une page chargera la version concaténée, une page chargera une ou plusieurs CSS séparées...
Voila, donc faut faire attention avec ces bidouilles. Le mieux c'est encore d'organiser bien ses CSS, d'en limiter le nombre, de les re-utiliser sur toutes les pages, et éventuellement pour accélérer le chargement de les mettre sur un (sous) domaine différent des pages web (les navigateurs n'utilisent que 2 connections/serveur par défaut et sans pipelining)
c'est vrai, pour le cache j'aurais dû préciser, le script ci-dessus est une version simplifiée du script original, j'ai un script pour le cache qu'on peut trouver ici :
chevrel.org/fr/optimiser/...
J'utilise la mise en cache précisemment pour des pages plutôt statiques pour lesquelles je ne modifie plus ou peu souvent le thème. De manière générale, j'active le cache une fois que le site est fini :)
Pour la charge serveur, je ne suis pas concaincu. Il faudrait comparer la charge que représente pour Apache le chargement de 5 ou 6 fichiers CSS par chaque client par rapport à la charge de quelques includes PHP.
Moi la seule chose qui me gène (au delà du cache que tu as réglé), c'est le navigateur qui ne supporte pas gzip... Je pense principalement aux navigateurs embarqués, tous n'ont pas gzip d'implémenté :-/
si un navigateur ne supporte pas gzip, il ne doit pas pouvoir voir beaucoup de pages sur le web non ? De nombreux sites compressent aussi les CSS directement avec Apache et son module mod_gzip, dans le pire des cas le navigateur reçoit un contenu brut sans le style donc il a toujours accès à l'information et rien n'empêche d'envoyer une page de styles spéciale pda non zippée à part avec media="handheld"
fr2.php.net/ob-gzhandler
« Avant que ob_gzhandler() envoie les données compressées, il détermine les types d'encodage qui sont supportés par le navigateur ("gzip", "deflate" ou aucun) et retourne le contenu des tampons de manière appropriée. Tous les navigateurs sont traités, car c'est aux navigateurs d'envoyer un en-tête indiquant les types de pages supportés. »
merci pour ces précisions, ça règle donc le problème de la compression :)