性能评测之Lighthouse使用

keeely
1,337 阅读11分钟

简介

Lighthouse 是一款页面性能评测的开源工具，它会针对页面性能、无障碍访问性、最佳范例、SEO、PWA这五个方面的指标进行得分评估，出具一份性能检测报告并提供相应的优化和改进建议。我们可以对照这些建议，对症下药地进行性能优化，以达到改善网页质量，提升用户体验的目的。

如何使用

在Chrome Devtools 中使用

使用 Lighthouse 有两种方式，最简单的就是在chrome开发者工具里面找到 Lighthouse，选择需要检测的指标参数，点击generate report生成报告。

chrome使用lighthouse.png

在命令行运行

另外还可以使用 Node CLI 自动运行 Lighthouse，首先在全局安装 Lighthouse

npm install -g lighthouse

对页面站点进行审查

lighthouse https://juejin.cn/ --view

如果只想进行性能指标评测，可以使用如下命令

lighthouse https://juejin.cn/ --only-categories=performance --view

使用--help 指令可以查看可用的输入和输出参数项

lighthouse --help

审核指标

以掘金首页为例，如下图所示，使用 Lighthouse 能够得到 Performance, Accessibility, Best Practices, SEO, PWA 五个性能相关指标的得分情况，下面将对五个指标的具体含义进行详细介绍。

lighthouse.png

Performance 性能

性能得分通常是使用Lighthouse进行性能测评时最受关注的得分，该项指标的评测结果也是我们进行页面性能优化的重要依据所在。性能得分由以下六个方面的指标得分决定：

First Contentful Paint

FCP 是首屏加载时间，表示页面从开始加载到浏览器呈现第一段 DOM 内容所需的时间，这里 DOM 内容包括文本、图像、非白色<canvas>元素和 SVG，不包含 iframe 嵌入的内容。

3UhlOxRc0j8Vc4DGd4dt.avif

FCP 指标测评结果的评价标准如下图所示：

FCP.png

开发者可以使用web-vitals JavaScript 库来计算FCP。

import {getFCP} from 'web-vitals';
// 当 FCP 可用时立即进行测量和记录。
getFCP(console.log);

Time to Interactive

TTI 可交互时间表示一个页面从开始加载到完成渲染，到能够快速、可靠地响应用户输入所需的时间。如果页面满足以下三个条件则被认为是可交互的：

  1. 页面已有内容呈现
  2. 为大多数页面中的可见元素注册了可触发事件
  3. 页面在 50ms 内能够响应用户触发的事件

为提供良好的用户体验，应当将可交互时间控制在 5 秒以内。

Speed Index

Speed Index 速度指数用于衡量页面内容在视觉上填充的速度, 是显示页面可见部分的平均时间。Lighthouse 首先通过浏览器捕获页面加载的视频（当前实现中每秒捕获10帧），然后使用Speedline Node.js 模块计算速度指数分数。其原理是为每个视频帧分配一个完成百分比，随着时间的推移，可以得到时间和完成百分比的曲线图，则速度指数就是以毫秒为单位计算的曲线上方区域，具体公式是:

IntervalScore = Interval * (1.0 - (Completeness/100))

其中 Completeness 是该帧的视觉完成百分比，Interval 是该视频帧的经过时间，这里单位是毫秒因此Interval取值 100，则总分就是每个 0.1s 区间内速度指数的总和：SUM(IntervalScore)。

Total Blocking Time

TBT 是总阻塞时间，用于衡量网站被阻止响应用户输入的总时间，具体是指 FCP 和 TTI 之间所有长任务的阻塞时间之和。在此期间，主线程被阻塞的时间过长，无法进行输入响应。TBT有助于量化页面不可交互程度的严重性。

长任务表示执行超过 50ms 的任务，其中超过 50ms 的时间为阻塞时间。

下方图中展示了一个浏览器主线程中待执行的所有任务，其中有三个任务是长任务，总阻塞时间为 345 毫秒。

TBT1.svg

TBT2.svg

为提供良好的用户体验，网站应该将总阻塞时间控制在 300 毫秒以内。

Largest Contentful Paint

LCP 最大内容渲染，表示页面从开始加载到最大元素呈现到屏幕上的时间。LCP 指标测评结果的评价标准如下图所示：

LCP.png

Cumulative Layout Shift

页面元素产生意料之外的布局偏移在某些时候会带来较大的负面影响，比如下面动图中按钮的位置意外偏移从而导致了误触。异步加载尺寸未知的资源或是动态添加 DOM 元素到现有元素的上方会导致现有元素起始位置发生改变，产生布局偏移。CLS 指标通过检测真实用户体验中发生布局偏移的频率帮助用户了解页面布局偏移的情况。

layout-instability2.gif

CLS 为累积布局偏移，表示整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数。一连串的布局偏移，也被称为会话窗口，是指一个或多个快速连续发生的单次布局偏移，每次偏移间隔时间小于 1 秒，且整个窗口的最大持续时长为 5 秒。最大的一连串是指窗口内所有布局偏移累计分数最大的会话窗口。

CLS.jpg

CLS 指标测评结果的评价标准如下图所示：

CLS.png

为避免意料之外的布局偏移，应当遵循以下原则：

  1. 给 img 或 video 元素设置明确的宽高尺寸属性，或是利用CSS aspect-ratio属性创建占位符空间，避免布局偏移。
  2. 除去对用户交互进行响应的情况外，不在页面现有元素上方插入内容。

如何确定 Performance 总指标分数

Lighthouse 获取到所有性能指标（单位是毫秒）之后，会去查看各项指标值在其评分分布中所在的位置，然后将每个原始指标值转换为0 到 100 之间的指标分数。评分分布是来自于HTTP Archive真实网站性能数据分析得到的对数正态分布。

性能总分数是所有指标分数的加权平均值。Lighthouse 6 和Lighthouse 8 各项指标的权重如下图所示，可以看出每一项指标的权重不是一成不变的，Lighthouse 团队会定期进行相关研究并收集用户的反馈，了解真实用户浏览网页时对各项性能指标的感知情况并进行迭代优化，使得分数与实际体验更加契合。

各项指标权重.png

如何提升 Performance 性能指标分数

提升性能各项指标得分的通用方案有：

如要查看更多性能提升方案，请参阅官方文档

Accessibility 无障碍访问性

无障碍访问性分数用于衡量所有用户，包括残障人士是否都能有效地访问页面的内容。无障碍审核得分与性能指标得分计算的方式不同，无障碍审核每个指标项检测结果是成功或者失败，一旦页面中某一指标项存在未通过的部分，则该指标项不计入得分。

无障碍审核大多是针对页面标签的优化进行审核，比如图像 img 标签或 input 标签是否具有alt属性，文档是否包含title标签，标题元素是否按逻辑顺序排列等。

另外，与 aria 相关的属性和状态也会进行审核，例如[aria-*]属性是否与其角色匹配， [aria-hidden="true"] 是否出现在文档<body>标签中等等。

当页面背景和前景对比度较低时，用户难以分辨字符的形状，Lighthouse 会将背景色和前景色对比度不足的文本标记出来，评分也会随之降低。

Best Practices 最佳范例

最佳范例指标用于衡量网站在速率和安全性及其他方面是否符合最佳实现的标准。在开发过程中如果不遵循一些通用的最佳做法，会影响最佳范例指标的得分。例如页面缺少HTML 文档类型声明，此时会触发Quirks模式，浏览器会根据自身的解析标准进行解析，可能导致页面在不同的浏览器中呈现出不同的效果。

网站速率方面，使用document.write()会导致页面内容显示延迟数十秒，网速较慢时影响更加明显。不使用 http2.0 协议传输资源，也会影响最佳范例得分。在安全性方面，不使用 https、引用有安全漏洞的 js 库、CSP不够严格，容易被绕过，这些问题在进行最佳范例审核时也会被列出。

CSP全称为Content Security Policy，即内容安全策略，能够抵御 XSS 跨站脚本攻击。CSP 实质上是白名单制度，开发人员明确告诉客户端哪些外部资源可以加载和执行，实现和执行由浏览器完成，CSP 大大增强了网页的安全性。

SEO 搜索引擎优化

SEO 衡量的是搜索引擎对站点页面内容的理解程度，可以根据该指标的审计结果对搜索引擎结果排名进行优化。确保搜索引擎理解页面内容，需要满足：

  1. document 包含 title 标签
  2. document 包含 description meta 描述标签
<meta name="description" content="Author...">
  1. 链接元素包括描述性文本
<p>To see all of our basketball videos, <a href="videos.html">click here</a>.</p>

最好用具体描述替换诸如"点击此处"和"了解更多"之类的通用短语，明确指出用户点击链接后获取的内容类型。

<p>Check out all of our <a href="videos.html">basketball videos</a>.</p>

确保搜索引擎能够抓取您的网页需满足：

  1. 页面返回成功的 HTTP 状态码
  2. robots.txt 有效

robots.txt 全称为网络爬虫排除标准（Robots Exclusion Protocol），其作用是告知搜索引擎允许或者不允许抓取哪些页面。

确保网页适合在移动设备上浏览需满足：

  1. 文档包含 viewport meta标签，同时该标签必须包含 width 或 initial-scale 属性。

设置 viewport meta 标签能够控制可视窗口的宽度和缩放比例，如果不添加该标签，移动设备会以桌面屏幕宽度缩小页面进行呈现，阅读体验不佳。

  1. 页面字体不能太小，字体尺寸太小时无法在移动设备上清晰地阅读。

字体小于12像素时在移动设备中就不太清晰了。

  1. 可点击元素的尺寸不能太小

PWA 渐进式 web 应用

PWA 全称是 Progressive Web App，指的是渐进式 web 应用，PWA 应用能够给用户提供原生应用般的体验，支持消息推送、离线访问和设备硬件访问等功能。Lighthouse 中 PWA 指标分数用于衡量一个应用是否满足渐进式 web 应用的要求。该指标分数主要由 PWA 应用的以下三方面的表现决定:

  1. 是否快速且可靠，检测 PWA 应用在移动网络上的加载速度是否够快以及应用是否支持离线可访问。

  2. 是否可安装，检测 PWA 应用清单是否符合可安装性要求，其中Web 应用清单是指使得应用可安装所需的关键信息。

  3. 是否安全易用，包括 https 协议使用情况，为地址栏提供主题颜色等等。

项目不是渐进式 web 应用的话，可以忽略最后一项指标 PWA 清单检测。

avatar
文章
阅读
粉丝