衡量网站性能的指标与测量工具

随着项目功能的丰富与完善，性能问题日益凸显，接下来的文章将由浅入深的分享一些性能优化过程中用到的方法和工具。

在优化前，我们要对自己的页面有所了解，响应慢，有多慢？操作卡，有多卡？性能低，有多低？这些都需要一个数据来衡量。优化后，也需要同样的数据来对比判断优化的效果。而不是凭借个人的主观感觉来评判页面性能。

衡量性能的指标

RAIL测量模型，这是Google制定的衡量性能的标准，告诉我们应该怎么做，做到什么样才算好。RAIL是四个指标的缩写：

      Response：网站给用户的响应体验，建议处理事件在50ms内完成；

      Animation： 动画是否流畅，要求每10ms产生一帧；

      Idle： 让浏览器有足够的空闲时间，不能让主线程一直处于繁忙状态；

      Load： 加载 ，要求在5s内完成所有内容的加载并可以交互。

性能测量工具

首先介绍一下Chrome自带的性能监测工具。

一、在之前的文章（Chrome DevTools调试技巧之Network）中，简单介绍了一些描述性能的指标，下面再详细介绍一下network面包中与性能相关的指标。下面是一个请求的waterfall截图

其中：

      Queueing：排队的时间

      DNS Lookup：DNS查找的过程

      Initial connection：建立TCP链接的过程

      SSL：SSL安全验证的过程

      Waiting（TTFB）：从请求发出到请求回来实际需要的时间，用户感受到的网站快慢很大程度上由这个指标确定。取决于两个指标：后台的处理能力和网络情况

      Content Download：资源下载所需时间

在面板空白处右键，点击Save all as HAR with content，可将结果保存起来，留作优化后的对比。

二、除了Network面板，Lighthouse面板也是展示性能指标的很好的工具，可以对网站整体进行质量评估。但其对网络有要求，需要访问Google，若一直提示Lighthouse is warming up，则表明无法访问Google，需开启代理。点击Generate report，可以生成关于页面性能的报告，大家可以用自己的网站测试一下。下面对部分性能报告进行说明：

1、总览

报告一共给出了5个方面的评分，其中：Performance：性能、Accessibility：可访问性、Best Practices：最佳实践、SEO：搜索引擎优化、Progress Web App：渐进式加载。

2、Performance性能

 其中： First Contenful Paint：第一次有内容的绘制出现的时间（从白屏到出现内容）

          Speed Index：速度指数，根据网站的性质，要求有所不同，不要拿视频或电商网站与百度谷歌等搜索引擎去比较。

          Largest Contenful Paint：最大的有意义的内容显示出来用了多久

          Time to Interactive：可以和用户交互的时间

中间10张截屏展示了页面从开始访问到页面出来经历的过程，可以看到这个页面出现了长时间的空白，没有做到很好的渐进式优化。

Opportunity里面提供了可以做的优化建议，并给出了做完这项优化后可节省的时间。如第一条，Remove unused JavaScript删除没有用到的js，点击可以展示出具体的js文件。第二条，Eliminate render-blocking resources减少渲染阻塞的资源，可以考虑将这里的js延时加载，而不是第一时间加载。

三、打开command菜单（Windows快捷键 Ctrl+Shift+P；Mac快捷键command+shift+P），找到Show frames per second（FPS）meter并点击。可以看到左上角显示出了对帧数的监测信息。不同版本的Chrome显示数据稍有差别，我这里显示的是及时渲染的帧的百分比。可能大多数人熟悉的是FPS概念，Chrome也在逐渐恢复FPS。

四、在Performance面板中，录制页面操作后，可以看到主线程具体在什么时间做了什么事情（查看RAIL中的Idle）。

其次，WebPageTest也是一个非常强大的测量工具，我将在下篇文章中详细介绍。