如何查看网页性能

工欲善其事必先利其器，好的性能测量工具是帮助我们做网站性能优化的第一步，这里推荐以下三个性能测量工具：

• Chrome DevTools 开发调试、Performance 评测
• Lighthouse 网站整体质量评估
• WebPageTest 多测试地点、全面性能报告

上面三个是从不同作用出发，从不同角度查看性能指标的工具。

Network 瀑布图

打开 DevTools,点击NetWork,可以看到页面加载概览和瀑布图，还有两根垂直的长线，绿色是 dom 下载完成时间，红色是总资源加载完成时间。

页面加载概览的内容为：

• requests : 请求数
• transferred : 传输量
• resources : 资源量
• DOMContentLoaded : DOM 加载完成时间
• Loaded : 总资源加载时间

鼠标悬浮到瀑布图上后可以看到以下指标：

性能指标内容如下：

• Resource Scheduling：资源调度情况，浏览器会自动对高优先级的资源安排请求。
• Connection Start：开始连接后的情况
  • DNS Lookup：dns 连接时间
  • Initial connection：TCP 连接时间
  • SSL：https 下的 ssl 协商(安全性验证)时间
• Request/Response 请求/响应时间
  • Request sent：请求发送时间
  • Waiting for server response 【TTFB】：请求发出去到响应返回的时间【影响用户体验最重要的指标】
  • Content Download：返回内容下载时间

其中 TTFB 是影响用户对网站体验的最重要的指标，它能够反映后台数据处理的速度和网络的速度，TTFB 应该在 500ms 以内。

Performance

打开 Devtools，点击 Performance，使用这个工具有两种方式：

1. 点击 record button 来开始记录，通过对页面的各种操作来产生性能报告
2. 点击 reload button 来重新加载页面，Performance 会记录页面加载后的各种行为并产生性能报告

Lighthouse 网页性能查看器

Chrome 浏览器的 LightHouse 模块提供性能报告和性能建议的功能。

打开 DevTools — Lighthouse — generator 即可生成

其中能体现网站性能的指标有两个：

• First Contentful Paint 首屏加载
• Speed Index 页面加载的速度指数

当所有报告出来后，直接查看浏览器给的OPPORTUNITIES建议，然后对应建议一条一条优化即可。

FPS meter

网站的 UX 体验也是重要的性能因素。

一个网页跟游戏一样，在渲染时会有渲染帧数，即 FPS。大于 60fps 会让肉眼感觉速度很快，帧数越低就觉得越慢。

在DevTools中，使用快捷键command+shift+p搜索frame，通过Show frame per second(FPS) meter，我们能够检测出网站对应的 fps 值。

以上是 pc 端淘宝网的页面 FPS 监测结果。

在淘宝网中滑动、查看侧边栏等交互操作，会让检测器中 FPS 值产生变动。网页版的淘宝网平均值达到 50fps 以上，对于图片资源特别大的电商网站来说，这个数值非常可观。

WebPageTest

WebPageTes 的特点是能够给出不同测试地点，不同浏览器的性能速度指标。这两个大杀器也是让它能够跟谷歌浏览器提供的测量工具并驾齐驱的原因。

打开WebPageTest 官方网站，就可以看到以下内容

我们只需要输入 URL、选择测试地点、选择浏览器配合其他默认的高级选项，然后点击Start Test按钮，就可以得出比较详细的测试报告，类似以下图示：

性能概览

这是页面对测试网站的总体性能评价概览。

观察指标

这里有我们关注最重要的指标：

1. First View 第一次访问
2. Repeat View 再次访问
3. Start Render 首屏渲染时间
4. Speed Index 速度指数
5. Total Blocking Time 页面不能交互的时间

瀑布图，页面快照和录像

点击瀑布图后能够清晰显示各资源的加载排序以及加载时间。

下图为一部分淘宝的图片资源加载瀑布图

这些资源有个很明显的特点，它们是并行加载的。这说明淘宝对图片资源的加载顺序做了非常好的优化。

点击 Watch Video 还能看到页面从加载到渲染的整个详细过程

RAIL 测量模型

RAIL 测量模型是谷歌提供的性能测量标准，它能够指导我们从哪些维度出发提升页面的性能。

RAIL 测量模型分以下板块：

• Response 响应 —— 用户获得反馈的响应时间（网络、交互等）
• Animation 动画 —— 动画流畅程度（FPS 帧数）
• Idle 空闲 —— 让主线程有更多的空闲时间，这样不会阻塞用户的交互事件
• Load 加载 —— 加载速度

RAIL 测量的最终目标是让用户获得最好的用户体验。

那达到什么标准才能算性能很好呢？

RAIL 给出了评估标准：

• 响应：处理事件应在 50ms 内完成（延迟 100ms，扣除输入的 50ms 保险时间）

  

• 动画：每 10ms 产生 1 帧（即 1000ms 达到 60 帧=16ms/帧-6ms 浏览器渲染时间）

• 空闲：尽可能增加主线程空闲时间。（让大量的运算工作放在后端去做）

• 加载：在 5s 内完成内容加载并可以交互

关键指标整理

1. First Paint：在用户导航到网页后在屏幕上第一次呈现点时
2. First Contentful Paint：第一个文本或者图像等 DOM 发生首次内容绘制的时间
3. TTFB：请求发出后响应返回的时间
4. Time to Interactive：可交互时间（TTI）,衡量的是用户与页面进行互动之前所花费的时间，即页面对点击做出反应之前的时间。
5. Speed Index：页面加载的速度指数
6. Total Blocking Time：页面不能交互的时间

FP 和 FCP 很容易混淆，下面用一张图来表示它们的区别

常用的性能测量 APIS