度量页面速度的几项指标

标签: 度量 页面 速度 | 发表时间:2011-02-23 15:37 | 作者:nunumick gelanz
出处:http://nunumick.me/blog/

1.TTFB(Time to First Byte)

TTFB-首字节时间,顾名思义,是指从客户端开始和服务端交互到服务端开始向客户端浏览器传输数据的时间(包括DNS、socket连接和请求响应时间),是能够反映服务端响应速度的重要指标。
ttfb

网页重定向越多,TTFB越高,所以要减少重定向
ttfb_redirect

TTFB优化:

  1. 减少DNS查询
  2. 使用CDN
  3. 提早Flush
  4. 添加周期头

2.TTSR(Time to Start Render)

TTSR-开始渲染时间,指某些非空元素开始在浏览器显示时的时间,这也是一项重要指标,即TTSR越短,用户越早浏览器中的内容,心理上的等待时间会越短。过多的CPU消耗会拖慢TTSR,所以网站中有大量图片和脚本往往会造成不良用户体验。
ttsr

TTSR优化:

  1. 优化TTFB
  2. 降低客户端CPU消耗,即页面加载初期不要有大脚本运行,把JS脚本放到页面下方
  3. 使用效率较高的CSS选择器,避免使用CSS表达式
  4. 避免使用CSS滤镜

前端TTSR测试脚本:

    <head>
        <script>
            (function(){
                var timeStart = + new Date,
                    limit = 1,
                    timer = setInterval(function(){
                    if((document.body&&document.body.scrollHeight > 0) || (limit++ == 500)){
                        clearInterval(timer);
                        console.info('TTSR:',+ new Date - timeStart,';duration:',limit);
                    }
                },10);
            })()
        </script>
    </head>

在页面端无法简单测试出具体的TTSR,不过可以通过模拟脚本得到大概的时间,Firefox提供了一个MozAfterPaint事件,经测试,用于TTSR并不准确,如果有MozBeforePaint事件该有多好。

3.TTDC(Time to Document Complete)


TTDC-文档完成时间,指页面结束加载,可供用户进行操作的时间,等价于浏览器的onload事件触发点。TTDC是比较重要的性能优化对象,TTDC越低,页面加载速度越快,用户等待时间越短。
ttdc

TTDC优化:

  1. 优化TTFB
  2. 优化TTSR
  3. 参考YSLOW优化最佳实践
  4. 优化首屏时间,将不必要的页面加载放到onload事件之后

TTDC前端测试:
常见性能测试平台大多使用IE浏览器的DocumentComplete事件来度量TTDC,DocumentComplete事件触发时,页面的状态应是READYSTATE_COMPLETE,所以在页面中我们可以用JS脚本判断:

    var win = window,doc = document;
    if(win.attachEvent || doc.hasOwnProperty('onreadystatechange')){
        doc.onreadystatechange = function(){
            if(doc.readyState == 'complete'){
                /**
                 * test
                    do something...
                 */
            }
        }
    }else{
        win.addEventListener('load',function(){
            /**
             * test
                do something...
             */
        },false);
    }

4.TTFL(Time to Fully Loaded)

TTFL-完全加载时间,指页面在onload之前和onload事件之后额外加载的内容所花费的时间的总和,即页面完完全全加载完毕消耗的总时间。
ttfl

TTFL优化:

  1. 优化TTFB
  2. 优化TTSR
  3. 优化TTDC
  4. 延迟加载
  5. 异步加载
  6. 按需加载

相关 [度量 页面 速度] 推荐:

度量页面速度的几项指标

- gelanz - 渔隐的博客
TTFB-首字节时间,顾名思义,是指从客户端开始和服务端交互到服务端开始向客户端浏览器传输数据的时间(包括DNS、socket连接和请求响应时间),是能够反映服务端响应速度的重要指标. 网页重定向越多,TTFB越高,所以要减少重定向. TTSR-开始渲染时间,指某些非空元素开始在浏览器显示时的时间,这也是一项重要指标,即TTSR越短,用户越早浏览器中的内容,心理上的等待时间会越短.

页面加载速度优化的12个建议

- - Web前端 - ITeye博客
Radware发布的2014年春季电商页面速度与Web性能”调查报告强调了电商页面加载速度的重要性,同时指出很多网站都没有利用最佳的页面优化技术,页面加速速度都存在很大缺陷. 那么该如何补救,提高网站页面的加载速度呢. 报告给出了12个页面加载速度优化的补救措施,用以改善加载时间,改善站长浏览者的用户体验.

Google推出Chrome 56,强化了安全且页面重载速度快28%

- - 36氪
就当是过春节吧,值此辞旧迎新之际,Google 推出了稳定版的了新版浏览器Chrome 56. 新版Chrome支持Windows、Mac、Linux以及Android等多个版本,新增功能特性包括会对收集密码或信用卡号但不采用HTTPS协议的网站向用户发出警告;改进了页码重载的性能和效率;以及为开发者准备的大量新功能.

减少50%页面载入速度 新证据显示IE11支持谷歌的SPDY协议

- - cnBeta全文版
版本号为9364的Windows Blue曝光15天之后关于新系统更多信息被挖掘出来,其中最大的焦点就是即将会装置在Windows 8系统中的IE11浏览器. 通过对源代码进行深入挖掘之后,除了之前已经知晓的标签同步和支持WebGL之外 还发现IE 11支持SPDY协议,一项主要是在现有网络架构下减少载入时间的网络协议.

Web页面入门

- - 可咔酷 | 网络杂货铺
开发页面在很多人眼里很简单,大部分的人都会说不就是把效果图变成网页嘛,哪里需要那么多的时间,一点技术含量都没有. 确实html页面没有js那么多复杂的交互,也不需要和后台数据打交道,但并不能代表就没有技术含量,也不是人人都能做好的. 页面结构好坏直接会影响到css代码的质量,也会影响js和后台的开发,还会影响到以后功能的扩展和代码的优化.

加速scp传输速度

- - IT技术博客大学习
   当需要在机器之间传输400GB文件的时候,你就会非常在意传输的速度了. 默认情况下(约125MB带宽,网络延迟17ms,Intel E5-2430,本文后续讨论默认是指该环境),scp的速度约为40MB,传输400GB则需要170分钟,约3小时,如果可以加速,则可以大大节约工程师的时间,让攻城师们有更多时间去 看个电影,陪陪 家人.

关于页面字体

- Hu DongHai - DBA Notes
关于 Web 页面字体这方面,我是门外汉,弄不出来长篇大论 -- 这样也没必要,从观察统计上简单分析一下看看就够了. 几个页面字体适配度比较好的,HTML body 字体的定义:. 豆瓣:font: 12px/162% Arial,Helvetica,sans-serif;. 新浪微博:font-family: Arial,Helvetica,sans-serif;.

页面构建小工具

- Han - 所有文章 - UCD大社区
我们将在本文中介绍一些关于页面构建常用的一些小工具,大部分是基于firefox的插件,通过这些小工具可以让我们在页面构建中事半功倍.. 页面bug调试工具–Firebug. 实时测量工具–Measureit. 实时颜色选取工具–Colorzilla. SEO优化工具–SenSEO. CSS使用效率优化工具–CSS usage.

新的Google 404页面

- bubble - Solidot
谷饭 写道 "Google悄悄上线了新版本的404页面,如:http://www.google.com/solidot. 页面首先说,That’s an error,之后简要提示路径不存在,然后调侃了一句:That’s all we know. 然而在IE6浏览器里,那个可爱的机器人就没有了. 我们发现了一个错误,看标题栏,三个叹号,被打成两个叹号的一个1...".