Combinez vos CSS et Javascript

SpeedyWeb / Dev (PHP / JS) / Combinez vos CSS et Javascript

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.

Êtes-vous un robot ? Pour le savoir complétez l'addition: 1 + 1 =