Recently I just finished this book, which is named “High Performance Web Sites”. I found the book when I was looking for some advices on front-end performance.

The book gave us 14 very useful practices about how you can improve the performance of your website. Although the book was written almost 10 years ago (2007), but the core ideas are still useful now, and some of them even became the industrial standard (such as minify your JavaScript code).
Here are the 14 practices given in the book, with my comments:

  1. Make fewer HTTP requests
    Of course, if there is fewer resources and smaller size for your website, the speed will improve a lot.
  2. Use a content delivery network
    Static files, such as images, are usually suggested not served by your own server. As the bandwidth is usually limited for smaller size website, if those big images files are served by your server, then they will affect the speed of other requests.
  3. Add a far future Expires header to your components.
    The good thing about browser is it has cache! Rendering web page from cache will make your website faster. But also be careful with the cache, otherwise if you update your content but your clients are still using content from the cache, that would be a problem.
  4. Gzip your scripts and stylesheets.
    Smaller size gives better performance :D
  5. Put your stylesheets in the document HEAD using the LINK tag
    Even if it takes more time downloading the css file, the browser will render progressively so it looks like it’s faster (no white screen problem).
  6. Move scripts to the bottom of the page.
    Content below the script tag will not show until the script is downloaded, and that affect the rendering.
  7. Avoid CSS expressions.
    Less common nowadays because of the pre-processor.
  8. Put your JavaScript and CSS in external files
    One reason is you should make use of the browser cache.
    Two ideas that worth mentioning are as below:
    • Post-Onload Download - defer the download of static files when the page is fully rendered (by creating tags)
    • Dynamic Inlining - Inline some components and trigger downloading of files, also set a cookie indicating if the page is visited. Next time check if the cookie present, if yes then probably the resources are cached already and hence could improve the speed.
  9. Reduce DNS lookups by using Keep-Alive and fewer domains
  10. Minify your JavaScript source code
    This becomes a standard process now for front-end project.
  11. Find ways to avoid redirects
  12. Make sure scripts are included only once
  13. Re-config or remove ETags
    It said ETags will cause overheads, and it does not work well in a cluster of machine.
  14. Make sure your Ajax requests follow the performance guidelines, especially having a far future Expires header.