make your web faster
TRANSCRIPT
加速网页渲染漫谈
网页速度是如何影响转化率的http://www.qianduan.net/web-page-speed-affect-conversions.html
Make the Web Faster
客户端缓存
Expires 和 Cache-Control: max-age
Cache-Control: max-age的值是相对于资源首次被访问的时间差,单位是秒
Expires指的是资源过期的绝对日期
如果同时存在,Cache-Control: max-age会覆盖掉Expires
Make the Web Faster-缓存的优化-客户端缓存
Response HeadersCache-Control:max-age=600Expires:Tue, 12 Mar 2013 15:27:06 GMT
客户端缓存
Last-Mofidied和Etag
Last-Mofidied和ETag都是用来标示资源的有效性
Last-Mofidied的值是个日期,ETag的值是按照规则生成的字符串
Make the Web Faster-缓存的优化-客户端缓存
Rquest HeadersIf-Modified-Since: Fri, 12 May 2006 18:53:33 GMTIf-None-Match: W/"50b1c1d4f775c61:df3"Response HeadersLast-Modified: Fri, 12 May 2006 18:53:33 GMTETag: "50b1c1d4f775c61:df3"
客户端缓存
both HTTP and HTTPShttp和https的资源都可以被缓存
给所有静态资源设置缓存头
避免不必要重复,Expires和Cache-Control只需二选一,Last-Mofidied和Etag同理
建议使用Expires& Last-Modified,因为他们更广泛被支持
Expires头的值至少一个月,最好是一年,不要超过一年,因为这个违反RFC标准
使用时间戳更新缓存资源
在URL中加入一个get请求参数,如?v=201314
Make the Web Faster-缓存的优化-客户端缓存
客户端缓存
为IE设置正确的vary头
IE不会缓存,设置了vary头并且其field含有Accept-Encoding和User-Agent之外其他field的资源。
Vary:Accept-Encoding,User-Agent
在Firefox中利用Cache control: public 来使HTTPS的缓存生效
一些版本的Firefox需要在设置了普通缓存头的基础上,设置Cache-Control:public才能缓存HTTPS的资源。
Make the Web Faster-缓存的优化-客户端缓存
减少往返延时
往返延时(RTT)指从发送端发送数据开始,到发送端收到来自接收端的确
认总共经历的时延。不包括数据下载的时间。
浏览器和服务器的第一次通信至少包含3次往返:DNS查询,TCP的连接,
第一个字节的请求和响应
往返延时不受带宽影响,在一些不需要下载太多数据的场景中,往返延
时是影响页面加载的主要因素,如搜索结果
Make the Web Faster-减少往返延时
减少往返延时
减少DNS查找
最小重定向
避免错误的请求
合并JavaScript和CSS
使用CSS sprites
优化样式和脚本的顺序
避免document.write
避免使用CSS的@import
异步加载脚本
多域名并行加载
Make the Web Faster-减少往返延时
减少DNS查找
域名尽量不要使用CNAME别名记录
DNS和并行加载的均衡,1<域名数<6
使用二级目录代替二级域名
developer.example.com => www.example.com/developer
页面开始就加载的JS资源建议和页面同域名
Make the Web Faster-减少往返延时-减少DNS查找
合并JavaScript和CSS
合并外链js或css资源可以减少请求往返延时
一个页面外链js或者css的最佳资源数是2-3个
正确的处理js和css的加载顺序
一般是发布过程最后才做资源文件合并
Make the Web Faster-减少往返延时-合并JavaScript和CSS
使用CSS sprites
页面同时引用的图片合并在一起
优先使用png或者gif雪碧图
需要缓存的图片才使用雪碧图
雪碧图中的空白越小越好
雪碧图色彩数最好和调色板匹配,不要超过256色
Make the Web Faster-减少往返延时-使用CSS sprites
避免document.write
Document.write会严重影响后续下载和渲染进程
直接在html标签输出,避免write
JS异步加载外链资源
Make the Web Faster-减少往返延时-避免document.write
避免使用CSS的@import
@import无法有效利用浏览器的并发数
@import的资源需要等页面加载解析完后才会加载
Make the Web Faster-减少往返延时-避免使用CSS的@import
异步加载脚本
异步加载指浏览器在下载执行 js 同时,还会继续进行后续页面的处理
Make the Web Faster-减少往返延时-异步加载脚本
<script>var node = document.createElement('script');node.type = 'text/javascript';node.async = true;node.src = 'example.js';// Now insert the node into the DOM, perhaps using insertBefore()</script>
多域名并行加载
给每个域名均衡的分配资源负荷因为部分浏览器不支持js并行加载,不要考虑为js分配并行域名
结合减少dns查找时间,最佳域名个数为2-5
避免外链js阻塞其他资源的加载
Make the Web Faster-减少往返延时-多域名并行加载
压缩js、css、html
Minify指减少无意义的空格、断行、缩进占用的字节
建议压缩大于4kb的js、css
Html主要指页面内嵌的js和css
Make the Web Faster-优化服务器返回数据-压缩js、css、html
延迟加载
延迟加载并不一定减少总下载数据,但可以提升初始加载的体验
Make the Web Faster-优化服务器返回数据-延迟加载
<script>function downloadJSAtOnload() {var element = document.createElement("script");element.src = "deferredfunctions.js";document.body.appendChild(element);}
if (window.addEventListener)window.addEventListener("load", downloadJSAtOnload, false);else if (window.attachEvent)window.attachEvent("onload", downloadJSAtOnload);else window.onload = downloadJSAtOnload;
</script>
使用高效的CSS选择器
除了顶级,避免使用通用选择器(*)
使用具体的样式
去除多余的限制查询
用样式名代替后代标签选择器,避免过渡嵌套
IE下,非链接元素不要使用hover伪类
Make the Web Faster-优化浏览器渲染-使用高效的CSS选择器
指定图片大小
尽量给图片指定实际展示的大小
通过设置img标签属性或者CSS属性,抑或设置图片
块级父元素均可,内联或者非直接父级无效
Make the Web Faster-优化浏览器渲染-指定图片大小
移动端优化
http://www.smashingmagazine.com/2013/04/03/
build-fast-loading-mobile-website/
http://mobile.51cto.com/web-410291.htm
Make the Web Faster-移动端优化
番外篇-工具
猪八戒改版前后加载速度
改版前
http://alibench.com/rp/6984ad80bb254525bbd25afbc5c27e54
改版后
http://alibench.com/rp/3510c66a16de803c656474ae72b65900
验证和测试
参考文献 Make the web faster
https://developers.google.com/speed/docs/best-practices/rtt?hl=fr
浏览器支持一览http://www.browserscope.org/?category=network&v=top
异步加载http://www.cnblogs.com/tiwlin/archive/2011/12/26/2302554.html
Best Practices for Speeding Up Your Web Sitehttp://developer.yahoo.com/performance/rules.html
Writing Efficient CSShttps://developer.mozilla.org/en-US/docs/Writing_Efficient_CSS
它山之石可以攻玉