Read a book: High Performance Web Sites
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.
Here are the 14 practices given in the book, with my comments:
- Make fewer HTTP requests
Of course, if there is fewer resources and smaller size for your website, the speed will improve a lot.
- 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.
- 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.
- Gzip your scripts and stylesheets.
Smaller size gives better performance :D
- 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).
- 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.
- Avoid CSS expressions.
Less common nowadays because of the pre-processor.
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.
- Reduce DNS lookups by using Keep-Alive and fewer domains
This becomes a standard process now for front-end project.
- Find ways to avoid redirects
- Make sure scripts are included only once
- Re-config or remove ETags
It said ETags will cause overheads, and it does not work well in a cluster of machine.
- Make sure your Ajax requests follow the performance guidelines, especially having a far future Expires header.