Triple Website Performance With GZIP
September 22, 2006 § 5 Comments
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.
|Photo Matt||15791||5313||6556||32426 bytes|
|The Undersigned||23226||83094||11267||134567 bytes|
|Blogging Pro||59274||16230||10115||154496 bytes|
GZIP To The Rescue
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
Once you’ve got the basics covered, GZIP can make your site lean and mean again.
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.
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!