Compress JavaScript with Gzip
The main problem when we are using ajax framework is because of their big size. Of course, it will extremely slow down the sites load time. For example, if we use the standard jQuery, it’s almost 100Kb. It’s even more if we use the complete Prototype and Scriptaculous that will cost around 150Kb.
This is really nightmare for people who still use GPRS or the old 56kbps Dial-Up internet connection. It will takes minutes to load the sites or maybe it will takes forever because the browser usually won’t download it. Unfortunately, it’s very easy to solve this problem. Do you know that we can compress those files and reduce the size by half or more?
There are several method to compress javascript and I think one of the most efficient method is using Gzip Compression.
To implement the gzip compression for websites, first we need to gzip the Javascript files. For that purpose, we will need a gzip-compatible archiver / compressor. 7-zip is my favorite because it’s small, very fast and it’s completely free.
Gzip the JavaScript file, change the “gz” extension to “jgz” for safari compatibility and upload it to the same location together with the original script. Then next, we must ask apache to get the compressed version if there is available and finally tell the browser to un-compress the file before it can be used.
To do that, we add these following code in our .htaccess
RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.jgz -f
RewriteRule (.*)\.js$ $1\.js.jgz [L]
AddType "text/javascript" .js.jgz
AddEncoding gzip .jgz
That’s all. Yeah.. And if you want to look for another method this is it.:
- Joseph Scott’s Blog – Compressed JavaScript
- rakaz – Make your pages load faster by combining and compressing javascript and css files
- Added Bytes – PHP, Gzip and htaccess
- Let me have a blog – Using GZIP compression in web servers using .HTACCESS
- Apache Module – mod_deflate
- mod_gzip – Internet Content Acceleration module for the popular Apache Web Server
No related posts.
Thanks! This method finally seems to work with all browsers out there, even in Safari 4, Chrome and the good old IE6 ^^
I had trouble using the .htaccess files to compress javascript & css. If you have the same trouble you can compress your files on the fly by using PHP. It can also merge the files for you for even faster loading times.
See the blog below to use PHP to compress your javascript & css files.
http://thewebdevelopmentblog.com/2008/10/tip-speed-up-your-websites-using-gzip-and-merging-files/
I’m having some trouble with implementing your post. I’m on 1and1 and I’ve got mod-rewrite working for other stuff, but I’m not sure if the HTTP-Accept Encoding is working properly on their apache server. If I remove the .js file, it seems to pick up the .jgz file, but if it is there, then it uses it and transfers the bigger file. Any ideas?
Scratch that, actually, I can’t get it to work at all. It’s just not detecting the .jgz at all. I’m suspecting that it’s because the apache is not working with the RewriteCond Http-accept Encoding rule.
Ok, after some more work, I realized that I in the course of troubleshooting I had it working partially, but then broke it. Now, I’ve got it back to where I started, which is working properly IF the .js file doesn’t exist. If it exists, then it uses the bigger file. Do I need to specify the .js.jgz file in my html?
Do i have to put something like “” and “” befor and after the code in the htaccess file ? thank you
Thanks! Works perfectly for me in Firefox, IE6, 7 & 8!
I m newbie with Apache and Javascript, so sorry for my question:
I use windows XP, with Apache 2.2.
In my HTML I have the following script TAG:
Important: All others javascript are not gzipped.
When I loaded the HTML page (Firefox) the “Error Console”, showed the error “illegal character”.
So, I created a file htaccess.txt and inside it I put the lines:
RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule (.*)\.js$ $1\.js.gz [L]
AddType “text/javascript” .js.gz
AddEncoding gzip .gz
Inside the httpd.conf I add the line “AccessFileName htaccess.txt” (without the quotes)
What is wrong? Why the message “illegal character” ?
Just upload your javascript files to yourjavascript.com and they will host and gzip your .js files.
You can compress practically anything i.e. trying with jpg
RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.jgz -f
RewriteRule (.*)\.jpg$ $1\.jpg.jpgz [L]
AddType “image/jpg” .jpg.jpgz
AddEncoding gzip .jpgz
Hi
I tried to do the same for CSS but didn’t work
Do i need to do something else so that it works for CSS as
well
Thanks
it worked now had made a minor mistake