性能文章>使用 Lighthouse 优化 Web Vitals>

使用 Lighthouse 优化 Web Vitals转载

6月前
259002

今天,我们将介绍 Lighthouse、PageSpeed 和 DevTools 中的新工具功能,以帮助确定您的网站如何在Web Vitals上进行改进。

 

作为工具的复习,Lighthouse是一个开源的自动化工具,用于提高网页的质量。您可以在Chrome DevTools调试工具套件中找到它,并针对任何网页、公共网页或需要身份验证的网页运行它。您还可以在PageSpeed Insights、CI和WebPageTest中找到 Lighthouse 。

 

Lighthouse 7.x 包括元素屏幕截图等新功能,可以更轻松地直观检查影响用户体验指标的 UI 部分(例如,哪些节点导致布局变化)。

我们还在 PageSpeed Insights 上提供了对元素屏幕截图的支持,从而能够更轻松地发现页面一次性性能运行的问题。

 

衡量核心网络生命力

 

Lighthouse 可以综合测量Core Web Vitals 指标,包括最大内容绘制、累积布局偏移和总阻塞时间(首次输入延迟的实验室代理)。这些指标反映了加载、布局稳定性和交互准备情况。其他指标,例如Core Web Vitals (CWV) 未来突出显示的First Contentful Paint也在那里。

 

Lighthouse 报告的“指标”部分包括这些指标的实验室版本。您可以将其用作用户体验的哪些方面需要您注意的摘要视图。

 




DevTools Performance 面板中的新 Web Vitals 选项会显示一个突出显示度量时刻的轨迹,例如上面显示的 Layout Shift (LS)。

现场指标(例如Chrome UX 报告或RUM中的指标)没有此限制,是对实验室数据的宝贵补充,因为它们反映了真实用户的体验。现场数据无法提供您在实验室中获得的各种诊断信息,因此两者齐头并进。

 

确定可以在 Web Vitals 上改进的地方

 

识别最大的 Contentful Paint 元素

 

LCP 是感知加载体验的度量。它在页面加载期间标记主要或“最大”内容已加载并且对用户可见的点。

 

Lighthouse 有一个“最大的内容油漆元素”审核,可以确定哪个元素是最大的内容油漆。将鼠标悬停在元素上将在主浏览器窗口中突出显示它。

 

 

如果此元素是图像,则此信息是一个有用的提示,您可能希望优化此图像的加载。Lighthouse 包含许多图像优化审核,可帮助您了解您的图像是否可以更好地压缩、调整大小或以更优化的现代图像格式交付。

您可能还会发现Annie Sullivan 的LCP Bookmarklet可用于快速识别具有红色矩形的 LCP 元素,只需单击一下即可。

 

预加载后期发现的图像以改进 LCP 

 

为了改进最大内容绘制,如果浏览器发现它们较晚,请预加载您的关键英雄图像。如果需要在图像可发现之前加载 JavaScript 包,则可能会发生延迟发现。

 

有一些关于预加载 LCP 映像的常见问题可能也值得简要介绍。

 

您可以预加载响应式图像吗?是的。假设我们有一个响应式英雄图像srcsetsizes如下所示:

 

<img src="lighthouse.jpg"
          srcset="lighthouse_400px.jpg 400w,
                  lighthouse_800px.jpg 800w,
                  lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
Lighthouse">

 

由于添加了imagesrcsetand属性,我们可以使用与 and使用的相同图像选择逻辑预加载响应式图像:imagesizeslinksrcsetsizes

 

<link rel="preload" as="image" href="lighthouse.jpg"
           imagesrcset="lighthouse_400px.jpg 400w,
                        lighthouse_800px.jpg 800w,
                        lighthouse_1600px.jpg 1600w"
imagesizes="50vw">

 

如果 LCP 图像是通过 CSS 背景定义的,审核是否还会突出显示预加载机会?是的。

 

任何被标记为 LCP 图像的图像,无论是通过 CSS 背景还是<img>在三个或更多瀑布深度处发现的图像都是候选图像。

 

延迟加载屏幕外图像并避免 LCP 

 

对初始用户体验不重要的屏幕外图像可以延迟加载。这是一种延迟下载图像直到用户滚动到它附近的技术,这可以减少关键资产的网络争用,并在某些情况下改善 LCP。“延迟屏幕外图像”审核可以在这里提供帮助:

 

 

不应延迟加载关键的首屏图像,例如最大内容绘制图像。这样做会延迟 LCP 图像加载。如果 LCP 图像通过“Largest Contentful Paint 图像被延迟加载”审核错误地延迟加载,Lighthouse 将突出显示:

 

 

识别 CLS 贡献

 

累积布局偏移是视觉稳定性的度量。它量化了页面内容在视觉上发生了多少变化。Lighthouse 对调试 CLS 进行了审计,称为“避免大的布局变化”。

 

此审核突出显示对页面变化贡献最大的 DOM 元素。在左侧的 Element 列中,您将看到这些 DOM 元素的列表,在右侧,您将看到它们对 CLS 的整体贡献。

 

 

由于新的 Lighthouse Element Screenshots 功能,我们既可以看到审计中提到的关键元素的视觉预览,也可以点击缩放以获得更清晰的视图:

 

 

对于加载后的 CLS,使用矩形持续可视化哪些元素对 CLS 贡献最大可能是有价值的。这是您可以在 SpeedCurve 的Core Web Vitals 仪表板等第三方工具中找到的一项功能,我喜欢使用Defaced 的 Layout Shift GIF 生成器来实现以下功能:

 

对于布局转换问题的站点范围视图,我从Search Console 的 Core Web Vitals 报告中获得了很多信息。这让我可以看到我网站上具有高 CLS 的页面类型(在这种情况下,帮助自我识别我需要花时间在哪些模板部分):

从没有维度的图像中识别 CLS 

 

要限制由没有尺寸的图像引起的累积布局偏移,请在图像和视频元素上包含宽度和高度大小属性。这种方法确保浏览器可以在加载图像时在文档中分配正确的空间量。

 

 

有关考虑图像尺寸和纵横比的重要性的文章,请参阅在图像上设置高度和宽度再次很重要。

 

从广告中识别 CLS 

 

Publisher Ads for Lighthouse可让您找到改善页面上广告加载体验的机会,包括对布局转换的贡献和可能会推迟用户使用页面的时间长的任务。在 Lighthouse 中,您可以通过社区插件启用此功能。

 

 

请记住,广告是网络布局变化的最大贡献者之一。重要的是:

 

  • 在视口顶部附近放置非粘性广告时要小心
  • 通过为广告位保留尽可能大的尺寸来消除变化

 

避免非合成动画

 

如果繁重的 JavaScript 任务使主线程保持忙碌,非合成动画可能会在低端设备上显示为 janky。这样的动画可以引入布局变化。

 

如果 Chrome 发现无法合成动画,它会将其报告给 Lighthouse 读取的 DevTools 跟踪,允许它列出未合成动画的元素以及未合成的原因。您可以在避免非合成动画审核中找到这些内容。

 

 

调试第一个输入延迟/总阻塞时间/长任务

 

首次输入测量从用户第一次与页面交互(例如,当他们单击链接、点击按钮或使用自定义的 JavaScript 驱动的控件时)到浏览器实际能够开始处理事件的时间处理程序以响应该交互。长 JavaScript 任务会影响该指标和该指标的代理,即总阻塞时间。

 

 

Lighthouse 包括一个避免长主线程任务审计,它列出了主线程上最长的任务。这有助于识别造成输入延迟的最坏因素。在左栏中,我们可以看到负责长主线程任务的脚本的 URL。

在右侧,我们可以看到这些任务的持续时间。提醒一下,长任务是执行时间超过 50 毫秒的任务。这被认为会阻塞主线程足够长的时间以影响帧速率或输入延迟。

如果考虑使用第三方服务进行监控,我也非常喜欢 Calibre 用于可视化这些成本的主线程执行时间线,它突出了父子任务,这些任务会导致影响交互性的长任务。

 

 

阻止网络请求以查看 Lighthouse 中的前后影响

 

Chrome DevTools 支持阻止网络请求以查看单个资源被删除或不可用的影响。这有助于了解单个脚本(例如第三方嵌入或跟踪器)在总阻塞时间 (TBT) 和交互时间等指标上的成本。

 

网络请求阻止恰好也适用于 Lighthouse!让我们快速浏览一下站点的 Lighthouse 报告。Perf 得分为 63/100,TBT 为 400 毫秒。深入研究代码,我们发现这个站点在 Chrome 中加载了一个 Intersection Observer polyfill,这不是必需的。让我们阻止它!

我们可以在 DevTools Network 面板中右键单击一个脚本,然后单击Block Request URL以阻止它。在这里,我们将为 Intersection Observer polyfill 执行此操作。

 

 

接下来我们可以重新运行 Lighthouse。这次我们可以看到我们的性能得分提高了(70/100),总阻塞时间也提高了(400ms => 300ms)。

用外观替换昂贵的第三方嵌入

 

使用第三方资源将视频、社交媒体帖子或小部件嵌入页面是很常见的。默认情况下,大多数嵌入会立即加载,并且可能带有昂贵的有效负载,会对用户体验产生负面影响。如果第三方不重要(例如,如果用户需要在看到它之前滚动),这将是一种浪费。

 

提高此类小部件性能的一种模式是在用户交互时延迟加载它们。这可以通过渲染小部件(外观)的轻量级预览来完成,并且只有在用户与之交互时才加载完整版本。Lighthouse 有一个审计,会推荐第三方资源,这些资源可以通过外观延迟加载,例如 YouTube 视频嵌入。

 

 

提醒一下,Lighthouse 将突出显示阻塞主线程超过 250 毫秒的第三方代码。这可以显示所有类型的第三方脚本(包括由 Google 编写的脚本),如果它们呈现的内容需要滚动查看,则可能值得更好地延迟或延迟加载。

超越核心网络生命力

 

除了突出 Core Web Vitals 之外,Lighthouse 和 PageSpeed Insights 的最新版本还尝试提供具体的指导,您可以遵循这些指导,以提高在打开源映射的情况下使用 JavaScript 繁重的 Web 应用程序的加载速度。

 

其中包括越来越多的审计集合,以降低页面中 JavaScript 的成本,例如减少对用户体验可能不需要的 polyfill 和副本的依赖。

点赞收藏
白寒

白寒,现产研公司资深前端开发工程师,曾就职于爱库存负责直播电商PC、移动端前端搭建,同时针对直播也做过大量的性能优化工作,涉及音视频传输、大数据展示、直播间加载、前端工程化等方面。

请先登录,感受更多精彩内容
快去登录吧,你将获得
  • 浏览更多精彩评论
  • 和开发者讨论交流,共同进步

为你推荐

Bundle-less 的思考和实践分享

Bundle-less 的思考和实践分享

七张图,让你看懂Go语言的垃圾回收原理

七张图,让你看懂Go语言的垃圾回收原理

JAVA使用CompletableFuture实现流水线并行处理,加速你的接口响应

JAVA使用CompletableFuture实现流水线并行处理,加速你的接口响应

虚拟机内存管理之内存分配器

虚拟机内存管理之内存分配器

学会这几招让 Go 程序监控自己的性能

学会这几招让 Go 程序监控自己的性能

Go 服务进行自动采样性能分析的方案设计与实现

Go 服务进行自动采样性能分析的方案设计与实现

2
0
Lv1
白寒

徽章

白寒,现产研公司资深前端开发工程师,曾就职于爱库存负责直播电商PC、移动端前端搭建,同时针对直播也做过大量的性能优化工作,涉及音视频传输、大数据展示、直播间加载、前端工程化等方面。