Hqman

14 steps to first-load web sites

1. Rule 1, Make fewer HTTP request
   • 将多个请求js，css等的链接组装成一个 (Nginx concat)
   • 利用CSS对对较大图片做 sprites，减少请求图片的http请求数
2. Rule 2, Use a CDN
   • 不多说，这是常识了
3. Rule 3, Add an Expire Header
   • js,css,img等元素都可以添加http缓存
   • 根据情况选择是采用conditional get，还是Expire/Cache-Control
   • HTTP specification dictates that the max-age directive will override the Expires header
4. Rule 4, Gzip Compressed
   • 减少数据传输的大小，减少传输时间
   • 注意不要对image压缩，因为这样做只会浪费cpu时间
5. Rule 5, Put CSS at the Top
   • 利用浏览器渐近渲染(Progressive rendering)的特性，因为浏览器需要css全部下载后，才会开始渲染，所以把css放在顶部，让它优先被下载
6. Rule 6, Put Scripts at the Bottom
   • JavaScript的下载会block 浏览器的并行下载功能
   • JavaScript 同时会block浏览器的渐近式渲染(Progressive rendering) 所以要把javascript放在底部。
7. Rule 7, Avoid CSS Expression
8. Rule 8, Make JavaScript and CSS External
   • 便于js css文件的管理，包括前端与后端同学的分工及并行开发
   • 便于对javascript 做Minify及前面所说的concat组装
9. Rule 9, Reduce DNS Lookup
   • 某些时候DNS会占用很大时间，所以需要尽量利用DNS Cache
   • 减少页面上使用到的域名的个数
   • 利用HTTP的Keep-Alive特性，减少后续请求的DNS Lookup.
10. Rule 10, Minify JavaScript
    • 减少js文件的大小，同理可以作用在html文件中
    • 利用JSMin或 Dojo Compressor进行Minify
11. Rule 11, Avoid Redirects
    • 尽量避免重定向，用户体验杀手
12. Rule 12, Remove Duplicate Scripts
    • 不多说啥，这也应该是写代码人员的常识。
13. Rule 13, Configure or remove ETags
    • 许多的http server在E-Tag生成唯一的key时，默认会使用一些主机上的信息，需要做到统一。
    • 建议使用Last-Modified
14. Rule 14, Make Ajax Cacheable
• 对Ajax请求的数据做缓存
• 利用第3条的http expire机制，对Ajax请求做处理