How to Compress HTML / XHTML size to make it load faster

Compress your html or xhtml code using gzip to optimize the speed of the website.

How to Compress HTML / XHTML size to make it load faster

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.

7 COMMENTS

  1. Pop
    December 29, 2010 04:53

    The compression technique is gud..anyways. thanks for the trick ^_^

  2. January 03, 2011 02:48

    What a great resource!

  3. jucarii
    April 26, 2012 19:52

    Thanks for some other informative website. The place else may I get that type of information written in such an ideal way? I’ve a challenge that I’m simply now operating on, and I’ve been on the look out for such info.

  4. Carlota340
    April 29, 2012 09:50

    Howdy very cool site!! Man .. Excellent .. Amazing .. I will bookmark your blog and take the feeds also

  5. May 27, 2012 14:54

    Great source! Tq very much….

  6. Barrett Sinatra
    April 10, 2013 04:22

    I do agree with all of the ideas you have offered for your post. They are really convincing and will definitely work. Still, the posts are very brief for novices. Could you please prolong them a bit from subsequent time? Thank you for the post.