网站前端性能分析

一 速度与功能，哪个更重要
二 网站性能与收入
三 网站速度与用户流失
四 Web性能优化法则
五 国内性能分析工具—基调系统介绍
六 国际站的优化实践
七 改进建议
八 评分规则及优化


一 速度与功能，哪个更重要

1.网站最基本的东西是什么？

内容再丰富的网站，如果慢到无法访问也是毫无意义的；

• SEO 做的再好的网站，如果搜索蜘蛛抓不到也是白搭；

• UE 设计的再人性化的网站，如果用户连看都看不到也是空谈

2.网站速度与收入

• n500ms20%( google )

• n400ms5%~9%( yahoo! )

• n100ms1%( amazon ）

• 500 ms slower = 20% drop intraffic (Google)

• 100 ms slower = 1% drop in sales(Amazon)

二 网站性能与收入

1. Amazon:every 100 ms increase in load time of Amazon.com decreased sales by 1% .

2.Google ： achange in a 10-result page loading in 0.4 seconds to a 30-result page loadingin 0.9 seconds decreased traffic and ad revenues by 20%

三 网站速度与用户流失

四 Web性能优化法则

性能黄金法则

　　只有10%–20%的最终用户时间花在了下载HTML文档上，其余的80%~90%的时间花在了下载页面中的所有组件上
（80%-90%用户的等待时间是来自于前端的页面加载）

五 国内性能分析工具—基调系统介绍

1.什么时基调：

1） 基调网络成立于 2007 年 , 是国内最大的互联网用户体验监测服务商。

2）基调网络拥有最大的遍及全国各地的监测网络 , 覆盖了全国 100 多个城市的数据中心及数万个人终端用户

2.基调能做什么？

1）通过基调监测网络可以监测出目标网站在不同时间、不同区域、不同运营商的网民访问的速度、可用性等用户体验数据

2）能实时生成个性化的报表，以供决策者和运维管理者及时掌握网站的性能、可用性等各项表现，进而为优化调整提供准确的决策依据。

登陆： rpc.networkbench.com

3. 基调如何使用：由故障开始

登陆后界面

知名互联网网站当前现状

竞争对手—B2B，B2C网站

B2B对手：慧聪网，环球资源网，中国制造

B2C对手：淘宝，京东，当当，新蛋

六 国际站的优化实践

七 改进建议

1 . 页面性能评估工具

Yahoo!-- Yslow

– 雅虎的页面优化 34 法则， Yslow 选取了能量化的 23 条

2. Google--Page Speed

– 功能同 Yslow

1. 针对中文站首页

– 首页大小 建议 500KB 以内

– 页面元素 建议 70 个以内

– 首页域名数量 建议控制在 5 个以内

– 图片， CSS,JS 的过期时间问题。

– CSS 、 JS 的数量问题，尽可能的整合，减少请求次数。

2.Offer detail

– CSS,JS 的数量众多，建议 css ， js 的数量控制在 5 个以内

页面元素众多。仅仅一个 detail 页面，其元素个数都赶上首页了，建议严格控制页面元素

参考 优化对比


八 评分规则及优化

－Make Fewer HTTP Requests

－ Use a Content Delivery Network

－ Add an Expires Header

－ Gzip Components

－ Put CSS at the Top

－ Move Scripts to the Bottom

－ Avoid CSS Expressions

－ Make JavaScript and CSS External

－ Reduce DNS Lookups

－Minify JavaScript

－ Avoid Redirects

－ Remove Duplicate Scripts

－ Configure ETags

－ Make Ajax Cacheable
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－


－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
A.尽量减少HTTP请求次数
1.合并JS
2.合并CSS文件
3.CSS Sprites
4.Image 图片
5.将图片编码成Base64数据嵌入网页

B.减少阻塞次数、减少阻塞时间
1.将CSS放在顶部
2.将JS放在底部
3.删除重复的脚本
4.延迟加载渲染页面不需要的脚本
5.按需异步下载脚本