Accueil > optimisation > compression-gzip-css

{ Activer la compression gzip sur les css }

Introduction

gzip

Appliquer la compression gzip sur les feuilles de style est un tout petit peu différent que pour les pages HTML/PHP. En effet, cette fois, il va falloir créer un nouveau fichier comportant l'extension .php qui va appeler via un include la ou les différente(s) feuille(s) de style de votre site pour pouvoir les compresser et accessoirement leur rajouter une date d'expiration de contenu afin que le navigateurs puisse identifier si ces dernières peuvent être mise en cache et pour combien de temps.

Création du fichier 'style.php'

<?php
if(extension_loaded('zlib')){
ob_start('ob_gzhandler');
}
header ('content-type: text/css; charset: iso-8859-1');
header ('cache-control: must-revalidate');
$offset = 60 * 60;
$expire = 'expires: ' . gmdate ('D, d M Y H:i:s', time() + $offset) . ' GMT';
header ($expire);
ob_start('compress');
function compress($buffer) {
// remove comments
$buffer = preg_replace('!/*[^*]**+([^/][^*]**+)*/!', '', $buffer);
return $buffer;
}

// Ajouter vos feuilles de styles ici
include('style.css');

if(extension_loaded('zlib')){ob_end_flush();}
?>

Appel du fichier 'style.php'

Maintenant il ne vous reste plus qu'à éditer vos pages .php et modifier le lien vers votre feuille de 'style.css' pour qu'il pointe sur 'style.php'

<title>Astuces Webmaster</title>
<link rel="stylesheet" type="text/css" href="css/style.php" />

Upload sur votre serveur

Charger le tout sur votre serveur et admirez la vitesse de chargement de vos pages.

Conseils

Utilisez des outils tels que 'YSlow' ou 'PageSpeed' pour tester la rapidité de chargement de vos pages et ainsi détécter les éléments à améliorer sur vos pages, les deux outils vous proposent également pleins de conseils pour diminuer le temps de chargement de vos pages. Vous trouverez bientôt, pour chacun des conseils qui s'affichent dans YSlow ou PageSpeed, la solution dans les tutos de Astuces-Webmaster !

Les avantages :

réduction de la quantité de données transférées via le réseau

Réactivité de votre site augmentée (+1)