Mar 7, 2011

Is your page too "heavy"?

Heavy pages are like heavy people. They have to pause every once in awhile and when they need to move, they gotta take a second first. They were born agile enough... but over time, bit by bit, they got fat and slow, and then they started feeling crappy about themselves.

Load time is one thing, but some pages are slow after they load, too. Some pages are kind of jumpy when they scroll, or when they're loading up, your computer freaks out a bit, like you're launching a production program or something.

I realized the other night that my music website is obese. I kept bringing it up on my friend's laptop, and when it was open, everything else was slow. This is a modern MacBook, and granted they never ship those with enough RAM and my friends don't upgrade their RAM, but still. It's just a simple site.

It's a simple site with embedded fonts, a fixed background, a ton of embedded videos and audio players of about three varieties, and let's face it, it's a blogger site with a whole bunch of CSS that's being loaded and then cancelled out and then replaced.

Here's what I shall try in order to "optimize" my page:
  1. Limit the posts that load on the first page.
  2. Make the background scroll with the page. Every time I try a fixed background, I end up going back.
  3. Remove text shadows from body copy (what was I thinking?) and save 'em for headlines
  4. If all that isn't quite enough, (sigh), I'll consider using a "normal" CSS web fonts stack for the body text.

Luckily, my best buddy (Google Chrome) is on my side with its very own task manager. I find it in the "tools" menu. The task manager reveals some fun things about my music site:

  • scrolling it uses 30% of my CPU power (somewhere between my facebook news feed at 20% and my gmail inbox at 50%)
  • loading the page spikes the Shockwave Flash Plugin's CPU usage to 90% during loading and then it rests around 15% higher than normal
  • even just sitting around, these flash movies consume CPU cycles - 15% of them!
  • the flash plugin grabs about 50MB of RAM just to sit there with only gmail, facebook, and blogger open, and when I load my music site up, it jumps up to 80MB, so that's a 30MB difference

The effect of all this "weight" is that:

  • when I load the page, it can cause music to stutter, and the system to pause
  • when I forget about the page in the background, it becomes one of those "heavy" pages that makes me wonder why my computer is so super slow
  • I have to only have it open when I really want to use it
  • It's embarrassing because I should be on top of this, being the kind of designer who always says that users care more about their own time than someone's fun design sense
  • the purpose of the site (to play back and discuss music) is actually impacted

I don't have the heart to start ripping my page apart just yet, but at least I know I have a problem. That's the first and hardest step.