网站加速指南-GoogleAnalytics-BrowserInsight-YahooYSlow【完结】

工作太忙了 一口气写不完 。。。。。。。。。
在这里写完了 在移动过去

-------------------------

多数站长遇到自己网站自己打开缓慢或者站长群里由人反馈说自己网站打开缓慢,时往往会做3件事情
1:谷歌搜索 网站速度测试工具,然后点击某一个连接看看,网站是不是很慢,或者是不是在全国很快.
2:谷歌搜索 网站慢的原因,然后脑补各种影响网站慢的原因,在自己网站上找一边,看看有没有原因
3:找累了观望一周,再感觉一下,网站到底慢不慢,是换网站安装程序,还是换web服务提供商,还是换cdn.
这网站性能优化与网站加速,就好比看病,得先找到问题出在那,准确定位到问题,对症下药.
不能靠猜测,也不能道听途说,要用工具一步一步的去监测.
一般都是通过3款工具接合使用:GoogleAnalytics-BrowserInsight-YahooYSlow
GoogleAnalytics:分析用户在那些域名下或者网页下流失,并 定位是因为打开速度慢而流失,还是因为内容不感兴趣而流失
BrowserInsight:分析用户访问域名和页面pv与加载时间关系,根据 相关指标 定位用户群访问页面慢的原因和页面在那个阶段发生了缓慢
YahooYSlow:对拿到的 缓慢域名和页面进行分析,对拿到的 快的域名和页面进行分析, 对比差别,找到可能影响缓慢的指标
定位网站缓慢的原因:不能靠感觉,不能靠猜,不能靠蒙,也不要轻易换服务商和换应用程序,
流量大了的站点上马cdn也要有完整的实施策略  ,毕竟cdn这么奢侈的工具不是每个站长都玩得起的

-------------------------

我们先看看 GoogleAnalytics 网站速度 做了那些功能
虽然这些功能伴随着谷歌统计推出中国市场和谷歌工具条市场份额的消亡变得没有意义的，
但谷歌强大的技术支撑还是做了很多对网站性能优化非常有用的功能点，BrowserInsight 师从谷歌，虽然在基于爬虫技术的网站建议上还在邯郸学步，暂却将用户计时功能发挥的淋漓尽致，成为GoogleAnalytics 网站速度模块最佳的替代产品
画不多说 上图
首先 基于 爬虫技术的网站测速 看
浏览器维度


国家维度




页面url


影响时间分布


地理分布


网站优化建议


基于谷歌工具条的网站速度测量，因为没有用户在用了，所以 没有数据

-------------------------

收集用户访问页面时候真实的 页面加载速度，以前谷歌是通过 谷歌的浏览器插件做的，现在浏览器插件市场没有了，所以不启用了
BrowserInsight 之所以能通过js在浏览器端收集页面加载速度 相关指标，最重要的原因是浏览器html5接口新增了一个接口window.performance
其中 window.performance.timing   收集的是 页面加载时间相关的指标 例如dns 啊什么的
window.performance.getEntries() 收集的是 页面加载过程中加载了那些资源
当然window.performance 还有其他方法和属性用于用户自定义时间的收集，这些对精准测量页面交互非常有帮助
而且 window.performance.now 提供了更高精度的时间，
这就是为什么以前用浏览器工具条才能做的事情，现在用一行js代码就可以收集了，并不是js代码有多神器，而是浏览器越来越强大了
下面我们来一个一个解读 window.performance.timing 中各个属性是什么意思，代表了网页加载生命周期中的那个阶段，并和 oneapm BI 的指标 对上号

There are many measured events given in milliseconds that can be accessed through thePerformanceTiming interface. The list of events in order of occurrence are:

• navigationStart
• unloadEventStart
• unloadEventEnd
• redirectStart
• redirectEnd
• fetchStart
• domainLookupStart
• domainLookupEnd
• connectStart
• connectEnd
• secureConnectionStart
• requestStart
• responseStart
• responseEnd
• domLoading
• domInteractive
• domContentLoadedEventStart
• domContentLoadedEventEnd
• domComplete
• loadEventStart
• loadEventEnd

官方解读
https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API


[font=Consolas, 'Lucida Console', monospace]

-------------------------

这里的指标虽然由很多,但是重要的也就那么几个,其他的一般人都用不到
第一个指标 dns  例如你用了cdn网站加速而且是全站加速,那么你的页面载入也是cdn加速的,而cdn加速原理是dns动态解析,从而寻找距离用户最新的cdn节点,
                                 那么,dns的耗时就表明了cdn 在智能解析这个环节是否稳定,看各个区域和运营商的dns解析耗时也可以看一个cdn提供商在某个区域是否稳定
                     dns=window.performance.timing.domainLookupEnd-window.performance.timing.domainLookupStart
                    如果dns 为0 则说明dns已经被客户端浏览器缓存起来了
第二个指标 tcp   这个是和你服务器连接耗时的性能指标,是最基本的网络可用性指标,如果tcp 耗时时间很长,那么后面的资源加载耗时更长
                  tcp=  window.performance.timing.connectEnd-window.performance.timing.connectStart
           如果tcp为0 则说明浏览器对tcp进行了复用
第三个指标 网页加载完成,也就是网页结构接在完成,这是一个非常重要的指标,因为很多js脚本的执行,例如给这个按奶绑定一个点击事件,一般都是在这个时候绑定了
                    如果网页加载的很慢,导致页面加载完成的也很慢,则会出现点击页面上的按钮美柚反应,出去喝杯茶,点击又有反应了
                    window.performance.timing.domContentLoadedEventStart-window.performance.timing.navigationStart
第3个指标   资源加载完成,这是页面上大多数资源加载完成的事件,用cdn加速,多数也是维拉对资源加载完成这个事件进行加速,减小资源加载的耗时,因为图片什么的加载慢了,影响很不好
BrowserInsight 会收集全部访客的window.performance.timing 信息,接合这几个指标可以及时发现网页加载存在的问题,从而采取相关措施
[font='dejavu sans mono', monospace]

-------------------------

基于真实用户的访问的性能数据的统计与分析是这类监控的亮点
因为 包含了大量的域名和url 信息 这些都是业务信息
同时页面加载时间 由快慢,当采集了大量的用户数据 响应时间分布是非常重要的,这可以看我们用户主要集中在那个时间段

-------------------------

目前,很少由监控软件嫩采集成千上万次用户的访问信息
然后进行统计分析
对于1个每天访问量在10万pv左右的站点来讲,传统的基于谷歌爬虫的性能分析手段1分钟到底是频率太低还是太高?
很有可能这1分钟就是这个网站今天流量的最高峰,但是,却错过了,
因为基于爬虫的监控手段,会对网站造成额外的压力,而且一般很少见能够选择1万url 进行拨测的,
这点谷歌统计和oneapm 都做的非常好的,采集每次访问信息,在子集的服务器上做分析,对网站服务器和客户端的用户毫无影响
,可惜 谷歌在墙外..............................................................

-------------------------

现在我们已经可以定位  一些页面加载慢 发生的url
慢的原因由4中可能
1 页面结构不合理，导致页面加载慢
2 某些区域线路不好，导致页面加载慢
3 用户浏览器性能低下，导致页面加载慢
4 用户自身网络查导致，导致页面加载慢
对于这4点 都需要进行检查和判断

-------------------------

页面 结构不合理  一般用页面静态分析工具做检查
Yslow 这个工具相信无论是搞前端的攻城师或者是搞网站的站长都了解，Yslow 可比谷歌的PageSpeed 有名多了；那个百分制下的评分数据总让国人着迷，看来应试教育造的孽太深了。Jeff 认为的话，Yslow 比较专业，但是因为是英文的，所以在个人分析结果上对某些人比较吃力，建议先使用PageSpeed Insights熟悉熟悉。

YSlow （解析为 why slow）是雅虎基于网站优化规则推出的工具，帮助你分析并优化网站性能。雅虎网站优化规则在十几个方面给你的网站提出优化建议，包括尽可能的减少 HTTP 的请求数 、使用 Gzip 压缩、将 CSS 样式放在页面的上方、将脚本移动到底部、减少 DNS 查询等十几条规则，YSlow 会根据这些规则分析你的网站，并给出评级。

园友文章 http://www.cnblogs.com/suchen1314/archive/2012/03/15/2398577.html
例如阿里云 首页

-------------------------

区域性有问题 一 那个区域 有问题 是国家级别 省份级别 还是城市 级别 一般用 oneapm

-------------------------

不同网络类型下页面的表现

-------------------------

还有
不同的业务（url），看看页面加载时间的分布，看看页面是否由问题

-------------------------

剩下的就吃一边修改影响页面性能的各个项目一边持续观测，看性能趋势和加载时间分布，不断优化整站加载时间
【完结】

期待大作，不过建议教程统一发到 —— 云学院 板块

期待