Xcellence-IT » Web Development http://www.xcellence-it.com Growth Enabling Technology Solutions. Fri, 09 Sep 2011 13:49:12 +0000 en hourly 1 http://wordpress.org/?v=3.0.5 How to Compress HTML / XHTML size to make it load faster http://www.xcellence-it.com/tips-tricks/web-development/435/how-to-compress-html-xhtml-size-to-make-it-load-faster/ http://www.xcellence-it.com/tips-tricks/web-development/435/how-to-compress-html-xhtml-size-to-make-it-load-faster/#comments Thu, 17 Dec 2009 13:02:52 +0000 Xcellence-IT http://www.xcellence-it.com/?p=435 Remember earlier we advised you to use three lines code to speed-up your wordpress. That is a nice method to compress html/xhtml code using zlib. Here is the another techniques we employ to compress html code for the server which doesn’t support zlib compression.

We’re going to use gzip compression instead of zlib compression.

Here is the one line php code you need to enter into your header file. This will compress html / xhtml code.

Here is how it works:

Well, when the system works normally (I mean without compression), it’s not that efficient. 100KB is a lot of text, and frankly, HTML is redundant. Every <html>, <table> and <div> tag has a closing tag that’s almost the same. Words are repeated throughout the document. Any way you slice it, HTML (and its beefy cousin, XML) is not lean.

And what’s the plan when a file’s too big? Zip it!

If we could send a .zip file to the browser (index.html.zip) instead of plain old index.html, we’d save on bandwidth and download time. The browser could download the zipped file, extract it, and then show it to user, who’s in a good mood because the page loaded quickly. The browser-server conversation might look like this:

  1. Browser: Hey, can I GET index.html? I’ll take a compressed version if you’ve got it.
  2. Server: Let me find the file… yep, it’s here. And you’ll take a compressed version? Awesome.
  3. Server: Ok, I’ve found index.html (200 OK), am zipping it and sending it over.
  4. Browser: Great! It’s only 10KB. I’ll unzip it and show the user.

The formula is simple: Smaller file = faster download = happy user.

Not convinced? Here is the example of yahoo.com, the size of which compressed to around 78% using this technique.

Want to check how much you can save using gzip? Go to http://www.gidnetwork.com/tools/gzip-test.php and enter your site address to check, how much bandwidth can be saved.

Here we use PHP to return compressed content. Give your HTML file a .php extension and add this code to the top:

<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
 ob_start("ob_gzhandler"); else ob_start(); ?>

Verify Compression:

Once you’ve configured your server, check to make sure you’re actually serving up compressed content.

  • Online: Use the online gzip test to check whether your page is compressed.
  • In your browser: Use Web Developer Toolbar > Information > View Document Size (like I did for Yahoo, above) to see whether the page is compressed.
  • View the headers: Use Live HTTP Headers to examine the response. Look for a line that says “Content-encoding: gzip”.

Be prepared to marvel at the results.

]]> http://www.xcellence-it.com/tips-tricks/web-development/435/how-to-compress-html-xhtml-size-to-make-it-load-faster/feed/ 3