web前端优化之常规优化(1)
2016-03-04 10:12 风弈飞 阅读(209) 评论(0) 编辑 收藏 举报页面打开速度(Fully Loaded)
1 网站首页(或列表页)之 First View :打开速度应在 3秒+0.5秒 内;
2 对 Repeat View 时的各项指标暂不作要求;
首屏打开时间(Start Render)
1 网站首页(或列表页) 之 First View :首屏渲染速度应在 1秒+0.5秒 内;
文档解析完毕时间(Document Complete):
对此指标暂不作要求。
常规优化建议:
1 javascript 外联文件引用放在 html 文档底部:具体如何摆放内联JS/CSS和外联JS/CSS,请参考 优化第二阶段;
2 css 外联文件引用在 html 文档头部:位于 header 内;
3 http 静态资源尽量用多个子域名:充分利用现代浏览器的多线程并发下载能力。浏览器的多线程下载能力,参考 附录C;
具体建议:
JS、CSS、CSS背景图片、CSSSprite图片分散在 s0~s2.haoyangshiimg.com 下;
业务类图片分散在 p0~p3.haoyangshi.com 下;
4 服务器端提供 html 文档和 http 静态资源时,尽量开启 gzip 压缩;
json/xml 等格式的文本响应,也建议开启 gzip ;
jepg/png 等图片,可以选择不开启 gzip,因为可能服务器端图片无损压缩算法已经很强悍了,不需要依赖于 gzip;
5 在 js、css、image 等资源响应的 http headers 里,设置 expires、last-modified;
nginx如下设置:
location ~ .*\.(js|css)${ expires 30d; } location ~ .*\.(gif|jpg|jpeg|png|bmp)${ expires 1M; }
6 尽量减少 HTTP Requests 的数量;
通过 combo handler 合并 js 和 css 的下载,参考 优化第三阶段;
本阶段请尽量减少外联 js/css 文件数,尽量减少 ajax 调用;
7 js/css 的 minify:可统一通过 combo handler 做到压缩加合并;
8 减少不必要的 301/302 跳转:别让页面打开时间浪费在302多次跳转上(每次可能几十毫秒);
9 请大量使用 CSS Sprites:这样做可以大大地减少CSS背景图片的HTTP请求次数;
10 首屏不需要展示的较大尺寸图片,请使用 LazyLoad ;
11 避免404错误:请求一个外联 js 失败时获得的404错误,不但会堵塞并行的下载,而且浏览器会尝试分析404响应的内容,来辨识它是否是有用的Javascript代码;
12 减少 cookies 的大小:尽量减少 cookies 的体积对减少用户获得响应的时间十分重要;
去除不必要的 cookie ;
尽量减少 cookie 的大小;
留心将 cookie 设置在适当的域名下,避免影响到其他网站;
设置适当的过期时间。一个较早的过期时间或者不设置过期时间会更快地删除 cookie,从而减少响应时间。
13 使用无 cookies 的域:
当浏览其请求一个静态图片并一同发送 cookie 时,服务器并不需要这些 cookies 。这样只是毫无益处地创建了多余的网络流量。应当保证静态资源在请求时没有携带 cookies,所以需要把你的静态资源放在另一个子域名下。
如果你的域名是 www.example.org,你可以将你的静态资源放在 static.example.org 中。如果你把 cookie 设置在顶级域名 example.org 上而不是 www.example.org,那么所有发送至 static.example.org 的请求会包括那些 cookies。在 这种情况下,你可以用一个全新的没有 cookie 的域名来放置你的静态资源。
14 避免使用 javascript 来定位布局