Contact Me


Recent Posts


Categories


Archives


Tags

3d actionscript Actionscript 2 Actionscript 3 api APIs as2 as3 brand carousel channel code compress contest contract CSS Flash flv fp10 free gadget gadgets gdata google JavaScript jquery mvc papervision papervision3d PHP player playlist proxy puremvc pv3d Python search tube tutorial twitter video widget XML you youtube

Links


Help end world hunger

Speeding up Sites with GZip

Web sites need to be fast! Recently I’ve had some time on my hands so I’ve done some tests to see which is the best solution. I’ve had a read about different ways that web sites can be sped up, from compression before you upload files to server side compression.

Whenever it comes to speeding things up, I always remember the saying that “loading data from a flat file is slow, a database is slower, but memory is the quickest”. So that means if you’ve using server-side scripting such as PHP or Python, the best thing to do is to use memory caching such as APC or MemCache.

Now memory caching is awesome, but as good as it is, some hosting environments don’t have it turned on, so what can you do? Well I’ve put together a list of the ones that I’ve used on my portfolio and blog sites that don’t require non-standard configuration settings.

YUI, JSMin and other “before you upload” compression

When you download your copy of jQuery or your favorite framework, it normally comes compressed making it faster to serve. Now there’s been lots and lots of articles about which is the best compression utility available and I’m not going to tell you which one to use, but I use YUI compressor for both JavaScript and CSS.

Now a good compressor will compress your code to a ratio of about 30-60%, and that’s cool! Here’s a good comparison picker tool that’ll help you make your decision. Don’t forget to compress your CSS and XML as well!

Using Apache’s mod_gzip and mod_deflate

This is a nice and handy trick. You basically tell Apache to serve text files (such as XML, JavaScript and CSS) to GZip compress them on-the-fly before they’re served to the browser. GZip compression is pretty much the best widely available text compression you can get.

So how do you do it? Well simply open up your relative .conf file or .htaccess file and stick the following in there:

1
2
3
4
5
AddOutputFilterByType DEFLATE text/html text/plain text/xml

<files *\.(js|css|xml)>
SetOutputFilter DEFLATE
</files>

You need to make sure that you have mod_gzip and mod_deflate working on your Apache configuration. But if you haven’t got that, then the next one is for you.

Using PHP’s Ouput Buffering

PHP has the a great function called “ob_start()” that allows you to buffer the output of your contents of your PHP script and make it faster. But there’s more, you can set the type of compression you’d like PHP to use. If you pass “ob_gzhandler” as the variable for “ob_start()” it’ll use GZip to compress your output.

So, to use this, add the following to the top of your PHP file:

1
2
3
4
5
6
7
8
if ( substr_count( $_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip' ) )
{
    ob_start( 'ob_gzhandler' );
}
else
{
    ob_start();
}

You’ll see your file sizes drop! Now you’re probably saying that this isn’t practical for loading in CSS and JavaScript file, well there’s nothing stopping you from creating a proxy:

1
2
3
4
5
6
7
8
9
10
11
12
if ( substr_count( $_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip' ) )
{
    ob_start( 'ob_gzhandler' );
}
else
{
    ob_start();
}

$feed = file_get_contents( $_GET['f'] );

echo $feed;

You can then simple set up your HTML script code like this:

1
<script type="text/javascript" src="/gzip-service.php?f=assets/js/jquery.js"></script>

Now using FireBug you’ll see that the file size has dropped, awesome!

So you can now take this and hopefully it’ll speed up you web site, and to test, download and install a FireBug extension called YSlow.


Leave a Reply

Your comment:

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Fork me on GitHub