使用Lighthouse来优化Web性能

一江东流水
616 阅读5分钟

到底什么是 Web 性能?

wiki上的定义：Web 性能描述了 Web 应用在浏览器上的加载和显示的速度。

因此，当我们讨论 Web 性能时，其实就是讨论 Web 应用速度，关于 Web 应用的速度，我们需要从两个阶段来考虑：

  • 页面加载阶段；
  • 页面交互阶段。

本文重点讨论页面加载阶段的性能。

性能检测工具：Performance vs Lighthouse

，Chrome 为我们提供了非常完善的性能检测工具：Performance 和 Lighthouse，它们能够准确统计页面在加载阶段和运行阶段的一些核心数据，诸如任务执行记录、首屏展示花费的时长等，有了这些数据我们就能很容易定位到 Web 应用的性能瓶颈 。

首先 Performance 非常强大，因为它为我们提供了非常多的运行时数据，利用这些数据我们就可以分析出来 Web 应用的瓶颈。但是要完全学会其使用方式却是非常有难度的，其难点在于这些数据涉及到了特别多的概念，而这些概念又和浏览器的系统架构、消息循环机制、渲染流水线等知识紧密联系在了一起。

相反，Lighthouse 就简单了许多，它将检测到的细节数据隐藏在背后，只提供给我们一些直观的性能数据，同时，还会给我们提供一些优化建议。

不过在检测 Web 的性能指标之前，我们还要配置好工作环境:

  • 首先准备 Chrome 最新版的浏览器（Chrome Canary）。当然你也可以使用稳定版的 Chrome。
  • 然后我们需要在 Chrome 的隐身模式下工作，这样可以确保我们安装的扩展、浏览器缓存、Cookie 等数据不会影响到检测结果。

利用 Lighthouse 生成 Web 性能报告

  • 首先我们打开浏览器的隐身窗口，Windows 系统下面的快捷键是 Control+Shift+N，Mac 系统下面的快捷键是 Command+Shift+N。
  • 打开 Chrome 的开发者工具，选择 Lighthouse 标签。

image.png

观察上图中的 Lighthouse 界面，我们可以看到，在生成报告之前，我们需要先配置 Lighthouse，配置模块主要有两部分组成，一个是监测类型 (Categories)，另外一个是设备类型 (Device)。

监控类型 (Categories) 是指需要监控哪些内容，这里有五个对应的选项，它们的功能分别是：

  • 监测并分析 Web 性能 (Performance)；
  • 监测并分析 PWA(Progressive Web App) 程序的性能；
  • 监测并分析 Web 应用是否采用了最佳实践策略 (Best practices)；
  • 监测并分析是否实施了无障碍功能 (Accessibility)，无障碍功能让一些身体有障碍的人可以方便地浏览你的 Web 应用。
  • 监测并分析 Web 应用是否采实施了 SEO 搜素引擎优化 (SEO)。

本文我们只需要关注 Web 应用的加载性能，所以勾选第一个 Performance 选项就可以了。

再看看设备 (Device) 部分，它给了我们两个选项，Moblie 选项是用来模拟移动设备环境的，另外一个 Desktop 选项是用来模拟桌面环境的。

解读性能报告

点击生成报告的按钮之后，我们大约需要等待一分钟左右，Lighthouse 就可以生成最终的分析报告了，如下图所示：

image.png

观察上图的分析报告，中间圆圈中的数字表示该站点在加载过程中的总体 Web 性能得分，总分是 100 分。我们目前的得分为 97 分，这表示该站点加载阶段的性能非常棒。

Lighthouse 除了生成性能指标以外，还会分析该站点并提供了很多优化建议，我们可以根据这些建议来改进 Web 应用以获得更高的得分，进而获得更好的用户体验效果。

性能指标 (Metrics)

观察上图，我们可以发现性能指标下面一共有六项内容，这六项内容分别对应了从 Web 应用的加载到页面展示完成的这段时间中，各个阶段所消耗的时长。在中间还有一个 View Origin Trace 按钮，点击该按钮可以跳转到 Performance 标签，并且查看这些阶段在 Performance 中所对应的位置。最下方是加载过程中各个时间段的屏幕截图。

image.png

在渲染进程确认要渲染当前的请求后，渲染进程会创建一个空白页面，我们把创建空白页面的这个时间点称为 First Paint，简称 FP。

当页面中绘制了第一个像素时，我们把这个时间点称为 First Content Paint，简称 FCP。

当首屏内容完全绘制完成时，我们把这个时间点称为 Largest Content Paint，简称 LCP。其实用大白话解释就是，通常情况下，图片、视频以及大量文本绘制完成后就会报告LCP。

等所有资源都加载结束之后，再触发 onload 事件。

如何优化这些指标呢？

  • 第一项指标 FP: 如果 FP 时间过久，那么直接说明了一个问题，那就是页面的 HTML 文件可能由于网络原因导致加载时间过久。可以利用network面板来分析网络情况。

  • 第二项指标LCP: LCP 消耗时间过久，那么有可能是加载关键资源花的时间过久，也有可能是 JavaScript 执行过程中所花的时间过久。

  • 第三项是首屏时间 (Speed Index)，这就是我们上面提到的 LCP，它表示填满首屏页面所消耗的时间，首屏时间的值越大，那么加载速度越慢，具体的优化方式同优化第二项 LCP 是一样。

手动诊断 (Diagnostics)

在手动诊断部分，采集了一些可能存在性能问题的指标，这些指标可能会影响到页面的加载性能，Lighthouse 把详情列出来，并让你依据实际情况，来手动排查每一项。

avatar
文章
阅读
粉丝