Minifiez vos feuilles de styles et vos fichiers javascript

On en parle de plus en plus, Google commence à prendre en compte le temps de chargement des pages dans son algorithme de positionnement.
Une façon simple d'accélérer le temps de chargement est de regrouper et compresser les fichiers externes, diminuant le nombre de requêtes HTTP et le poids de ces fichiers.

Ce tutoriel a pour objectif de vous expliquer comment mettre en place un tel système.

Introduction

Supposons que votre layout contienne les lignes suivantes :

<html>
<head>
    <title>Monsite.com</title>
    <link rel="stylesheet" type="text/css" href="/styles/common.css" />
    <link rel="stylesheet" type="text/css" href="/styles/site.css" />
    <link rel="stylesheet" type="text/css" href="/styles/divers.css" />
    <link rel="stylesheet" type="text/css" href="/styles/print.css" media="print" />
    <script type="text/javascript" src="/js/mootools-core.js"></script>
    <script type="text/javascript" src="/js/mootools-more.js"></script>
    <script type="text/javascript" src="/js/application.js"></script>
</head>
<body>

Ceci pourrait se représenter par l'arborescence suivante :

Exemple d'arborescence

Nous remarquons que ces quelques lignes feront appel à 7 fichiers externes, fichiers qui ne sont pas forcément compressés. Je propose donc de regrouper les fichiers qui peuvent l'être et y supprimer les caractères inutiles (espaces, sauts de ligne et commentaires).

De cette manière, nous n'appellerons plus que 3 fichiers que je nommerais minify.all.css, minify.print.css et minify.js (dans notre exemple, nous avons besoin de 2 feuilles de styles).

Modification du layout/template

Notre code précédent deviendrai le suivant :

<html>
<head>
    <title>Monsite.com</title>
    <link rel="stylesheet" type="text/css" href="/styles/minify.all.css" />
    <link rel="stylesheet" type="text/css" href="/styles/minify.print.css" media="print" />
    <script type="text/javascript" src="/js/minify.js"></script>
</head>
<body>

Bien entendu, cela ne suffira pas, les fichiers "minify" n'ayant pas étés générés.
Pour se faire, nous allons utiliseront des scripts PHP qui généreront les autres fichiers s'ils n'existent pas, nous les appellerons minify.css.php et minify.js.php.

Le fichier minify.css.php

Nous placerons ce fichier dans le dossier styles, nous verrons par après comment l'appeler ;)

<?php

// Paramètres
if(isset($_GET['media']) && $_GET['media']=='print') {
    $sources = array('print.css');
    $dest = 'minify.print.css';
} else {
    $sources = array(
        'common.css',
        'site.css',
        'divers.css'
    );
    $dest = 'minify.all.css';
}


// Traitement
error_reporting(0);

$out[] = sprintf('/* Generated on %s at %s */', date('Y-m-d'), date('H:i'));
foreach($sources as $source)
{
    $out[] = '';
    $out[] = sprintf('/* %s */', $source);
    $out[] = minify_css(file_get_contents($source));
}
$out = implode("\n", $out);

// Affichage
header('Content-Type: text/css');
echo $out;

// Enregistrement
file_put_contents($dest, $out);


/*
 * La fonction minify_css()
 *
 * placez ici la dernière version que vous trouverez à l'adresse :
 * http://code.seebz.net/p/minify-css/
 */

Le fichier minify.js.php

Ce fichier, à placer dans le dossier js, est assez semblable au précédant.

<?php

// Paramètres
$sources = array(
    'mootools-core.js',
    'mootools-more.js',
    'application.js'
);
$dest = 'minify.js';



// Traitement
error_reporting(0);

$out[] = sprintf('/* Generated on %s at %s */', date('Y-m-d'), date('H:i'));
foreach($sources as $source)
{
    $out[] = '';
    $out[] = sprintf('/* %s */', $source);
    $out[] = minify_js(file_get_contents($source));
}
$out = implode("\n", $out);

// Affichage
header('Content-Type: application/javascript');
echo $out;

// Enregistrement
file_put_contents($dest, $out);


/*
 * La fonction minify_js()
 *
 * placez ici la dernière version que vous trouverez à l'adresse :
 * http://code.seebz.net/p/minify-js/
 */

A ce stade, nous devrions avoir cette arborescence :

Nouvelle arborescence

Maintenant, il ne nous reste plus qu'à faire une règle du style « si le fichier "minify.js" n'existe pas, on charge le fichier "minify.js.php" ». (Même chose pour les feuilles de styles)

Le .htaccess

# Désactivation de l'option MultiViews (à décommenter si nécessaire)
#Options -MultiViews

# Minify
RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+)/minify\.js$           $1/minify.js.php [L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+)/minify\.css$          $1/minify.css.php [L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+)/minify\.all\.css$     $1/minify.css.php?media=all [L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+)/minify\.print\.css$   $1/minify.css.php?media=print [L]

# Cache (30 jours)
<FilesMatch "minify(\..+)?\.(css|js)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>

De cette façon, les fichiers seront générés lors du premier appel et seront mis en cache pendant 1 mois dans le navigateur, économisant encore quelques requêtes HTTP inutiles.

J'espère que cet article vous a plu et vous sera utile :D

comments powered by Disqus