My Quest For High Performance Web Sites

Lately I have been con­cerned with and research­ing how to improve web site per­for­mance. This inter­est has led me to the guru on the sub­ject, Steve Soud­ers, and his book, High Per­for­mance Web Sites. The book has 14 rules to improve site per­for­mance that Steve devel­oped in his tenure as the Chief Per­for­mance Yahoo at Yahoo!. I would like to go through some of the rules and how they are applied to the Mar­ble­head site and share our results. While Marblehead’s site is small and prob­a­bly not a site that needs a lot of per­for­mance tweaks, it is a site that we can exper­i­ment with to see the ben­e­fit of new techniques.

Reducing HTTP Requests

The first rule, reduce HTTP requests, had room for mas­sive improve­ment on our page. Souder’s research shows that 80% of the time a page is load­ing is spent send­ing and receiv­ing HTTP requests for each com­po­nent of the page. We can see the impor­tance of reduc­ing the amount of requests a page makes.

I hold to the phi­los­o­phy that images, unless part of or rel­e­vant to the con­tent, should not be in HTML, and design ele­ments should be placed as CSS back­ground images. Unfor­tu­nately, having too many CSS back­ground images can increase the amount of HTTP requests a page makes. As you can see from the pic­ture, our page was making around 34 HTTP requests just to down­load images, JavaScript, and style sheets, result­ing in an F grade in YSlow. The biggest prob­lem was that our page was request­ing a lot of CSS images. There are a few options to reduce the amount of CSS image requests: putting all the images in the HTML, build­ing image maps for nav­i­ga­tion, or using CSS sprites. My happy medium was to use CSS sprites. Using images inline did not fit with my devel­op­ment phi­los­o­phy and really nei­ther did using image maps.

I use CSS sprites fre­quently to create hover states for nav­i­ga­tion items and but­tons, but have never used them as I have here. The tech­nique is straight­for­ward. Create one large image of all the images and then simply posi­tion the back­ground to the desired area for the spe­cific ele­ment. I needed to com­pro­mise between file size and HTTP requests, so I cre­ated 5 images to be used as CSS back­grounds: one large image for the page’s back­ground, one image for the head­lines to use for image replaced text, one image for the pri­mary nav­i­ga­tion items, and one image for the sec­ondary nav­i­ga­tion items. Doing so got me from an F grade in YSlow and making 41 HTTP requests to an A grade and making 26 HTTP requests.

Gzip & Reducing File Size

The next aspect of the page that needed improve­ment was file size. Making your files as small as pos­si­ble can improve site per­for­mance expo­nen­tially, espe­cially for users with lower band­width. One of the eas­i­est ways to reduce file size is to Gzip your site com­po­nents. Com­press­ing files can be han­dled auto­mat­i­cally through Apache with the mod_gzip or mod_deflate mod­ules. It just takes a bit of con­fig­u­ra­tion to make sure the right files are com­pressed. Typ­i­cally only HTML files are com­pressed but for max­i­mum ben­e­fit you should also com­press scripts and style sheets. The results on our site was quite sur­pris­ing for me.

Com­press­ing images, PDF files, and other binary files through Apache’s mod­ules is not a good idea. Typ­i­cally this is a waste because these files are already com­pressed and using gzip in cer­tain cases can result in larger file sizes. How­ever, there are other options for reduc­ing file size in images besides gzip. First, you should use Fire­works as your image cre­ation tool; it has better com­pres­sion with image for­mats than Pho­to­shop or any other image edit­ing tool that I know of. Second, unless an image is espe­cially small, use PNG instead of GIF for images. The PNG file format has many advan­tages over the GIF format: it typ­i­cally has greater com­pres­sion result­ing in smaller file size, it has more options for trans­parency, and it sup­ports a wider range of colors and color pro­files. Some of the advan­tages, like alpha trans­parency and color pro­files, are lim­ited by browser imple­men­ta­tion, but over­all it is a better format to use. You can also get your PNG file sizes even smaller if you run them through a second com­pres­sor like PNGOUT or OptiPNG. The results can be quite extra­or­di­nary; in our case we saved around 20K.

Adding Expires Headers

Another area with room for improve­ment was opti­miz­ing the cache set­tings for our assets. Cacheing assets is another way of reduc­ing HTTP requests on sub­se­quent page views for return­ing vis­i­tors. Set­ting a far future Expires header for assets tells web browsers that they can use the cur­rent ver­sion of the asset until that date occurs. I chose to take Steve’s rec­om­men­da­tion and set an Expires header for 10 years for image, style sheet, and script assets. Doing so has reduced the requests on our page in sub­se­quent visits to 3, the HTML file and two third party assets that we don’t have con­trol over. There is one caveat to be aware of with set­ting Expires head­ers so far into the future, doing so causes the browser to not down­load new ver­sions of the asset. It is rec­om­mended then in your build process you build some way to ver­sion your file names so that browsers will down­load new ver­sions of the file.

The appli­ca­tion of these rules has increased our site’s per­for­mance. There are some other tech­niques that we have applied, and I’ll talk about those in a future post. I wanted to share our find­ings and show how effec­tive these tech­niques can be.

• Cuzil­lion - a con­fig­u­ra­tion test­ing tool built by Steve Souder
• YSlow - a per­for­mance test­ing extension
• Exam­ples of rules from High Per­for­mance Web Sites book
• Using Fire­works: Enter­prise Fire-​Flow by Nathan Smith