Publié le 12/04/2012
Auteur Fobec
Réseaux sociaux
0 partages
0 tweets
0 plus
19 commentaires

Compression Gzip des fichiers css et javascript chez 1and1

La compression Gzip des feuilles de style et des fichiers javascript est une optimisation conseillée pour tous les sites internet. D'une part, la compression permet de libérer de la bande passante, d'autre part les outils de référencement naturel tel que Google Page Speed évaluent la compression des ressources.

Compression classique via htaccess

Placé à la racine du site internet, le fichier htaccess permet d'éditer des paramètres de configuration. Dans le cas de la compression, les commandes suivantes permettent d'activer la compression des ressources et de fixer la date d'expiration des fichiers.
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript
<FilesMatch ".(ico|gif|jpg|jpeg|png)$">
Header set Cache-Control "max-age=29030400"
</FilesMatch>
<FilesMatch ".(js|css|pdf|txt|swf)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>

Ce paramétrage n'est pas toujours accessible sur les hébergements mutualisés et notamment sur 1and1.fr.

Compression gzip sur 1and1

Après de nombreux essais avec htaccess, j'ai abandonné cette solution qui semble impossible.
Une alternative au module mod_gzip via htaccess est la compression à la volée avec ob_start() et ob_end_flush(). Le principe consiste à ouvrir le fichier js ou css avec PHP puis de compresser le buffer de sortie.
A nouveau les tests sur l'hébergement 1and1 n'ont pas été concluants !

Pour mettre en place la compression des fichiers css et js, nous allons suivre une autre méthode:
- compression gzip des fichiers avec gzencode(),
- configuration du header en fixant une date d'expiration,
- mise en cache des fichiers.
<?php
/**
 * Compresser les fichiers css et les fichiers js sur 1and1
 * @author Fobec.com 02/04/2012
 * @copyright http://www.fobec.com/tuto/1114/compression-gzip-fichiers-css-javascript-chez-1and1.html
 */
 
//Constante
$SITE_PATH='/kunden/homepages/40/d00000000/htdocs/';
$CACHE_PATH='/kunden/homepages/40/d00000000/htdocs/cache/';
 
/*******************************************************************************
 * le fichier css ou js n'existe pas sur le serveur
 * @return rien
 ******************************************************************************/
$file=$SITE_PATH.$_GET['f'];
if (!isset($_GET['f']) || !file_exists($file)) {
    exit(0);
}
 
$name=basename($file);
$file_cache=$CACHE_PATH.'res/'.$name.'.gz';
$file_ext=strtolower(strrchr($_GET['f'],'.'));
 
/*******************************************************************************
 * Déterminer le type de ressource
 ******************************************************************************/
$header_contenttype = 'text/plain';
if ($file_ext=='.css') {
    $header_contenttype = 'text/css';
} else if ($file_ext=='.js') {
    $header_contenttype = 'text/javascript';
} else {
    //pas de css ou js
    exit(0);
}
 
/*****************************************************************************
 * Charger le contenu fichier css ou js
 *****************************************************************************/
$buf=file_get_contents($file);
 
/*******************************************************************************
 * La requete porte sur un fichier non compressé
 ******************************************************************************/
if (stripos($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')=== false) {    
    $len=strlen($buf);
    header("Content-type: $header_contenttype; charset: UTF-8");
    header('Content-Length: '.$len);
    header('Vary: Accept-Encoding');
    header('Expires: '.gmdate('D, d M Y H:i:s GMT', strtotime(" 1 month")));
    echo $buf;
    exit(0);
}
 
/*******************************************************************************
 * La requete porte sur un fichier compressé
 ******************************************************************************/
 
//Rechercher la ressource en cache
$filedt=filemtime($file);
if (file_exists($file_cache)) {
    $file_cachedt=filemtime($file_cache);
} else {
    $file_cachedt=0;
}
 
//Compression du buffer ou lecture du cache
if ($file_cachedt>$filedt) {
    $gz=file_get_contents($file_cache);
} else {  
    //compression
    $gz = gzencode($buf, 6);
    //ecriture cache
    $fhandle=fopen($file_cache, 'w');
    if ($fhandle) {
        fwrite($fhandle, $gz);
        fclose($fhandle);
    }
    $file_cachedt=filemtime($file_cache);
}
 
 
/*******************************************************************************
 * Envoyer la ressource compressé au navigateur
 ******************************************************************************/
$len=strlen($gz);
header("Content-type: $header_contenttype; charset: UTF-8");
header('Content-Length: '.$len);
header('Content-Encoding: gzip');
header('Vary: Accept-Encoding');
header('Expires: '.gmdate('D, d M Y H:i:s GMT', strtotime(" 1 month")));
header('Last-Modified: '.gmdate('D, d M Y H:i:s GMT', $file_cachedt));
echo $gz;
?>
 

Mise en place sur un hébergement mutualisé 1and1

Script gzip
Enregistrez le script ci-dessous à la racine du site web. Nommez le fichier par exemple gzip.php

Nouveau répertoire
Avec un logiciel FTP, créez un dossier 'cache/' à la racine du site web.

Page HTML
Les liens vers les feuilles de style et les fichier js sont déclarés dans les pages HTML. Modifiez les balises meta ainsi:
Feuille de style:
<link type="text/css" rel="stylesheet" href="http://www.monsite.com/res/file.css"/>
est remplacé par
<link type="text/css" rel="stylesheet" href="http://www.monsite.com/gzip.php?f=res/file.css"/>

Fichier javascript
<script type="text/javascript" src="http://www.monsite.com/res/folib.js"></script>
est remplacé par
<script type="text/javascript" src="http://www.monsite.com/gzip.php?f=res/folib.js"></script>

Tests de la compression Gzip
Lorsque le script gzip.php et la configuration des fichiers HTML sont en place, vérifions que tout fonctionne comme prévu:
- tester la réponse du serveur avec http://web-sniffer.net/, tantôt en demandant un ressource compressée, tantôt en demandant une ressource non compressée.
- vérifier la création du fichier cache. Dans le dossier '/cache/' du site internet, 2 types de fichiers doivent s'y trouver, les feuilles de style par exemple file.css.gz et les ressources javascript file.js.gz.

Amélioration du script de compression

Regrouper les fichiers à compresser
Lorsqu'une page HTML comporte plusieurs feuilles de style ou plusieurs fichiers js, l'idéal est de regrouper le tout en un seul fichier. La vitesse de chargement en sera grandement améliorée. A partir du script gzip.php, le regroupement des fichiers est assez simple à faire.

Minifier les fichiers
Les feuilles de style et les fichiers js comportent des commentaires et des espaces inutiles pour un navigateur internet. Les ressources peuvent être minifiées directement dans le script gzip.php avec par exemple la librairie jsmin.php.

Autoriser la mise en cache par le navigateur
Une dernière optimisation est possible, la réécriture des liens vers les fichiers compressés. Pour l'instant, les feuilles de style ont un lien de type http://www.monsite.com/gzip.php?f=res/file.css, fichier qui ne sera pas mis en cache par les navigateurs internet.
Pour rendre le lien statique, editez le fichier htaccess à la racine du site internet avec un règle de réécriture de type:
#compress css,js
RewriteRule res/([\-[a-zA-Z0-9]*)\.css$ gzip.php?f=$1.css [L]
RewriteRule res/([\-[a-zA-Z0-9]*)\.js$ gzip.php?f=$1/$2/$3.js [L]


Ajouter un commentaire

Les champs marqués d'un * sont obligatoires, les adresses emails se sont pas publiées.
avatar Altair

Publié par Altair

le 06/05/2012 à 13:48:54

Bonjour, cette solution fonctionne-t-elle également sur les serveurs mutualisés Amen svp ?

avatar aalex57

Publié par aalex57

le 24/06/2012 à 23:48:13

Bonsoir,

Merci pour l'astuce, cependant votre fichier php ne fonctionne pas chez moi.
Il m'indique une erreur à la ligne 16 :/

avatar fobec

Publié par fobec

le 04/07/2012 à 10:24:12

Pour le script fonctionne, renseigner les constantes $SITE_PATH et $CACHE_PATH. Remplacer les valeurs avec les chemins de son propre site.

avatar nicolasterraes

Publié par nicolasterraes

le 12/12/2012 à 18:46:52

bonjour,
je ne comprends pas cette tape:

Les liens vers les feuilles de style et les fichier js sont declares dans les pages HTML. Modifiez les balises meta ainsi:
Feuille de style:
dans quels fichiers dans mon ftp dois-je concretement modifier
Merci d'avance,
Nicolas

avatar Fobec

Publié par Fobec

le 12/12/2012 à 19:01:14

Les liens vers les feuilles de style sont definis dans le template. L'emplacement sur le FTP depend du CMS utilise, par exemple sous WordPress les fichiers sont dans le dossier '/wpcontent/themes'

avatar pgts09

Publié par pgts09

le 09/01/2013 à 10:57:45

Bonjour,
Felicitations pour ce tuto simple, et qui semble repondre exactement ce que je cherchais !
Malheureusement je n'arrive pas faire fonctionner, voici ce que donne mon essai : J'ai pourtant l'impression d'avoir appliques toutes les etapes...
Une idee ...
Merci !
Stephane.

avatar romainN

Publié par romainN

le 09/01/2013 à 11:10:45

Bonjour,

Super tuto bravo! Je suis sur Wordpress 3.5 et 1and1 et la ligne HTML que je dois modifier est prsente dans plusieurs php et elle comprend des echo:

echo \\ dans le fichier wp-post-styling.php

avatar Romaingineer

Publié par Romaingineer

le 09/01/2013 à 11:11:06

Question un peu similaire celle de nicolasterraes.

Je ne trouve pas de ligne dans wpcontentthemes, j'en trouve 2 ou trois dans WP includes mais qui utilsent la fonction echo...

Du coup je ne sais pas trop ou faire la modif.

Theme: Awake
WP 3.5
1and1

Par avance merci et bonne annee!

avatar Fobec

Publié par Fobec

le 09/01/2013 à 11:31:35

Je ne maitrise pas du tout WordPress ...
un plugin a l'air sympa http://wordpress.org/extend/plugins/scripts-gzip/, en parcourant le code source, j'ai vu des pistes pour integrer Gzip sous WordPress

avatar hilflo

Publié par hilflo

le 10/04/2013 à 17:27:23

Tres bon article qui montre bien les subtilites des mutualises de 1and1.
Je l'ai utilise pour un de mes sites en y ajoutant de l'url rewriting pour eviter d'avoir des parametres dans l'url avec cette regle :
RewriteRule ^css_js.$ ^gzip.php?f=$1 [QSA,L]

J'ai d'ailleurs profite pour faire un lien vers ton article pour repondre a un membre qui se posait justement cette question

avatar hilflo

Publié par hilflo

le 16/04/2013 à 09:40:29

Pour Romaingineer, essaye d'aller voir dans le fichier functions.php dans ton theme, tu dois avoir des functions wp_enqueue_style ou wp_enqueue_script, c'est la que tu pourras faire des modifs

avatar beeker

Publié par beeker

le 12/09/2013 à 10:01:04

Le script fonctionne bien en hebergement mutua1isee

avatar MeepMeep

Publié par MeepMeep

le 12/09/2013 à 10:08:32

Attention, un petit correctif a apporter :
headerContent-type: $header_contenttype charset: UTF-8
Remplacer charset: UTF-8 par charsetUTF-8
La difference est subtile mais susceptible d'etre mal interpretee par certains navigateurs ex. : Android browser 2.3.4 qui du coup ne chargent pas les fichiers javascripts et css compresss. Il m' a fallu un bon moment avant de trouver cette petite erreur de syntaxe, si a peut epargner a certains de s'arracher les cheveux

avatar Roy2014

Publié par Roy2014

le 11/02/2014 à 00:09:00

Bonjour et merci pour ce tuto interessant. Je pense que tout le monde souffre avec 1and1 du fait que l'on puisse pas gziper directement via le htaccess!!
j'aurais une petite question:
tu dis a partir du script gzip.php, le regroupement des fichiers est assez simple faire. peux tu donner un exemple pour cela
Merci par avance

avatar Patrice

Publié par Patrice

le 18/02/2016 à 17:09:19

Bonjour

je cherche a activer mod_headers chez 1and1, impossible de mettre mes jpg en cache, auriez vous une piste ? merci !

avatar Fobec

Publié par Fobec

le 19/02/2016 à 15:10:40

Bonjour,

Sur Fobec.com, nous utilisons mod_expires.c pour envoyer automatiquement un code 304 au navigateur internet.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpeg A604800
ExpiresByType image/png A604800
ExpiresByType image/gif A604800
</IfModule>

Avez-vous deja essaye avec mod_expires.c sur votre hebergement 1and1 ?

avatar Yannick

Publié par Yannick

le 26/02/2016 à 23:56:55

Sur un de mes sites j'ai vraiment du mal a gerer le gzip sur 1and1, Je vais tout de suite tester tout ca et je vous tiens informe :)

avatar Jacky

Publié par Jacky

le 30/12/2016 à 15:52:54

Yes ! Merci pour l'astuce, c'est ce qu'il me fallait :) !

avatar Benjamin

Publié par Benjamin

le 06/08/2020 à 10:31:42

Fonctionne nickel, merci pour le script :)

A lire aussi

Réseaux sociaux
Présentation de l'article
Catégorie
tuto - webmaster
Mise a jour
12/04/2012
Visualisation
vu 13148 fois
Public
Internaute
Auteur de la publication
Fobec
Admin
Auteur de 267 articles
|BIO_PSEUDO|
Commentaires récents

Publié par Fobec dans php5

Bonjour,
vous pouvez poster un message sur le forum, la communaut vous donnera un coup de main pour la mise en place du script.

Publié par Fobec dans tuto

Pour la distribution Linux Mint 12 Lisa, saisir dans le terminal:
# sudo service lightdm restart

Publié par Mohamed dans java

Merci beaucoup j'ai eu un probleme de redimensionnement des images , mes images perdaient leur qualite, ta solution m'a aide pour ca mercii

Publié par Quentin dans tuto

Merci pour ces petits codes java script qui me sont d'un grand secours pour mon TP :)

Publié par fobec dans logiciel

Bravo, le soft a trouvé quelques 2400 liens sur le site en un temps record.