Max Kiesler – Designer

In this article I’ll be explaining the concept behind content encoding and discussing how this issue relates to web 2.0 web and AJAX sites. Next, I’ll be showing some examples of web 2.0 sites that are using this technology and those that are not. I will also do some simple tests with a few of the sites that are not currently using HTTP compression, to show what the benefits would be. Finally, I will give you all the resources you need to need to implement content encoding on your own website.

The Concept and How the Problem Relates to Web 2.0 and AJAX Sites

The concepts behind content encoding are very easy to understand. For example, when you download an image from your digital camera and make that image ready to upload to your website, you would compress the raw image from your camera to a format like gif, jpg or a png. In most cases, the images that are sent to you by websites are delivered in a compressed format, significantly decreasing the file size of the image. However, in most cases the html code, page content, css, and javascript files are delivered “raw.” Most of these files can be compressed from 20% to 80% or more, decreasing the overall page’s load time. This has the direct effect of keeping your users satisfied with an efficient web service and coming back, which in turn increases the ROI of your site.

Most next generation Web 2.0 sites are driven by content. Also, many of these web applications use AJAX on their front-end. Javascript files, libraries and HTML content can represent a significant load time for the end user. Given that performance (and server up-time) has become a growing concern for both designers and developers in the web 2.0 space, content encoding and compression is critical. In my recent study of many social bookmarking, search, blog and web 2.0 sites, a fair number of them are not using content encoding and deliver web pages to you uncompressed. What does this mean to you as a user? In most cases, it means more than twice the load time as necessary.

At this point you might be thinking, “is this is going to take years to implement, and cost millions of dollars?” Surprisingly, the answer is no. In most cases there is little or no cost, and it can take as little as 10 minutes to implement for an entire website. HTTP compression technology has been around for a long time, and is well documented and tested. Recently as performance issues and ROI are becoming a greater concern for web businesses, many companies are turning to HTTP compression as an easy to implement strategy for decreasing bandwidth. For large and small web companies alike, less bandwidth equals a cost savings, whether you have a personal blog or social bookmarking system with millions of daily visitors.

The Tests

As a quick sample, I tested some of the sites I go to every day. The methodology was to use WebSiteOptimization.com’s Web Page Analyzer and test each site to see if they where using HTTP compression.

If the site was one of the three sites chosen for the extended test, I then viewed the pages source in my browser, made a copy and saved it to my desktop. Next I uploaded the file to my server (Apache) and tested it. I then added the one line of code to the top of the page to enact the zlib compression and re-tested. I chose this method so I was only testing the html content of the page. What was not tested as far as content encoding was javascript, css or any other associated files. All of these file types can and should be encoded as well.

MaxKiesler
Without Compression: HTML: 43809 bytes
Download Times – Connection Rate – ISDN 128K – 11.59 seconds

With Compression: HTML: 8337 bytes
Download Times – Connection Rate – ISDN 128K – 9.43 seconds

TechMemeorandum
Without Compression: HTML: 43809 bytes
Download Times – Connection Rate – ISDN 128K – 11.59 seconds

With Compression: HTML: 15524 bytes
Download Times – Connection Rate – ISDN 128K – 1.64 seconds

RawSugar – search ruby on rails
Without Compression: HTML: 109508 bytes
Download Times – Connection Rate – ISDN 128K – 6.68 seconds

With Compression: HTML: 16381 bytes
Download Times – Connection Rate – ISDN 128K – 1.00 seconds

Other sites not using HTTP compression
FeedBurner
populicio.us
reddit
Bloglines
Blogger

Sites that are using HTTP compression
Technorati

del.icio.us
Digg
six apart
WordPress
Blinklist

The Resources to Compress Your Website

As stated above you can and should compress all of the files associated with your website. Javascript, css, html, and content can all be encoded and compressed. There are several ways to encode you content including through your server, through software applicaitons, in your htaccess file if you’re on Apache, or in the web page code itself. Below you’ll find a list of categorized links which should give you all of the information you need to compress your website.

Javascript Compression

JSMin – The JavaScript Minifier
JSMin is a filter which removes comments and unnecessary whitespace from JavaScript files. It typically reduces filesize by half, resulting in faster downloads. It also encourages a more expressive programming style because it eliminates the download cost of clean, literate self-documentation.

Apache Server Side Compression
Compressing Web Output Using mod_deflate and Apache 2.0.x

Compressing Web Output Using mod_gzip for Apache 1.3.x and 2.0.x

Compressing with .htaccess Using Apache and php
If your server is running php just add the following line of code to your .htaccess file.

php_flag zlib.output_compression On

Sample code to compress your web pages on an apache server running php

<?php
ob_start( 'ob_gzhandler');
?>
<html>
<head>
</head>
<body>

<p>This web page is now COMPRESSED!</p>
</body>
</html>

IIS Server Side Compression
httpZip 3.5 for IIS 4/5/6
httpZip is an IIS server module for ISAPI-based compression on IIS 4, 5, and 6.0 Web servers. The software compresses static and dynamic Web content using encoding algorithms supported by all modern browsers, with flawless decompression secured by real-time browser compatibility checking.

TurboIIS
TurboIIS is HTTP compression software for your Windows Server which accelerates the delivery of webpages. Compressing and optimizing files means less data to send so your server can send more data per minute, therefore fewer servers are needed.The integrated TurboCache feature prevents redundant access to database resources, speeding up page download times even more.

IIS Accelerator
The IIS Accelerator speeds up Web sites running on Microsoft IIS Web servers. Designed as an ISAPI filter, it smoothly integrates into your IIS environment.

Proxy-Based Compresson
Website Accelerator
The Website Accelerator reduces the transfer volume of static and dynamically generated web sites down to a fraction of the original size and proportionally speeds up the load time performance. This results in a better Internet experience for the Web site visitors and in reduced traffic costs for you.

HyperWeb
Our HyperWeb series of products accelerate web-based applications, e-commerce and high-volume web-sites for both wired and wireless user bases. HyperWeb allows for dramatic reduction in bandwidth, hardware, software and human resource expenditures.
HyperWeb is dynamic HTTP compression software for your existing web architecture. Designed to function as a stand-alone process (daemon) existing outside of the web server, HyperWeb eliminates the need to invest in additional costly hardware.

Software Compresson
HTML Compress 5.5
Download HTML Compress 5.5 which supports VBScript, JavaScript and CSS. HTML Compress will optimize the site making it smaller Without altering the appearance of the page. The fully customizable optimization algorithm supports XML, and you can add support other HTML like files.

HTML Compact

HTML Compact is a powerful HTML compression tool created for webmasters. Its effective compression algorithm can reduce the size of your pages by as much as 80% while keeping the appearance of the page the same. When implemented, the documents will be uncompressed in the user's browser, delivering the page exactly how it looked before compression. By using HTML Compact, your web pages will become much smaller which results in faster load times, saving you both bandwidth and disk space.

HTML Protection Rocket
HTML Protection Rocket is an amazing and easy-to-use tool that protects (and reduces in size) your HTML and JavaScript code:

HTTP compression Analysis For Your Website
Web Page Analyzer
Free Website Performance Tool and Web Page Speed Analysis
Enter a URL below to calculate page size, composition, and download time. The script calculates the size of individual elements and sums up each type of web page component. Based on these page characteristics the script then offers advice on how to improve page load time. The script incorporates best practices from HCI research into its recommendations.

PipeBoost
Simple Real-time URL Compression Reports.

Port80 Tools
HTTP Analysis Tools for Testing Port80 Software Products

Website Compression and Performance Resources
WebSiteOptimization.com
HTTP compression, otherwise known as content encoding, is a publicly defined way to compress textual content transferred from web servers to browsers. HTTP compression uses public domain compression algorithms, like gzip and compress, to compress XHTML, JavaScript, CSS, and other text files at the server.

WebPerformance.org
A repository of Web performance data on compression, caching, and measurement approaches.

Summary
Hopefully the take away from this article to the web 2.0 and AJAX community is that HTTP compression is easy to implement and very cost effective. It's a benefit to both you and your website users by facilitating lower bandwidth usage and faster load times. In short, there is no reason not to adopt HTTP compression on every website.

Also See
AJAX and CSS Optimization - Digg.com

Port80 Surveys HTTP Compression on the Top 1000 Corporations' Web Sites

[Technorati tags: ajax, xml, rubyonrails, ruby on rails, FeedBurner, populicio.us, web 2.0, reddit, Bloglines, Blogger , Technorati, del.icio.us, Digg, six apart, WordPress, Blinklist, TechMemeorandum, RawSugar, max kiesler, ideacodes]