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