Websourcing.fr » Actualités, Web, Logiciels et Fun

[Webdesign] Compression des CSS dans Wordpress: une solution simple mais efficace

Tags: CSS, Optimisation, Performance, Webdesign, Wordpress
Posté dans Billets, Logiciels & Webwares, Webworker par Lionel Roux le 26 juin 2009

Comme vous le savez surement, depuis la sortie de Wordpress 2.8, les feuilles de styles sont compressées automatiquement, ce qui permet de rendre votre site plus rapide et de consommer moins de bande passante. Bref, que du bon !

Seul problème, cela ne concerne que les feuilles de styles de l’interface d’administration. Celles des pages visibles par tous les visiteurs ne sont donc pas optimisées, ce qui est bien dommage car ce sont celles qui sont le plus téléchargées.

Bien entendu, il est possible d’installer un plugin pour réaliser cette opération. On peut citer par exemple WP-CSS (voir la présentation par l’ami Dator ici) ou WP-Minify, un très bon plugin.

Personnellement, je me méfie des plugins et je préfère développer des petites solutions simples à maintenir. Voici donc ma solution home-made et qui pourtant fonctionne très bien.

0 РSource et r̩sultat

Avant de commencer, jetez un coup d’Å“il, à ma feuille de styles et avant compression et après.

Avant:

(oui, je suis un grand malade de l’indentation ).

Après:

Je pense que c’est assez parlant. Voyons maintenant comment faire.

1 РD̩clarer les feuilles de styles CSS avec wp_enqueue_style()

Pour avoir un contrôle total sur vos feuilles de styles et les rendre disponibles dans certaines pages (ou les exclure), une bonne pratique consiste à utiliser la fonction wp_enqueue_style().
Ainsi, vous remplacez les directives HTML comme celle-ci (présente dans votre header.php en général):

<link rel='stylesheet' id='test'  href='http://blog.websourcing.fr/xxx/test.css' type='text/css' media='all' />

par la fonction PHP suivante, dans le fichier function.php:

add_action('wp_enqueue_scripts', 'frond_end_scripts');
function frond_end_scripts() {
   wp_enqueue_style ( 'style', ''http://blog.websourcing.fr/xxx/test.css'', 'all');
   ...
}

Le paramètre ‘all’ désigne « toutes les pages et billets ». Il est possible de n’inclure que les pages, ou que les billets , …
La plateforme Wordpress se chargera alors d’inclure les entêtes nécessaires au bon endroit, sans aucune intervention supplémentaire de votre part.

2 РD̩clarer la fonction pour compresser

Dans le fichier function.php, il faut ajouter la fonction pour compresser les feuilles de styles.
Je vous la donne telle qu’elle existe sur mon blog. Il est possible de faire mieux je pense, notamment avec des expressions régulières.

/*retirer le point (pb de plugin) */
func.tion compress_css($filePath, $fileName, $fileExtention) {
	/* if file doesn't exist or is outdated */
	$minifiedFile = $filePath.$fileName.'.min'.$fileExtention;
	$normalFile = $filePath.$fileName.$fileExtention;

	if(!file_exists($minifiedFile) || (filemtime($minifiedFile) < filemtime($normalFile))){
		$buffer = file_get_contents($normalFile);
		/* remove comments */
		$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
		/* remove tabs, spaces, newlines, etc. */
		$buffer = str_replace(array("\r\n", "\r", "\n", "\t", "  "), '', $buffer);
		$buffer = str_replace(array(" {", "{ ", " { "), "{", $buffer);
		$buffer = str_replace(array("} ", " }", " } "), "}", $buffer);
		$buffer = str_replace(array(": ", " :", " : "), ":", $buffer);
		$buffer = str_replace(array("; ", " ;", " ; "), ";", $buffer);
		$buffer = str_replace(array(", ", " ,", " , "), ",", $buffer);

		/* add timestamp */
		$buffer.='/*'.gmdate('Y-m-d H:i:s').'*/';

		/* write file */
		$handle = null;
		if ($handle = fopen($minifiedFile, 'w')) {
			fwrite($handle, $buffer);
			//echo $buffer;
		}
		else{ echo "write error on file $minifiedFile";}

		fclose($handle);

	}

	return get_bloginfo('url').'/'.$minifiedFile;
  }

Bien entendu il sera possible d’intégrer l’appel à cette fonction directement dans wp_enqueue_script en utilisant le hook adéquat.

Il ne faut pas oublier de donner les droits d’écriture à l’application dans ce répertoire. Un chmod 775 suffit.

3 РD̩clarer les feuilles de styles CSS concern̩es

La fonction précédente retourne le chemin et le nom de la feuille de styles « minifiée ». Il suffit donc de l’intégrer dans la déclaration de celle-ci à Worpdress, dans le fichier function.php. Remplacez donc la déclaration précédente (voir point 1) par celle-ci:

$cssFile = compress_css('wp-content/themes/websourcingmagazine/xxx/', 'test', '.css');
wp_enqueue_style ( 'style', $cssFile, 'all');

Le troisième paramètre (l’extension) me permettra d’aller plus loin par la suite.

4 – Conclusion

La petite fonction fonctionne très bien chez moi. Je passe pour ma feuille de styles CSS principale de 18,5 Ko à 13,5 Ko (soit 27% de moins).

De plus, chaque modification de la feuille de styles « normale’, entraine la régénération de la feuille de styles « compressée », le tout automatiquement. Je n’ai plus à me soucier des synchronisations et je peux travailler sur une source « lisible« .

Enfin, je n’ai pas installé de plugin.

Je vais étendre cette technique pour les scripts Javascript. J’en ferais certainement un billet dans les prochains jours.