Gadgetopia

Steve Souders is Yahoo’s “front end engineer.” He’s the guy who wrote the article we discussed a few months back which brought us back to all those old “tricks” that make your Web site load faster.

Consider this: say your page takes 700 milliseconds to load from request to final render. As developers, we tend to obsess about the server-side time involved with this, but there’s a good chance that’s only, say, 300 milliseconds or so. This means over half the time is spent getting the page to the browser, and rendered in the browser. It’s this time which is a much juicier target for optimization than the back-end of the app.

But we tend to ignore this time. We tell ourselves how awesome we are that we can get a page “out the door” in 3/10ths of a second, meanwhile our users are sitting around waiting for four stylesheets and nine background images to load.

Souders rolls up his prior article and expands on it quite a bit to lay out 15 rules of good front-end engineering. Simple things like:

1. Reduce HTTP requests
2. Minify Javascript
3. Add an Expires header
4. etc.

The Expires header is interesting, and plainly obvious. You can make all your Javascript and CSS completely cacheable on the client, so that their browser doesn’t even ask for it from the server. Yes, we’ve all done If-Modified-Since headers, but even those force a GET request to ensure the target isn’t new.

Souders advises configuring the Expires header so the browser doesn’t even ask for the page. This isn’t new, but I’ve always been reluctant to do it because I feared that I couldn’t get the client to refresh their cache when I really need them to. The solution? Use your file names to “version” your Javascript and CSS to ensure the browser will refresh it when you need it to — when you have actually changed something. Did you ever wonder why all of Yahoo’s page components include the version number in their filename?

It’s a short book — less than 200 pages — and you could read it from cover-to-cover in an afternoon. In a way, it will bring you back to the days when we all had dial-up and we had to squeeze every last bit of performance out of our pages to avoid 10-second page loads, before the fat pipes of broadband made us all lazy.

Odds are that you could make a handful of changes to the front-end of your app that would be worth dozens of hours of re-engineering on the back-end to get your pages to render faster.