How can I gzip my JavaScript and CSS files?

Question

I have a problem, I have to gzip a prototype Lib, but i totaly have no idea how to do this, where to start and how does it works. :)

I find some tutorials but that wasn't helpful...

So I have a folder with my JS Files:

/compressed/js/ 1.js 2.js 3.js

I'm calling these files for a test in this file

/compresses/index.php

<link rel="javascript" type="text/js" href="js/tabs.js" />
<link rel="javascript" type="text/js" href="js/fb.js" />

So what do I have to do? :)

Solution 1

You can use apache's mod_deflate to automatically compress your files on the fly.

Example:

AddOutputFilterByType DEFLATE text/html text/xml text/css text/javascript 

[edit]

To check if your apache server has already output compression enabled, put the example above into an .htaccess file. Then load an html or js file via the server and check the headers for "Content-Encoding", if it says gzip or deflate, it is enabled.

Solution 2

add this code to your .htaccess it will gzip all your css and js files.

# BEGIN GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
# END GZIP

Solution 3

I above example similar to this worked great but didn't compress javascript. I needed to add application/javascript.

AddOutputFilterByType DEFLATE text/html text/xml text/css text/javascript application/javascript 

Solution 4

Hi If you are using Nginx server the above will not help. Please edit the with command vi /etc/nginx/nginx.conf and add the below lines.

gzip on;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types    text/plain text/html text/css
          application/x-javascript text/xml
          application/xml application/xml+rss
          text/javascript;

Restart the nginx with command /etc/init.d/nginx reload . It will compress the JS and CSS files.

Solution 5

Perhaps you should look at the mod_deflate module for Apache: http://httpd.apache.org/docs/2.0/mod/mod_deflate.html

View more solutions

Comments

[Fribu - Smart Solutions]

Have i to prepare my files somehow?

[Fribu - Smart Solutions]

In my htaccess? Have I to prepare my js und css files? Zip them or somethink like this

[elias]

You need access to your vhost/server config to globally enable compression. You don't need to prepare your files, they're compressed automatically on request.

[elias]

Oh, you can use the example above in a .htaccess if output compression is enabled.

[kovshenin]

No, although minifying them would not be a bad idea ;)

[Sankalp Singha]

@elias : What about Nginx?

[Belladonna]

Sorry if this is a dumb question, but is this all I have to do? I don't need to gzip the files manually? just stick this in the .htaccess?

[EHorodyski]

Very helpful. Glad to see my personal site host has this enabled by default. I need to see if IIS is doing that behind the scenes for work, and I also wonder why some IDEs have an option to GZIP the file for you, and what benefit that would have to upload the GZIPed file on your FTP. In my quick test on IIS (can't vouch for Apache) you can't use a .js.gzip in part of your <script> tag and have it work. I'm curious as to how the internals work.

[Waiyl Karim]

Yes, this is all you have to do!

[Jorge]

this worked for me after many many attemps... Thank you very much. I also added some types, as my js needed application/javascript: gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript application/vnd.ms-fontobject application/x-font application/x-font-opentype application/x-font-otf application/x-font-truetype application/x-font-ttf application/xhtml+xml font/opentype font/otf font/ttf image/svg+xml image/x-icon;