PixelRes

High Performance Web Pages, Nate Koechley, Yahoo!

Yahoo! is big. But what you may not know is that it cares. One of the biggest things Nate gave his audience was the smallest. A URL. The Yahoo! User Interface blog looks like good reading. Yahoo! definitely giving lots back and as Nate said, being committed to openness. Thanks Nate.

To get the most of this, you would be a front end developer who wants to tweak every last bit of speed out of your pages. This is great. Again, especially useful if you are into high traffic sites. He reckons that if you do these, you’ll get your pages 25% to 50% faster, no matter what site you have.

Here are his 12 rules for faster pages. Thanks again Nate.

1. Make fewer HTTP requests

   • use css sprites. See alistaprt.com/articles/sprites
   • combine scripts
   • combine stylesheets
   • try putting the actual image data in the src of the img link

2. Use a content distribution network

   • e.g. akami, limelight
   • for static content

3. Expires header for images, stylesheets and scripts

4. Gzip components (html, scripts, stylesheets, xml, json)

   • 90% of browsers support compression
   • mod gzip on apache
   • deflate (but gzip is better)
   • not images or pdf
   • savings of 50% or more

5. CSS at the top

   • stylesheets block IE rendering
   • avoids flash of unstyled content
   • use link not @import
   • because it slows css rendering
   • fastest percieved time

6. Move scripts to the bottom

   • scripts block everything on the page
   • they block parallell downloads across all hostnames

7. Avoid css expressions

   • can be used to set css properties dynamically in IE
   • problematic because expressions execute many times

8. Make js and css external

   • inline: bigger html but no http request
   • external: cacheable but extra http request
   • variables:
     • page view sper user (per session)
       if it’s unique to the page, put it in you don’t need it to cache
     • empty vs. full cache stats
     • component re-use
   • - external is typically better
   • exception: if your page is set as homepage, then cache doesn’t work
   • it downloads everytime - put it all in the document
   • post onload download
     • - once page is loaded, plan ahead for next pages
     • - particularly on a known flow like a shopping cart
   • Dynamic inlining

9. Reduce dns lookups

10. Minify all javascript using jsmin

11. Avoid redirects

12. Turn off ETags

Posted on Monday 11 June 2007 at 1:13 am | By Chomoi Picho-Owiny | Posted in CSS, Code, Design, Miscellany | Subscribe to responses via RSS | Post comment | Link to this page