When it comes to building a speedy website, I tend focus on the server side. However, the book High Performance Web Sites - Essential Knowledge for Frontend Engineers by Steve Souders has shown me the error of my ways. It covers 14 rules for speeding up a web site that are both easy to implement (especially compared to server-side optimizations) and highly effective.
Tools like Firebug (the Net tab) and YSlow clearly show what happens from the time you request a web page until it gets rendered. Typically, only a tiny slice of the total time is spent generating the HTML. The rest is spent downloading and interpreting stylesheets, scripts, images, SWFs, etc… Most web designers know to minimize a page’s payload, but it is still going to be there. This book explains how to serve it up most effectively.
My three favorite rules:
1) Make fewer HTTP requests. A few cool tricks are demonstrated in this chapter. For instance, multiple images (e.g. the various button states for a navbar) are combined into a single image that is dissected appropriately for display at runtime. CSS sprites - very clever!
3) Add an Expires Header. This chapter explains how to utilize browser caching to far greater effect. This rule was probably the biggest eye-opener for me. Implementing this optimization will speed up my future sites a lot… once I figure out how to bend htaccess files to my will at Media Temple.
6) Put Scripts at the Bottom It makes perfect sense that putting stylesheets at the top of a page (Rule 5) is necessary to enable progressive rendering, but I didn’t realize that scripts block ALL downloads until they have finished running. This means that every page with JQuery, SWFObject, Thickbox, or some other AJAXy thing in its header (that’s a lot of pages these days) isn’t nearly as fast as it could be. Simply moving these scripts right before the
