I recently acquired a copy of High Performance Web Sites by Steve Souders, published by O’Reilly. This is a quick read but a good one. In a nutshell, it provides 14 rules for making your website perform better for your visitors, primarily by making it perform faster.
The rules are all good, but two complimentary rules stand out for me, partly because I hadn’t really thought about the best-practice way to handle stylesheets and scripts. The principles are simple, but logical, and worth following.
Put stylesheets at the top. Web browser software employs progressive rendering, meaning that they’re trying to show the page as it loads from the server. If you put your CSS too far down in the HTML of your page, web browsers will delay rendering your page until they’ve seen the CSS. Since the “progress indicator” of a website is the appearance of the page itself as it loads, visitors will think your site is slower than it actually is! Put your stylesheet links in your document HEAD section. (And use the LINK tag, not the @import feature.)
Put scripts at the bottom. This one surprised me. With scripts, progressive rendering is blocked for all content below the script. This means that moving your script links to the bottom of the page will make it appear to load faster. And if you think about it, your scripts should mainly be there to enhance your page, and won’t typically even do anything until your whole page is loaded anyway! So move them to the bottom.
All in all, I enjoyed this book. Is it worth $30? Maybe not, because it’s a very quick read, and it’s quite technical. But web design can still be a confusing and still-young profession, and I really appreciate knowing the best way to do things. The above points are good examples – I’ve always put both scripts and stylesheets at the top of my pages, but not any more. A half-second difference in the time a page takes to load might seem small, but I’d prefer to make the fastest websites possible, and all it takes is a little bit more knowledge.
