Triple Website Performance With GZIP

September 22, 2006 § 5 Comments

[blowfish]

Has Broadband Spoiled Us?

Do you know some of the most well-designed website home pages are approaching 400k???

More Automation Means More Code

Since discovering the power of WordPress themes and plug-ins, I’ve battled with growing page size and slowdowns from script complexity. With some of our pages approaching 150k, I felt guilty that I was getting sloppy.

After a day’s work, we now have the holy grail of performance boosts: GZIP compression. Scripts, CSS and HTML files are compressed around 3:1.

As of right now VibeTalk has more features than ever and the homepage is down to 70k!

My question is: why aren’t more people using this?

MyBlogLog Proves Themselves Again

Having compressed everything on our site with GZIP, I began to notice that external scripts (particularly usage analysis code) were now the largest files.  Happily, Google is on the bandwagon and GZIP’s their code, but others were not, so I went a’calling on one…

MyBlogLog Communities has got to be the most responsive startup I’ve seen.  I sent an enhancement request to earlier this week asking if they’d mind enabling GZIP for their tracking scripts. While I expected promptness, I was amazed that they enabled it in a matter of hours!

The script went from 7k to 2.5k. Sweet.

However, aside from Google, they seem to be the only ones doing it.  WebTrends, Site Meter and Performancing do not compress their tracking script files.

Uh Oh. What Happened To Web Design 101?

I got curious who else wasn’t using GZIP and guess what else I found? Compressed scripts were the least problem on most of these sites.  It is SHOCKING how many bloated sites there are out there.

The suprising part is that some of these sites are leaders in the blogging space.

Whereas MyBlogLog’s site is an excellent example of a clean, no frills interface, others seem to have forgotten the fundamentals of good web design. As I looked for GZIP usage I found some sites had huge graphics and CSS files.  

How Big Is Too Big?

Large pages (particularly your homepage) are *bad*. According to Web Site Optimization, one of Andy King’s many developer tool incarnations, webmasters should target a 30k overall page size. Some header graphics are larger than that!

At 30k, users on a 56k modem should be able to get the full page in about 8 seconds.

Historically, I’ve targeted a 50k home page, but in these days of fancy websites, even getting under 100k seems difficult.  That doesn’t take into account the server impact of dynamically-generated content (which taxes servers and can delay the start of content delivery).

The Best And Worst Sites

I picked these sites somewhat randomly but mostly because I frequent them.  They also tend to represent key “constituencies” in the web world.

Google, Yahoo and Microsoft are defacto leaders in web design, while the blogging sites are similar in purpose to VibeTalk.

I added a few design- and media-oriented sites because I look to them for ideas (the current and last theme here on VibeTalk are largely based on work from Solostream, one of many excellent WordPress-based sites you’ll find).

Tubetorial is interesting because they just came on the scene as a site that teaches you how to make websites and configure a WordPress blog. Ouch.  Very pretty, but an ironically bad example, IMHO.

Site Images Script CSS Total
Google 8641 0 0 10675 bytes
Photo Matt 15791 5313 6556 32426 bytes
WordPress 29609 5313 3563 40848 bytes
MyBlogLog 18218 4193 7687 49550 bytes
The Undersigned 23226 83094 11267 134567 bytes
Blogging Pro 59274 16230 10115 154496 bytes
Microsoft 63659 63062 11327 171812 bytes
Yahoo 97280 59392 2048 186368 bytes
Solostream 236543 11571 23184 327048 bytes
Tubetorial 329843 1011 16570 363887 bytes

 

GZIP To The Rescue

I originally started by using Dean Edward’s JavaScript Compressor/Obfuscator program with our biggest scripts. It compresses mightily (around 2:1), but unfortunately, if your function definitions aren’t terminated with semi-colons, the compressed code won’t decompress correctly.  I wasn’t about to go through every line of prototype.js to fix this!

This did allow me a careful review of several uneccesary plug-ins.  For example, I wouldn’t recommend using Edit N Place – handy as it is, it puts way too much unneeded admin code into your general UI.

Then I wanted to compress our CSS files and I found it’s way too difficult to maintain several color versions plus a compressed and uncompressed version for each.

After more searching, I stumbled across a few articles on enabling GZIP through .htaccess rules or through a two-step trick php.  Too difficult.

Finally, I found a great article that said IIS already has GZIP ability. Built in!

How To Enable GZIP

[tougher blowfish]

Once you’ve got the basics covered, GZIP can make your site lean and mean again.

The beauty of GZIP is that when enabled on your web server, *every* file can be compressed.  In addition to squashing javascript, html and css files, you can even zip the output of dynamic content provided by PHP and ASP.

Enabling GZIP on your server varies.  We use IIS6, and I found an excellent step-by-step guide by Scott Forsython on wwwcoder: IIS Compression in IIS6.0.  (BTW, I usually put these kind of links on the VibeTalk account at del.icio.us. If you subscribe by email or RSS, you’ll be notified when I post a new one).

Because IIS does not provide an interface for adding GZIP, you will have to edit the metabase.xml file directly. It is very VERY important to back up your metabase.xml file before starting. I spent an hour fixing the site after I mucked it up. Bad Joe.

The gist of what Scott shows you how to do is

  • Enable compression at the site level
  • Load the GZIP web service extension
  • Edit the metabase.xml file to indicate that you want to compress .php files on-demand at level 9 (0-10 scale)

For VibeTalk I have also added .css and .js files to the static file list.

What Not To GZIP

The one thing you probably don’t want to compress are graphics files – they’re already compressed. The same holds true for zip and other archive formats, obviously.

Summary

OK, so what’s the lesson here?

  • Be sure to regularly review your site for overly-large graphics and unecessary code
  • Turn on GZIP compression for everything except graphic and archive files on your web server
  • Make sure external script providers have GZIP turned on too

I hope each and every one of you gets your site home page below 100k. Good luck!

Advertisements

§ 5 Responses to Triple Website Performance With GZIP

  • What an excellent post here! I’ve been looking into re-doing a couple of my web pages and I will definitely keep these tips in mind and try GZIP too. I think your info will help a lot of people. Thank you!

  • Joe says:

    Thanks for the kind words! You are quite welcome.

    Let me know if you have any questions or hurdles. Most of this is a simple distillation of what others have written – I just wanted to save others the time I spent. šŸ™‚

  • Radderz says:

    Nice article for encouraging people to use GZIP – It saves time for us, and bandwidth / money for the hosting companies šŸ˜‰

    I like your style, and on the same note, I would love to see you educate everyone about If-Modified-Since headers too. It helps save bandwidth, not just from regular surfers, but from the thousands of search engine requests you can get daily on very large sites, or RSS feeds which are dynamic, yet have not necessarily changed – Yet few people implement it!

    Thanks, Radz

  • Brian Clark says:

    Yikes! I am all over Pearson for this one.

    Damn primadonna with his fancy designs. šŸ™‚

  • Joe says:

    Radz,
    they say flattery’ll get you everywhere. Now if *I* could just figure out IMS. heh.

    As far as I can tell, when Firefox sends an IMS, my server properly responds with a cache header, but only for CSS and JS files. Not sure why it doesn’t work for dynamic content.

    I think I have more to read…

    Brian – just know that I wouldn’t pick on you guys if I hadn’t already been drooling over that there flashy site. šŸ˜€

    Seriously, everyone’s talking about tubetorial and I suspect you’ll fix performance when you can.

    How’s that saying go? “I may be fat, but I can lose weight… you’ll always have a blog with only four links” šŸ˜›

    Thanks for being a sport.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

What’s this?

You are currently reading Triple Website Performance With GZIP at VibeTalk by Vibe Technology.

meta

%d bloggers like this: