Compresser en Gzip des fichiers ?

Question

LightBen

5 Dec 2011 à 02:22

Bonjour,

J'ai entendu que pour accélérer le chargement d'une page on pouvait compresser en gzip les fichiers js par exemple.

J'ai cherché sur le net, mais j'ai rien compris, j'suis pas mal en anglais mais là on m'en demande trop Smiley langue

Quelqu'un sait-il comment s'y prendre ? Je parle non seulement pour compresser en gzip (quel logiciel le fait sous Windows ?) mais surtout comment écrire ça dans le code... Je suppose que je ne remplace pas l'inclusion normale entre balises script, le .js en .gzip...

Merci =)

Muchos

5 Dec 2011 à 03:52

Cette petite douceur alsacienne devrait vous venir en aide.

Merci à l'outil de recherche maison !

jmlapam

5 Dec 2011 à 08:31

Salut,

Moi je te conseille le .htaccess du boilerplate, tout ce qu'il y a de mieux ! Smiley murf

LightBen

5 Dec 2011 à 13:28

Alors, juste, peut-on m'expliquer dans les grandes lignes ce que je dois toucher, parce que je ne comprends pas totalement l'article.

On parle de : en-tête HTTP, .htaccess, module Apache.

Je dois faire quoi en gros ? J'essaie de résumer dites moi si j'ai bon, et je me lance :

1) Ajouter un en-tête HTTP ?
2) Activer le module deflate dans Apache ?
3) Créer un .htaccess qui va dire quoi faire ?

Et "le .htaccess du boilerplate" qu'est-ce que c'est ?

Rodolphe

Administrateur

5 Dec 2011 à 14:58

Il parle du fichier .htaccess proposé par http://html5boilerplate.com/

Je le trouve un peu risqué car il contient de nombreuses instructions qui ne sont pas forcément applicables à tous les sites, surtout si la personne qui le met en place ne maîtrise pas totalement ce que cela signifie.

Débuter par un simple petit fichier .htaccess maison devrait suffire.

En effet, il faut s'assurer qu'Apache est bien équipé de deflate ou gzip selon sa version.

LightBen

5 Dec 2011 à 21:56

Donc Apache et .htaccess déjà.

Je dois toucher quelque chose ensuite dans l'en-tête HTML ?

Merci =)

jmlapam

6 Dec 2011 à 10:30

@dew: qu'est-ce qui est risqué là-dedans?


<IfModule mod_deflate.c>

# Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
    RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
  </IfModule>
</IfModule>

# HTML, TXT, CSS, JavaScript, JSON, XML, HTC:
<IfModule filter_module>
  FilterDeclare   COMPRESS
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/html
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/css
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/plain
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/x-component
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/javascript
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/json
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xhtml+xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/rss+xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/atom+xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/vnd.ms-fontobject
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $image/svg+xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/x-font-ttf
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $font/opentype
  FilterChain     COMPRESS
  FilterProtocol  COMPRESS  DEFLATE change=yes;byteranges=no
</IfModule>

<IfModule !mod_filter.c>
  # Legacy versions of Apache
  AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
  AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
  AddOutputFilterByType DEFLATE image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
</IfModule>
</IfModule>

~~supprimé~~

7 Dec 2011 à 15:34

dew a écrit :
Il parle du fichier .htaccess proposé par http://html5boilerplate.com/

Je le trouve un peu risqué car il contient de nombreuses instructions qui ne sont pas forcément applicables à tous les sites, surtout si la personne qui le met en place ne maîtrise pas totalement ce que cela signifie.

Débuter par un simple petit fichier .htaccess maison devrait suffire.

En effet, il faut s'assurer qu'Apache est bien équipé de deflate ou gzip selon sa version.

Bonjour,

Les instructions sont dans des <IfModule> pour ne pas provoquer d'erreur 500 si les modules en question (headers, deflate, expires) ne sont pas activés Smiley smile

LightBen

27 Dec 2011 à 01:05

Bon, j'ai enfin compris comment ça marche au niveau du .htaccess et apache.

Maintenant, dernière question qui va en faire marrer plus d'un Smiley langue

Si j'ai bien compris, tout ce qu'on fait sur Apache et .htaccess c'est pour dézipper les .js et les .css c'est ça ?

Une fois ça effectué... on prend chaque js et chaque css et on les gzip alors ? ^^
Et au lieu d'avoir des .css et des .js dans le FTP on a des .gzip qui sont dézippés lors de l'affichage c ça ?

Merci =)

Edit : et si c'est bien ça, une autre question... comment compresser en Gzip sous Windows ?
Modifié par LightBen (27 Dec 2011 - 01:16)

Patidou

27 Dec 2011 à 08:27

Non, tu mets tes fichiers tels quels sur ton site et c'est quand le navigateur demande un fichier qu'il est compressé par le serveur apache et envoyé. Rien à voir avec les fichiers zip. Smiley smile

LightBen

27 Dec 2011 à 11:13

J'ai utilisé le .htaccess du boilerplate en modifiant la page 404 et le délai de 1 mois à 7 jours, et dedans il y a cette compression, non ?

Et il n'y a qu'à changer ça en fait, le .htaccess en vérifiant que Apache le permet ?

Parce que j'ai actualisé Page Speed de Google et il me dit toujours "Autoriser la compression" en parlant de jquery.min.js et de 3 CSS à moi...

Patidou

27 Dec 2011 à 11:27

Pour voir si tes fichiers sont compressés, tu peux regarder par exemple avec firebug (onglet réseau/clic sur le "+" en face du fichier).

LightBen

27 Dec 2011 à 11:59

Merci pour tes indications =)

J'ai ceci :

Réponse
Date Tue, 27 Dec 2011 02:08:12 GMT
Server Apache/2.2.X (OVH)
Last-Modified Tue, 27 Dec 2011 02:08:12 GMT
Vary Accept-Encoding
Cache-Control max-age=31536000, public
Expires Wed, 26 Dec 2012 02:08:12 GMT
Content-Length 2222
Content-Type text/css; charset=utf-8
Content-Encoding gzip
Requête
Host (mon site)
User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:9.0.1) Gecko/20100101 Firefox/9.0.1
Accept text/css,*/*;q=0.1
Accept-Language fr-fr,en-us;q=0.7,en;q=0.3
Accept-Encoding gzip, deflate
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection keep-alive
Referer (mon site)
Cookie mediaplan=R3721206227

Je ne suis pas un pro mais en lisant un peu je vois des Gzip à certains endroits.
Je suppose que ça fonctionne ? =)
Modifié par LightBen (27 Dec 2011 - 12:00)

Patidou

27 Dec 2011 à 12:01

Oui ça fonctionne. Smiley cligne

La réponse c'est le serveur, la requête le navigateur : dans la requête tu peux voir que la navigateur indique au serveur qu'il accepte gzip et deflate, le serveur lui envoie un fichier css (text/css) compressé (Content-Encoding gzip).
Modifié par Patidou (27 Dec 2011 - 12:05)

LightBen

27 Dec 2011 à 12:37

OK ben alors merci beaucoup =D j'aurais appris quelque chose de bien utile =) (même si je ne comprends pas tous les rouages, c'est un bon début =)

Sujet clos

Questions générales et questions de débutants

Compresser en Gzip des fichiers ?