Web 2.0 Notes: Optimizing the Frontend

This was the one-year follow-up after Steve Souders did his first presentation (at last year’s Web 2.0) on optimizing the performance of frontends. He’s done some amazing work collecting best practices, including a whole decision tree on the best methods to inject script into a page, based on browsers, the need to access scripts cross-domain, etc.

As far as immediate applicability to my work at Instructables, this was by far the most interesting talk of the conference for me. Rough notes after the jump.

Even Faster Web Sites
Focus on Web Operations, room 2002, Friday 1:30 PM
Steve Souders (Google)

Here’s a link to the slides. As a preview, below is the money shot: a full decision tree for how and when to use any one of six different methods for dynamic script inclusion:

In addition, I had a very interesting conversation with badass engineer/analyst Artur Bergman who has suggested some ninja moves to get us past the the external script loading problems that we’re having at Instructables. I’d previously been stumped, so this may be something of a coup.

Read the rest of this entry »

1 Comment »


Screenshot of header and copyright for the JSLoad fileI almost forgot about this, which is strange because I wrote it all the way back in August, 2007 and use it on a daily basis. JSLoad is a clever bit of plumbing that powers all of the user interface over at Instructables. We’ve released it under an open-souce license (LGPL.) A lot of non-coder friends read my blog, so the coolness of it may not be apparent. Suffice it to say that I’m proud of it, despite its rough edges. I’m also hoping that it will be useful to others.

For the geeks, JSLoad is a script loader and dependency manager:

The real usefulness of JSLoad comes with its ability to group dependencies using tags. Tags are arbitrary labels that you can apply to (i.e. make dependent on) any group of files or other tags. Tags can be applied to single files or multiple files. Multiple tags can be applied to a single file. You can even think of your tags as depending upon a portion of a file (say, class within a file containing several classes.)

As a result, you can mimic most other dependency structures: Chains, trees, or more complicated graphs. You can tag things that often appear together, that share a certain aspect; whatever your usage calls for. At Instructables, for example, we generally have a base set of widgets and features whose dependencies are primarily tree-like. Those little bits are then collected into larger groupings like “editable” or “commentable”; abstract labels that approximate the kinds of interfaces that are common on our site.

Tags are also very useful while refactoring code. Often, because of the flexibility of Javascript, you won’t be sure of the best way to split your code across files. Which portions will be used together most often, and should thus be grouped together to reduce HTTP requests? With JSLoad, you can tag the variant groupings, then organize your code as you wish. Your web pages will just call JSLoad the tags as they need them. Over time, you may find that one tag is used much more often than the others. Using JSLoad, you can refactor your code into a more efficient file structure, without changing any of the script calls in the pages that use the code.

Click through to the official page to read more or to download the code for yourself. You can also preview it on the test page to see it in action.

No Comments »