从用户体验出发的性能指标分析-Page Load

如何在持续升级的项目中保持项目的高性能?如何更加准确的定位和解决性能问题?实际上,WPO的最主要目的是改善用户体验,而用户体验的好坏则可以根据几个核心性能指标来衡量。从用户体验出发的几个核心时间指标包括:Start RenderDOM Ready、Page Load、TTI。不同的性能指标对用户体验的影响是不同的,而指标本身受哪些因素的影响也是不同的。优化某个指标又该具体采用什么样的方式?接下来将一一介绍,本文集中介绍Page Load。

 

定义

    Page Load时间指的就是window.onload事件触发的时间。与DOM Ready时间相比,Page Load的时间往往要更靠后一些,因为Page Load不仅仅是HTML文档解析完毕还包括了所有资源加载所需要的时间,例如图片资源的加载、iframe的加载等。

用户体验

    大家可能觉得Page Load时间长一点无关紧要,实际上该指标从以下两方面影响着用户体验:

        (1). window.onload事件触发的时间(Page Load)也就是所有资源加载完成的时间,该时间越长意味着用户需要等待越久才能看见某些内容,例如图片,这些内容也许并不是最总要的,但这是一个完整页面的组成部分,这部分内容如果加载过慢,也会在一定程度上影响用户对页面完整性的体验。

        (2). window.onload事件在触发前,如果有资源正在加载,例如脚本、图片,则浏览器都会以某种方式告诉你正在加载资源。不同的浏览器有着不同的方式,例如IE6等非Tab浏览方式的浏览器会在状态栏给予进度提示,而例如Firefox等Tab类型的浏览器一方面会在状态栏给予提示,另一方面还会在Tab上显示加载中的状态。Page Load的时间越久,这些状态显示的时间也就越久,因此会影响用户对页面整体速度的体验。

影响因素

    (1) window.onload事件总是在DOM Ready之后才会触发,因此,DOM Ready指标的影响因素也都会影响Page Load。

    (2) 鉴于window.onload事件要等到所有资源加载完成后才会触发,因此资源加载的时间越长则Page Load的时间越长。如果没有任何外链资源,则Page Load时间与DOM Ready时间几乎是相等的,随着图片等资源的增加,Page Load与DOM Ready的差距也会越来越大。(外链脚本除外,因为外链脚本也同样会增加DOM Ready时间)

监控方式

    直接在window上注册onload事件即可。

优化方法

    (1) DOM Ready指标的优化方法

    由于影响DOM Ready指标的因素同样会影响Page Load,因此DOM Ready指标的优化方法同样也适用于Page Load,可以参考上一篇文章>>

    (2) 减少资源请求数和请求时间&考虑window.onload后Lazy Load

    除此之外,更应该注意页面中外链资源的使用,尤其是图片等资源。对于图片一方面要减少请求数(合并),另一方面还要减少请求时间(压缩、缓存)。当然对于图片的优化,很多人可能都已经做过了,如果经过了合并、压缩以后,请求还是很多,图片还是很大该怎么办呢?建议使用Lazy Load,例如在用户可见或者产生交互的时候才进行加载。

image

上图是实际的页面监控数据,12/23号对图片资源进行了优化,采用了Lazy Load进行处理,可以明显的看到Page Load(load_time)与DOM Ready之间的差距缩小了。

    (3) 脚本在window.onload后加载

    此外,关于脚本的动态加载还想说明一点,在IE中,window.onload触发后再进行动态脚本加载的好处是:浏览器没有任何进度指示。也就是说可以在用户毫无察觉的情况下载入脚本,从而在某种程度上改善速度体验。在Firefox下,window.onload后加载脚本时,Tab上不再显示进度,仅仅在状态栏会有通知。

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

1 Comment »

 
 

Leave a Reply

您必须 登录 才能发表评论。