Designing for Traffic

Bandwidth usage graphSo last week was an interesting one, memetically: a link from Instapundit to the Kerry Daisy, and an April Fools’ barrage of links to the March for Web Standards, spawned from A Whole Lotta Nothing, Boingboing, StopDesign, and WaSP — all this within a span of two days. Traffic jumped from an average of about 200 visits per day to almost 2000 visits on 3/31, to over 3000 on 4/01.

It pays to be ready for traffic spikes and sudden popularity. Though the bandwidth issue may be dead to some, not all of us are hosted on paid or owned servers, or perhaps we simply wish to stick with what’s cheap, and are willing to accept bandwidth limitations for affordability. But that is no reason your web presence should go down in error screens with the first MeFi or Slashdot FPP. Here are a few tips to keep you afloat through the bandwidth crests:

  • Streamline that code. Maybe it’s turning into a cliché, but web standards work. Trim out the nested tables, unnecessary or redundant <div> class attributes, spacer GIFs (argh), and frames, and you can cut your page size — and loading time — to a fraction of what it was. There’s something to be said for minimalism.
  • Have a smaller — or no — sidebar on deep pages. Inside pages probably don’t need your entire linkroll, sideblog, archive listing, WinAmp playlist, and whatever other sidebar paraphernalia you use on your front page. Fix up your templates so that a more basic sidebar (or no sidebar at all) is shown. Main navigation, breadcrumbs, and search form may be all you need while indoors.
  • If you run a weblog, use individual archives. Single entry pages really help permalinking, and you don’t get hundreds of people loading up a whole month or week of entries just to get to that one anchored post. Of course, many of you still use services without individual entry archiving, in which case you should probably try and get the smallest increments you can. (Blogger goes down to Daily, I believe.)
  • Compress your graphics. One reason M4WeSt used that single-tone B/W image was that the GIF compresses nicely, having only two colors to deal with: #000000 and #FFFFFF. It’s a good idea to use clean line art or solid expanses of clear, non-dithered, non-gradiated color. The former will compress well in GIF or PNG, the latter will work for JPGs as well.

Another cliché to remember: every byte counts. Here’s hoping your website stays up through those fifteen minutes of fame. Comments are open to any useful additional input.

Comments

  1. filmgoerjuan says:

    Yes, I went through some bandwidth panic about a month ago when one of my posts was MetaFiltered. I was watching my bandwidth use creep up steadily towards my monthly maximum (and according to my host, there’s no paying for overuse, you just get cut off). Eventually I did two things: 1) moved a copy of the page that was receiving the hits to another server and put a redirect in on my server (which cut the bandwidth use down to nearly nothing) and 2) switched hosts mid-month to one where I can pay for any bandwidth over my monthly allotment. It wasn’t fun going through this — it was messy and panicked and I didn’t start posting again for almost a week.

    My site is XHTML 1.1 compliant, though I often add a 10K image to most posts, so that jacks up the bandwidth usage. But what can I do, without the photos my wry commentary is worthless!

  2. Nick Richards says:

    Also if you have any control over the server or can ask the admin, use mod_gzip on your apache. It speeds things up on text *and* saves you bandwidth at the same time. Double score!