Speed up your websites using gzip and merging files.

20th October 2008

Many sites these days are using more and more Javascript and CSS which can quickly slow the websites loading speed. Gzip compression for your Javascript and CSS is not used in enough websites these days as many people still fear incompatibility with browsers. However this is no longer the case as all modern browsers are now compatible with it. There are heaps of ways to Gzip, none of which I could get to work on my web host, so I created my own which uses the zlib extension in php. I also included a few advantages to it such as merging of files which helps decrease the loading time even more.

Step 1: Add the gzip.php file.

Download the gzip.php file here. (V1.1.1)

Then add it to the root directory of your website.

Step 2: Adjust your HTML.

We now need to set your Javascript and CSS to run through the compression. We do this by adjusting the script and style addresses as follows…

For CSS

<link href="gzip.php?f0=css/main.css" rel="stylesheet" type="text/css">

For Javascript

<script src="gzip.php?f0=javascript/main.js" type="text/javascript"></script>

To change the address of the scripts just change the address that is in italic. Files are restricted to only files with the .css or .js extension.

Step 3: Merging Files.

Another slow point for loading time is using multiple Javascript files and CSS style sheets. The reason for this is for each file the browser needs to re-connect to the server before it can download it. However if you’re like me, you don’t want to have to merge all your files into 1 manually, so I’ve built in this ability into gzip.php. Simply merge files together as follows…

For CSS

<link href="gzip.php?f0=css/main.css&f1=css/more.css&f2=css/evenmore.css" rel="stylesheet" type="text/css">

For Javascript

<script src="gzip.php?f0=javascript/main.js&f1=javascript/more.js&f2=javascript/evenmore.js" type="text/javascript"></script>

So as you can see you can add files by adding in more f variables which count up from 0. You can add up to 100 files in the current configuration. Although if you have that many Javascript or CSS files then you should look at fixing that…

NOTE: Make sure you don’t miss any numbers when counting up otherwise it won’t include all your files.

Step 4: Caching Files.

Another trick that will help speed up your site is caching these files. Again I have that covered! Simply add cache=true& to the front of the file address as follows…

gzip.php?cache=true&f0=javascript/main.js&f1=javascript/more.js

If you don’t want to have the default 3 days expiry you may add in exp=#ofDays& and it will change the expiry period. For example the following will set the cache period to 31 days…

gzip.php?cache=true&exp=31&f0=javascript/main.js&f1=javascript/more.js

NOTE: It is not recommended that you cache files that are updated frequently as when the file is updated it won’t update in the browser for the number of days you set.

And there you have it! I have decreased loading time on my sites dramatically using this exact script so I hope it helps you out as much as it has with me!

UPDATE: Just released version 1.1.1 which adds new functionality and better ways to pinpoint errors. Release Notes.

UPDATE: Just released version 1.1 which fixes a security hole (thanks for the heads up Nail) as well as a number of other minor updates. Release Notes.

Categories: CSS, Featured, HTML, Javascript, PHP, Scripts, Tips

Tags: Compression, Gzip, Website Optimization


« Back

Comments

  1. ianimaru says:

    hello…
    i can’t download your gzip.zip, it’s broken link :D

  2. admin says:

    Fixed!

    Sorry about that…

  3. Nail says:

    Jason,

    The tool currently contains a security hole, you should be careful with file_get_contents.
    Now it’s possible to send something like gzip.php?f0=/etc/passwd and stole content of files from the server, for example, source code, database password, etc.

    But in general, sure it’s a useful tool (if the issue above fixed) and it can be used on hostings where we cannot change server settings.
    Also, I would send 1 month expires header (instead of 3 days) and I would send Last-Modified header so browsers will be able to send conditional requests.

  4. admin says:

    Thanks for the feedback Nail,

    I will update the script to only allow .css and .js extensions to be parsed which would solve this issue.

    As for the expiry, 3 days is generally fine for my usage, if people want longer expiries it’s easily changed in the php script.

    EDIT: V1.1 now released which fixes the above security flaw and has a few other minor updates.

    Thanks again.

  5. Andy says:

    Fantastic – I’ve been searching for this all day – just what I needed as no access to .htaccess. Just one query: it seems to work fine for me on PHP4.4.1 but I note the file says PHP5+ only. Might this cause problems?

  6. admin says:

    I haven’t tested it in PHP 4 so I can’t really say if it will work properly for you. I know some of the codes seemed to be different for PHP5 then they were for PHP4. All I can suggest is give it a go, if not, let me know, I might be able to whip a PHP4 compatible version for you.

    Cheers.

  7. Taneem says:

    Thank you very much for the library. It improved my application loading by 50%. My application was hugely based on javascript library and I didn’t know of gzipp concept earlier. I will be using your library from now on….

    Thank you again….

  8. Isra says:

    I prefer to gzip CSS files with Apache’s mod_deflate. For merge and minimize CSS, i use CssDispatcher.

  9. deerawan says:

    wow..very useful php class to gzip css and javascript. Thanks for sharing.

  10. iamjerson says:

    i tried to used your library but it seems that it doesn’t work for me.. i tried your example.html and configured my settings as mention here but when i checked in firebug it doesn’t load the file so i am receiving errors.

  11. @Iamjerson – In firebug, make sure you look at what is being read out as the javascript/css file in firebug (or just put it in the address bar of the browser). The library will say if it has had trouble finding a file in which case it couldn’t read the file in. If the file is blank than there would be either a configuration issue or your server does not have the required zlib php extension.

  12. Andrea says:

    This function has some problem with IE.

  13. Hi Andrea,

    This has been tested thoroughly in IE and works in all versions. The only problem is with IE6 not supporting too large or too many file being merged into one. If you’re experiencing problems with IE6 then separate the files instead of merging them and it should work without any issues.

  14. Pieter says:

    This might be just what I was looking for, thank you!

    I am downloading the gzip.php file right away.

  15. shoeb saifee says:

    Thank you very.
    this is exactly what i want

  16. jc says:

    how well would this option work with this php handler?

    i like what you have here but don’t want to create a ticking time bomb by using them both.

  17. Hi JC,

    I haven’t tested it along side PHP handler, all I can say is give it a go and see how it goes.

  18. JP says:

    hey jason, awesome article.

    I have a question though, since I can’t seem to get this to work, I’m guessing there’s some kind of server limitation holding me back.

    My question is, how do I find out if my server has the required zlib installed in order to run this php script?

  19. Hi JP,

    What you have to do is create a file called “phpinfo.php” on your server inside that file put the code < ? phpinfo(); ?>. When you go to this page it will list all the extensions you have installed. Make sure you have the zlib extension listed in there somewhere.

    Hope this helps.

  20. Hey Jason,

    So especially in today’s wonderful web design world, it’s important to remember web standards. Unfortunately, I wasn’t able to get this to validate and was getting 16 errors. I spent some time looking at the code. If you use a semi-colon, “;” instead of an Ampersand, “&” as your separator in your link and it fixes the problems in regards to that. Also, in your example link, adding a “/” and closing your css text, will make that valid as well. Hope this helps anyone out there that is a nerd and cares about this stuff!

    rad.
    abidecreative.org

  21. Wonderful work on the script though! It works amazingly well! Thanks!

  22. hmm, I’m actually running into some problems with what I posted. You would need to tell the server to use the ; instead of the & with something like this: php_value arg_separator.output ; I’m thinking that a line of code could be added in the script to set the separator output. Research says something like “ini_set(‘arg_separator.output’,';’); thoughts?

  23. haha, okay, last one. I seem to have gotten this working by replacing the ampersands with & in the links. It allows it to still pull the scripts and still remains valid. Sorry for all the changes in the comments, but that seems to have taken care of the issue at least as far as I can tell. Again, you have a wonderful script! Thanks!

  24. Hi Conrad,

    Thanks for the 50 replies ahaha.

    As Conrad said, for validation use the amp ascii instead of just the & symbol. This works fine, I use it myself to keep my coding valid. & amp; (remove the space) will do the trick, no extra work involved.

    Thanks Conrad.

  25. haha, yeah, well it was a process to figure out what exactly would take care of it.

  26. Shaun Olafson says:

    Hi There,

    Neat script. DOes it matter where you put the PHP file? Or can I just link to it wherever I put it like so:

    Thanks,

    SDO

  27. Shaun Olafson says:

    Like *so*:

    link href=”gzip.php?f0=css/main.css” rel=”stylesheet” type=”text/css”

  28. Shaun Olafson says:

    ARG LIKE _SO_:

    link href=”../support/php/gzip.php?f0=css/main.css” rel=”stylesheet” type=”text/css”

  29. Hi Shaun,

    Yes, you can link to it from pretty much anywhere as per your example.

  30. Gold says:

    Hmm, can’t seem to get this to work. I have Zlib enabled and can use gzip fine but not this script. Time for some debugging!

  31. Make sure the files you’re reading are local. For security reasons PHP doesn’t enable you to get remote files.

  32. Kailash Agarwal says:

    I have opened my website on firefox and tested it with firebug + Page Speed. Page Speed suggested me to compress the js and css file through gzip as well as caching. after searching lots of thrade I came to this post. I used abobe library for gzip and caching. after implementing it Page Speed mentioned that gzip (Enable compression) is ok but for caching it is listing the files with message “The following resources are explicitly non-cacheable. Consider making them cacheable if possible:”

    Please suggest if we already have below caching code in gzip.php file then why Page Speed is showing that message.

    header(“Pragma: public”);
    header(“Cache-Control: maxage=”.$expiresOffset);
    header(“Expires: ” . gmdate(“D, d M Y H:i:s”, time() + $expiresOffset) . ” GMT”);

    Regards,
    Kailash

  33. Make sure you’re passing cache=true as per step 4 and it will put in the appropriate caching headers.

  34. Tamik says:

    Works great, there is an online tool to do it without any server side routine : http://www.zbugs.com

  35. Jungwon Rhyu says:

    That is the tool what I looking for. But It does not work for me. I tried many browsers. When I try it, only “Loading” message is displayed. Do I have to do any special settings for Apache?

  36. Mr. Name says:

    Dude, you are a total lifesaver!!!! This works perfectly and is totally easy to use. We all you big time. Thanks!

  37. Rajesh says:

    Gettting the following error in php file;

    Uncaught SyntaxError: Unexpected token <

  38. Alex says:

    Css Gziped:

    My general.php command is now…
    <link rel="stylesheet" href="/stylesheet.css?” type=”text/css” />

    Can somebody reply me a working codeline ?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>