I gave a little talk at our monthly “All Developers Meeting” today. The topic was web optimization. Recently we setup http compression on our servers and I decided to take a look at how much bandwidth we save via all of our optimization/compression techniques. Using our academic programs page as a sample, I ran the numbers and found that we are saving from 1-6.5 terabytes annually. Here are my notes for the presentation:

No Optimization – Huge/bad/gross

No css or styles inline. Tables for layout. Scripts directly on page. Won’t even  bother showing an example.

Step 1. Separate code – 283 KB

Style is separated from content (separate .css). Behavior is separated from content (separate .js). Images are used wisely ( for instance 1px background image that repeats horizontally)

Step 2. Compress images, then compress again – 239 KB [44K less]

Choose the correct file type for each image (JPG for photos, PNG > GIF). Compress each image (using photoshop). PNG images can be compressed again (pngslim removes meta and shuffles bits – like defrag)

Step 3. Minify styles and scripts – 158 KB [81K less]

View compressed script library, or layout css. For Javascript we use JSMin (removes comments white space. Need well-formed code.) There are other algorithms like packer, but they requires non-trivial client-side processing time to uncompress the code. For CSS we use CSStidy ( removes white space., compresses colors, combines styles)

Step 4. Enable HTTP compression – 70 KB [88K less]

Note that this is our live version! Text is compressed by server and uncompressed by browser. Unsupported browsers will receive uncompressed version (wiki). Browser support: Internet Explorer (>= 4.0) FireFox (all) Netscape (>= 4.06) Opera (>=5.12) Images are not compressed further (doesn’t result in smaller size).
Minified files compress better then original.

Total Optimization

283 KB original
70 KB compressed
—————————
213 KB saved [That over a 2/3 savings]

And it adds up quickly!

Over the past year (Aug 4, 2007 – Aug 4. 2008) the site received:

• 32,550,230 Pageviews from
• 2,213,198 Absolute Unique Visitors

If 13KB was saved per pageview, then:

213 kilobytes * 32,550,230 pageviews = 6.5 terabytes of bandwidth saved

Or, with best-possible caching:

First page: 213 kilobytes * 2,213,198pages = 449.6 gigabytes
Subsequent pages: (32,550,230-2,213,198) pages * 20KB (html+images) = 578.6 gigabytes

So…

Between 1 and 6.5TB saved annually (not to mention the amount of time saved for our end-users)