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? :)

Note, there's no such thing as <link rel="javascript"> (sadly), nor such a MIME type as text/js. — bobince
– bobince, Commented Apr 19, 2010 at 9:00

elias · Accepted Answer · 2010-04-19 08:56:25Z

22

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.

edited Apr 19, 2010 at 8:56

answered Apr 19, 2010 at 8:39

elias

1,4697 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Alexander_F Over a year ago

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

elias Over a year ago

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 Over a year ago

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

Sankalp Singha Over a year ago

@elias : What about Nginx?

EHorodyski Over a year ago

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 · Accepted Answer · 2013-04-02 21:34:51Z

15

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

answered Apr 2, 2013 at 21:34

Waiyl Karim

2,96824 silver badges25 bronze badges

2 Comments

Belladonna Over a year ago

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?

Waiyl Karim Over a year ago

Yes, this is all you have to do!

Peter Wiseman · Accepted Answer · 2013-02-08 05:11:58Z

6

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

answered Feb 8, 2013 at 5:11

Peter Wiseman

3544 silver badges7 bronze badges

Comments

ozil · Accepted Answer · 2015-10-05 06:22:59Z

5

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.

edited Oct 5, 2015 at 6:22

ozil

7,1639 gold badges38 silver badges61 bronze badges

answered Sep 16, 2013 at 16:00

Ratna

511 silver badge1 bronze badge

1 Comment

Jorge Over a year ago

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;

kovshenin · Accepted Answer · 2010-04-19 08:34:38Z

1

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

answered Apr 19, 2010 at 8:34

kovshenin

32.8k4 gold badges38 silver badges47 bronze badges

2 Comments

Alexander_F Over a year ago

Have i to prepare my files somehow?

kovshenin Over a year ago

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

Anil Namde · Accepted Answer · 2010-04-19 08:35:33Z

1

You need to handle this stuff using the configuration for HTTP server that you are using.

Could you please tell me which server you are using ? IIS/Apache ?

Following is link for compression with the IIS

answered Apr 19, 2010 at 8:35

Anil Namde

6,64812 gold badges68 silver badges101 bronze badges

Collectives™ on Stack Overflow

How can I gzip my JavaScript and CSS files?

6 Answers 6

5 Comments

2 Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

2 Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related