Lighthouse介绍

Lighthouse 是谷歌开源的一款 Web 前端性能测试工具,用于改进网络应用的质量,适用于网页版和移动端。能生成一个包括页面性能、PWA(Progressive Web apps,渐进式 Web 应用)、可访问性(无障碍)、最佳实践、SEO 的报告清单提供参考,看看可以采取哪些措施来改进您的应用。

使用方法

  1. 浏览器F12:在最新的谷歌浏览器或Edge浏览器访问一个被测试网站,按F12打开开发者工具,看到最后一个项就是Lighthouse

  2. 访问被测网站,点击【生成报告】就会自动分析你访问的网站,得出性能分析报告

Lighthouse测试流程图

  • Lighthouse与浏览器建立连接
  • 测试的初始化配置与加载待测试页面
  • 在页面加载过程中,运行一系列的采集器(gatherers),每个采集器都会收集自己的目标信息,并生成中间产物(artifacts)
  • 运行一系列的审计项(audits),每个审计项都会从中间产物(artifacts)中获取所需的数据,计算出各自的评分
  • 输出report

Metrics指标

最重要的指标(即Core Web Vitals)主要包括三个方面–加载、交互性和视觉稳定性:

  • Largest Contentful Paint (LCP): 衡量加载体验:为了提供良好的用户体验, LCP 应该在页面首次开始加载后的 2.5 秒内发生。
    • First Contentful Paint (FCP) 首次内容绘制
    • Largest Contentful Paint (LCP) 最大内容绘制
  • First Input Delay (FID): 衡量可交互性,为了提供良好的用户体验,页面的 FID 应当小于100毫秒。
    • Total Blocking Time (TBT) 总阻塞时间
    • Time To Interactive (TTI) 页面可交互时间
  • Cumulative Layout Shift (CLS):衡量视觉稳定性,为了提供良好的用户体验,页面的CLS应保持小于0.1。

First Contentful Paint (FCP) 首次内容绘制

这是当用户看见一些“内容”元素被绘制在页面上的时间点,和白屏是不一样的,它可以是文本的首次出现,或者 SVG 的首次出现,或者 Canvas 的首次出现等等。

如果首次内容绘制耗时太长,可能是因为:

  • 网络连接可能有性能问题
  • 资源太过庞大(如 index.html),传输它们消耗太多时间

Largest Contentful Paint (LCP) 最大内容绘制

LCP全称Largest Contentful Paint,翻译为最大内容绘制,用于监控网页可视区内绘制面积最大的元素开始呈现在屏幕上的时间点。

页面在加载过程中,是线性的,元素是一个一个渲染到屏幕上的,而不是一瞬间全渲染到屏幕上,所以“渲染面积”最大的元素随时在发生变化。

LCP 目前并不会计算所有元素,因为这样会使这个指标变得非常复杂,它现在只关注下面的元素:

  • <img>元素
  • <image>元素内的<svg>元素
  • <video>元素
  • 通过url()函数加载背景图片的元素
  • 包含文本节点或其他内联文本元素子级的块级元素。

LCP较差的最常见原因是:

  • 服务器响应时间慢
  • 阻断渲染的 Javascript 和 CSS
  • 资源加载时间慢
  • 客户端渲染

改善LCP的方法:

  • 优化服务器:浏览器从服务器接收内容所需的时间越长,则在屏幕上呈现任何内容所花费的时间就越长。

FID

如上图所示,浏览器接收到用户输入操作时,主线程正在忙于执行一个耗时比较长的任务,只有当这个任务执行完成后,浏览器才能响应用户的输入操作。它必须等待的时间就此页面上该用户的 FID 值。

Total Blocking Time (TBT) 总阻塞时间

总阻塞时间(Total Blocking Time,TBT)量化了负载响应能力,测量了主线程被阻塞的时间长到足以阻止输入响应的总时间。TBT衡量的是第一次有内容的绘画(FCP)和交互时间(TTI)之间的总时间。注意:当主线程被阻塞超过50ms导致用户事件无法响应,这样的阻塞时长才会被统计到TBT中

Time To Interactive (TTI) 页面可交互时间

这个指标表示浏览器已经渲染完了我们首屏需要显示的内容并且已经准备好接受用户的交互信息了,也标志着程序是否可用。

计算:domInteractive - navigationStart

提高FID(TBT、TTI)分数的办法

提高FID的方法:

  1. 减少 JavaScript 执行时间
    • 缩小并压缩 JavaScript 文件
    • 延迟加载首屏不需要的JavaScript
  2. 分解耗时任务:任何阻塞主线程50毫秒或更长时间的代码段都可以称为长任务,我们可以将长的耗时任务拆分为较小的异步任务。

Cumulative Layout Shift (CLS) 累积布局偏移

CLS全称是 Cumulative Layout Shift,中文名是累计布局偏移,是 Google Search Console的一个核心网页指标,是指网页布局在加载期间的偏移量。得分范围是0–1,其中 0 表示没有偏移,1 表示最大偏移。

计算CLS

为了计算布局的偏移值,浏览器会查看两个渲染帧之间的视口大小和视口中不稳定元素的移动。布局偏移分是该移动的两个指标的乘积:影响分数和距离分数。

1
layout shift score = impact fraction * distance fraction
  • 影响分数(impact fraction):前一帧和当前帧的所有不稳定元素的可见区域的并集(占视口总面积的一部分)是当前帧的影响分数。
  • 距离分数(distance fraction):距离分数是任何不稳定元素在框架中移动的最大距离(水平或垂直)除以视口的最大尺寸(宽度或高度,以较大的为准)。

在上图中,有一个元素在一帧中占据了视口的一半。然后,在下一帧中,元素下移视口高度的25%。红色的虚线矩形表示两个帧中元素的可见区域的并集,在这种情况下,其为总视口的75%,因此其影响分数为 0.75。最大的视口尺寸是高度,并且不稳定元素移动了视口高度的25%,这使得距离分数为0.25。因此布局位移分数(layout shift score)为0.75 * 0.25 = 0.1875。

改善CLS

  1. 不要使用无尺寸元素:图像和视频等元素上始终需要包括 width 和 height 尺寸属性,现代浏览器会根据图像的 width 和 height 属性设置图像的默认长宽比,知道纵横比后,浏览器就可以为元素计算和保留足够的空间。

  2. 提前给广告位预留空间

  3. 注意字体变化

参考


----------- 本文结束啦感谢您阅读 -----------

赞赏一杯咖啡

欢迎关注我的其它发布渠道