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();
?>
