Combine.php : minifie et regroupe vos ressources CSS/Javascript
A l'aide d'une simple réécriture d'URL et d'un script PHP, nous allons voir comment compresser, minifier, et regrouper vos fichiers CSS et Javascript.
Donnez un coup de boost à votre PageSpeed !
Cet article est en parti repris du site officiel de rakaz.nl, dont vous trouverez le lien ci-dessous, mais les fichiers à télécharger ont étés modifiés par SpeedyWeb pour différents projets..
Lien vers le site officiel (http://rakaz.nl/code/combine)
Partons du fait que vous ayez un répertoire pour les fichiers CSS et un répertoire pour les fichiers JS sur votre serveur.
Le script charge les fichiers et les compresse avec gzip. Il envoie ensuite le fichier compressé au navigateur. Cela fonctionne de manière totalement transparente, vous n'avez donc pas besoin de changer quoi que ce soit dans votre code existant.
La compression des fichiers diminue la taille des données qui doivent être transférées, mais vous ne pouvez télécharger qu'un nombre limité de fichiers simultanément au chargement de la page. Si vous avez plusieurs fichiers différents qui doivent être chargés, le navigateur ne saura pas utiliser de façon optimale la bande passante à laquelle il a accès. Il demandera certains fichiers au serveur et attendra jusqu'à ce que ces fichiers soient récupérés avant que le reste des fichiers sont demandé. La solution à ce problème consiste à combiner tous vos différents fichiers en un seul gros fichier. Et c'est exactement ce que le script tente de faire. Vous pouvez concaténer plusieurs fichiers en ajoutant simplement les noms des autres fichiers à l'URL du premier fichier.
Prenez par exemple les URL suivantes:
http://www.creatype.nl/js/prototype.js |
http://www.creatype.nl/js/builder.js |
http://www.creatype.nl/js/effects.js |
http://www.creatype.nl/js/dragdrop.js |
http://www.creatype.nl/js/slider.js |
Vous pouvez combiner tous ces fichiers en un seul fichier en changeant simplement l'URL:
http://www.creatype.nl/js/prototype.js, builder.js, effects.js, dragdrop.js, slider.js |
La version mise en cache est créé automatiquement la première fois que cette combinaison particulière de fichiers est utilisé et utilisé à chaque fois - tant que les fichiers ne sont pas modifiés. Le résultat est qu'une fois le cache est créé le fichier compressé est livré presque instantanément.
Configurer le script
Vous devez d'abord télécharger et configurer le script combine.php. Par défaut, ce script va regarder dans les dossiers js et css de votre répertoire de base, mais si vous êtes en train d'utiliser des répertoires différents, vous pouvez modifier ces valeurs au début du script combine.php. Téléchargez le script combine.php à la racine de votre site.
Deuxièmement, vous devez créer un répertoire cache accessible en écriture sur votre le serveur. Encore une fois, par défaut, ce script va chercher le répertoire cache à la racine du site, mais vous pouvez modifier l'accès à ce dossier dans le script combine.php.
Initialisation combine.php
$cache = true; // Activation de la mise en cache (false si désactivée) $minifier = true; // Activation de la compression des fichier (false si désactivé) $cachedir = dirname(__FILE__) . '/cache'; // URL du dossier cache $cssdir = dirname(__FILE__) . '/css'; // URL du dossier css $jsdir = dirname(__FILE__) . '/js'; // URL du dossier javascript
Ajoutez ensuite les lignes suivantes dans le fichier .htaccess:
RewriteEngine On RewriteBase / RewriteRule ^css/(.*) combine.php?type=css&files=$1 [L] RewriteRule ^js/(.*) combine.php?type=javascript&files=$1 [L]
Remarque: si votre fichier .htaccess utilise déjà la réécriture d'URL, vous n'avez pas besoin d'ajouter les deux premières lignes. Vous pouvez simplement ajouter les deux dernières lignes de la fin du fichier .htaccess.
alain le mardi 30 décembre 2014 à 18h01
bonsoir, jai pas vriament compris, jai un doute, procéder ainsi ou jai tout faux? $jsdir = dirname(__FILE__) . '/js'; // URL du dossier javascript comme ceci : $jsdir = dirname(__FILE__) . '/inc '; // URL du dossier javascript (si mon dossier contenant les .js et inc) ou bien le formuler avec une adresse url, peut mettre plusieurs dossier ? merci, cordialement
Serge le vendredi 06 janvier 2017 à 09h04
Bonjour, Merci Alexandre pour votre article Votre article date un peu, mais comme Alain je ne s’est pas si je dois mettre exemple pour le Css $cachedir = dirname(__FILE__) . '/Css'; 'combine/css/'; Ou $ Cssdir = dirname (__ FILE__). '/ Css'; //monsite.com/combine/css Ou $ Cssdir = dirname (__ FILE__). '/ Css'; http://monsite.com/combine/css D'avance merci pour cette information Serge
Alexandre le vendredi 06 janvier 2017 à 10h13
Bonjour Serge, Il faut indiquer le chemin de votre dossier css à partir du fichier combine.php. Ex: - $cssdir = dirname(__FILE__) . '/template/theme/css'; En espérant que ce soit plus clair
Serge le samedi 07 janvier 2017 à 11h13
Bonjour Alexandre, Merci pour votre aide. J'ai changé les ligne css et js avec ceci $cssdir = dirname(__FILE__) . '/wp-content/themes/twentyfifteen/css'; $jsdir = dirname(__FILE__) . '/wp-content/themes/twentyfifteen/js'; et pour le cache j'ai ceci $cachedir = dirname(__FILE__) . '/combine/cache'; Mais hélas cela ne fonctionne toujours pas Voyez-vous mon erreur ? Cordialement Serge
Serge le samedi 07 janvier 2017 à 12h12
Bonjour Alexandre, Merci pour votre aide. J'ai changé les ligne css et js avec ceci $cssdir = dirname(__FILE__) . '/wp-content/themes/twentyfifteen/css'; $jsdir = dirname(__FILE__) . '/wp-content/themes/twentyfifteen/js'; et pour le cache j'ai ceci $cachedir = dirname(__FILE__) . '/combine/cache'; Mais hélas cela ne fonctionne toujours pas Voyez-vous mon erreur ? Cordialement Serge
Serge le samedi 07 janvier 2017 à 12h21
Bonjour Alexandre, Merci pour votre aide. J'ai changé les ligne css et js avec ceci $cssdir = dirname(__FILE__) . '/wp-content/themes/twentyfifteen/css'; $jsdir = dirname(__FILE__) . '/wp-content/themes/twentyfifteen/js'; et pour le cache j'ai ceci $cachedir = dirname(__FILE__) . '/combine/cache'; Mais hélas cela ne fonctionne toujours pas Voyez-vous mon erreur ? Cordialement Serge
Serge le mercredi 11 janvier 2017 à 18h10
Bonsoir, Voyez-vous mon erreur ?
Serge le jeudi 12 janvier 2017 à 10h48
Bonsoir, Voyez-vous mon erreur ?
Alexandre le jeudi 12 janvier 2017 à 11h05
Bonjour Serge, non comme cela je ne peux pas me rendre compte de votre erreur. Par contre avec Wordpress j'imagine qu'il existe déjà des plugins permettant de combiner les css et javascripts. https://fr.wordpress.org/plugins/bwp-minify/ https://fr.wordpress.org/plugins/js-css-script-optimizer/
Ajouter un commentaire
Les commentaires sont modérés à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.