Gzip output, minify CSS and JavaScript

Gzip output, minify CSS and JavaScript

Wednesday, February 13th, 2008 in PHP, Tools of the trade

Smaller pages mean smaller downloads and faster page loading. As a programmer, my primary goal is to develop PHP code that parses fast and consumes the minimum amount of resources. Bandwidth and filesize were not a problem that I realized until lately. So, what can you do to reduce filesize and as a consequence to that to use less bandwidth?

First of all, you can send your pages as gzip archives. Yes, I know older browsers don’t support that but let’s face it: how many of your website visitors still use a browser that can’t deflate gzipped pages? Not so many.

The most simple way to gzip your webpages is by using .htacces. Just put this line in there and you’re set.

php_value output_handler ob_gzhandler

What this line does basically tells apache (your beloved server) to send all php output gzipped. But this is only for your php files. To gzip external javascript too, you need to add this too into your .htaccess:

<filesMatch ".js$">
AddHandler application/x-httpd-php .js
</filesMatch>

Now, we have all php and javascript gzipped on request. That great!But wait, there’s more!

We can even minify our external javascript and css by stripping line breaks and white spaces and save even more bandwidth. The magic for this is done by the JSMin library. You can find the complete code and usage here.

As tools to help you in your javascript development, I strongly recommend the Firefox add-on – Firebug and with it Yahoo’s YSlow that reports you a lot of interesting stuff, including the page loading time on client side.

To minify .js and .css files locally on your computer and after that upload them on your server, the best tool is Yahoo! UI Library: YUI Compressor. From their description: The YUI Compressor is a JavaScript compressor which, in addition to removing comments and white-spaces, obfuscates local variables using the smallest possible variable name. A good explanation about how to use it from command prompt on Windows you can find here: YUI Compressor Tutorial.

Was this useful? Show your support.

digg Gzip output, minify CSS and JavaScript

11 comments

  1. naveen says:

    do more php code snipets…

  2. Hi naveen,
    I’m doing my best but time is scarce right now. By the way, thanks for commenting.

  3. divricean says:

    Hi,
    Nice tricks.
    Is there a way to enable caching for the gzipped output content? Because if you are serving static js there’s no need to always compress its content

  4. Yes, there is a way. I remember using once the minify PHP library. Give it a spin and see if it fits you.

  5. Léonie says:

    thanks for those great tricks – I uploaded minify on my server and it works like a charme.
    yslow seems to like my page now ;-)
    I use FastCGI on bluehost, so I guess “php_value output_handler ob_gzhandler” won’t work on my system…

  6. Matthias says:

    Hi Constantin,
    nice page, I like the Mootools examples!

    Tip for people who can’t modify their Apache and can’t install the JSMin either:
    Inject this at the top into css or js files and save and implement them as .php:

    
    

    cheers
    Matthias

  7. Matthias says:

    Edit:
    Oh, no BBcode ;)

  8. You can further compress external Javascript + CSS files by both gzipping and merging the files.

    The blog below has a PHP script that can do this on the fly for you.
    http://thewebdevelopmentblog.com/2008/10/tip-speed-up-your-websites-using-gzip-and-merging-files/

  9. Mark says:

    I’m looking at this tutorial hoping it works.. Currently backing up all my files. I’ll post the result here when I’m finshed. hope it works :-0

  10. rockjock says:

    Code snippet for Fat-Free Minify (an integral component of the PHP Fat-Free Framework) is at:-

    http://razorsharpcode.blogspot.com/2010/02/lightweight-javascript-and-css.html

  11. [...] flesta webbläsare, även mobila, stödjer gzip-komprimering. När vi komprimerade all html krympte sidan till runt 200kb, vilket ändå är för stort. Vi [...]

Leave a comment