A Django site.
June 24, 2008

Phil Windley
pjw
Phil Windley's Technometria
» Velocity 08: Even Faster Web Sites

Steve Souders of Google is speaking on Even Faster Web Sites. I've read Steve's book and loved it. It's the kind of book you read in the morning, use to make changes to your site in the afternoon and at the end of the day, you've made a huge difference.

Usually, a small percentage of the time (10%) a browser spends putting a page in front of the user is spent downloading the HTML document. Making the Web server faster might save compute time or storage, but it doesn't do much for the user's perceived response time.

80-90% of the end user response time is spent on the front end of the page load experience, so start there. You'll have a greater potential for impact. The changes are simpler than backend tuning. And finally, they've been proven to work. I can personally vouch for that.

Steve created rules or high performance Web sites and built them into a Firefox extension called YSlow. Running in on www.windley.com, shows that I don't do so well. I get a grade of "F." I'll have to work on that!

Steve's writing a new book that focuses on some new rules. Javascript is the place to focus. Javascript requests can have a big impact. They block parallel downloads because once they start executing nothing else happens. Steve created Cuzillion to allow people to create test pages easily that show browser behavior for particular choice.

Steve shows a table that shows that Facebook, for example downloads 1Mb of javascript and only executes 9% of them. Of the top ten sites on Alexa, the average is 252Kb with 26% of the functions executed. S

The first new rule is to split the initial payload. Split JavaScript between what's needed to render the page and everything else. The is largely something you have to do manually. Finding all the possible code paths is hard.

The next rule: avoid script blocking. There are numerous techniques to avoid script blocking. Most of these require some refactoring of the JavaScript code because you're downloading and then using a technique to eval what got downloaded. On technique that doesn't is appending the script after the page has loaded. One big difference between these techniques is how they affect the busy indicators. Some people get nervous when the page is "still loading" even when it's rendered and downloading scripts. On the other hand, if the status bar says "done" and the page hasn't rendered completely people will reload unnecessarily.

Long inline scripts block rendering and download. You can initiate execution with a setTimeout, move it to an external script, or use the defer attribute (IE only). Don't scatter them in the page and don't put it between the stylesheet and any other resource.

Tags: velocity08 web+performance

» Velocity 08: Some Tools for Improving Web Performance

HTTPWatch is an HTTP traffic viewer for Internet Explorer. There's a free basic edition, but the professional edition is almost $300! Whew! Firebug for Firefox, of course, remains free.

Fiddler is a Web debugging proxy that runs on a local port on your PC. It registers itself as a system proxy so it should work with most browsers (Firefox needs special configuration apparently). You can also point a browser on another machine at the proxy running on your PC. Wonder if you could do this in Fusion? It would probably work fine. You can also use it to monitor outgoing traffic for funny programs phoning home. Breakpoint debugging seems like a cool idea.

AOL Pagetest is an IE plug-in for measuring and analyzing Web page performance. Pagetest is free. One cool feature, it provides a checklist to see if your page is taking advantage of several well-known "best practices" for making Web pages speedy.

Firebug is a Firefox extension that is used for measuring and debugging Web sites. The Profile button profiles Javascript on the page and gives time by function. Statistical analysis can help with functions that have different behaviors depending on input. John Braton gave a demo of how to use Firebug profiling to optimize a page.

Tags: velocity08 web+performance browsers