寻找机会,利用 Chrome 的网络工具改善用户体验。
今天,我们将介绍 Lighthouse、PageSpeed 和开发者工具中的全新工具功能,以帮助您确定您的网站如何在网页指标方面进行改进。
回顾一下这些工具,Lighthouse 是一个用于提升网页质量的开源自动化工具。您可以在 Chrome 开发者工具的调试工具套件中找到该工具,并可对任何网页(无论是公共网页还是需要身份验证的网页)运行该工具。您还可以在 PageSpeed Insights、CI 和 WebPageTest 中找到 Lighthouse。
Lighthouse 7.x 包含元素屏幕截图等新功能,可让您更轻松地直观地检查影响用户体验指标的界面部分(例如,哪些节点导致了布局偏移)。
我们还在 PageSpeed Insights 提供了对元素屏幕截图的支持,让您能够更轻松地发现一次性网页性能运行问题。
![元素屏幕截图,突出显示了导致网页布局偏移的 DOM 节点](https://web.developers.google.cn/static/articles/optimize-vitals-lighthouse/image/element-screenshots-highl-9678c17be2c3e.png?authuser=8&hl=fi)
衡量核心网页指标
Lighthouse 可以合成衡量核心网页指标,包括 Largest Contentful Paint、Cumulative Layout Shift 和 Total Blocking Time(First Input Delay 的实验室代理)。这些指标反映了加载、布局稳定性和互动就绪情况。此外,我们还提供其他一些指标,例如在未来核心网页指标中突出显示的 First Contentful Paint。
Lighthouse 报告的“指标”部分包含这些指标的实验版本。您可以将其用作摘要视图,了解用户体验的哪些方面需要您注意。
![Lighthouse 性能指标](https://web.developers.google.cn/static/articles/optimize-vitals-lighthouse/image/lighthouse-peformance-met-3efe9953f7349.png?authuser=8&hl=fi)
![开发者工具性能面板中的 Web Vitals 通道](https://web.developers.google.cn/static/articles/optimize-vitals-lighthouse/image/web-vitals-lane-the-devt-783469a60bb43.png?authuser=8&hl=fi)
实测指标(例如 Chrome 用户体验报告或 RUM 中的指标)没有此限制,是实验室数据的重要补充,因为它们反映的是真实用户的体验。实测数据无法提供您在实验中获得的各种诊断信息,因此两者是相辅相成的。
确定在网页指标方面有待改进的方面
确定 Largest Contentful Paint 元素
LCP 衡量的是感知加载体验。它用于标记在网页加载期间主要(即“最大”)内容已加载并对用户可见的时间点。
Lighthouse 具有“Largest Contentful Paint 元素”审核机制,该审核机制可以确定哪个元素是最大的内容绘制模式。将鼠标悬停在元素上,系统会在主浏览器窗口中突出显示该元素。
![Largest Contentful Paint 元素](https://web.developers.google.cn/static/articles/optimize-vitals-lighthouse/image/largest-contentful-paint-b0d51a8ebda9.png?authuser=8&hl=fi)
如果此元素是图片,则此信息会是一个有用的提示,可帮助您优化此图片的加载。Lighthouse 包含多项图片优化审核,可帮助您了解能否以更优的现代图片格式更好地压缩、调整大小或传送图片。
![适当调整映像大小](https://web.developers.google.cn/static/articles/optimize-vitals-lighthouse/image/properly-size-images-audi-73a6bd1ff0d65.png?authuser=8&hl=fi)
您还可以发现 Annie Sullivan 编写的 LCP 小书签,只需点击一下,就能使用红色矩形快速识别 LCP 元素。
![使用小书签突出显示 LCP 元素](https://web.developers.google.cn/static/articles/optimize-vitals-lighthouse/image/highlighting-lcp-element-3679084da1848.png?authuser=8&hl=fi)
预加载延迟发现的映像以改进 LCP
如需改进 Largest Contentful Paint,请预加载关键主打图片(如果浏览器较晚发现这些图片)。如果需要在加载图片之前加载 JavaScript 软件包,可能会发生延迟发现。
![预加载最大的 Contentful Paint 图片](https://web.developers.google.cn/static/articles/optimize-vitals-lighthouse/image/preload-largest-contentf-337c3976114a2.png?authuser=8&hl=fi)
对于预加载 LCP 图片,我们会询问一些常见问题,这些问题可能也值得简要说明。
您可以预加载自适应图片吗?是。
假设我们有一张自适应主打图片,使用下面的 srcset
和 sizes
指定:
<img src="lighthouse.jpg"
srcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
Lighthouse">
由于 link
属性中添加了 imagesrcset
和 imagesizes
属性,因此我们可以使用 srcset
和 sizes
所用的同一图片选择逻辑预加载自适应图片:
<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 背景定义的,审核是否还会突出显示预加载机会?有。
无论是通过 CSS 背景还是 <img>
标记为 LCP 图片的任何图片,只要在瀑布深度为 3 或更高时被发现,就会成为候选图片。
延迟加载屏幕外图片,并避免在 LCP 上出现此问题
对初始用户体验不重要的屏幕外图片可以进行延迟加载。通过这种技术,可将图片延迟到用户滚动到图片附近时再下载,从而减少对关键资源的网络争用,并在某些情况下提高 LCP。通过“推迟屏幕外图片”审核有助于:
![延迟显示屏幕外图片](https://web.developers.google.cn/static/articles/optimize-vitals-lighthouse/image/defer-offscreen-images-b155bac024485.png?authuser=8&hl=fi)
不应延迟加载重要的首屏图片(例如 Largest Contentful Paint 图片)。否则会延迟 LCP 图片加载。Lighthouse 会突出显示是否通过“Largest Contentful Paint image was lazily loaded”审核错误地延迟加载了 LCP 图片:
![避免延迟加载 LCP 图片](https://web.developers.google.cn/static/articles/optimize-vitals-lighthouse/image/avoid-lazy-loading-lcp-im-5cda17112b2f1.png?authuser=8&hl=fi)
确定 CLS 贡献
Cumulative Layout Shift 用于衡量视觉稳定性。它可以量化网页内容的视觉偏移量Lighthouse 提供一项名为“避免大型布局偏移”的审核机制,用于调试 CLS。
此项评估会突出显示对网页偏移影响最大的 DOM 元素。在左侧的“元素”列中,您会看到这些 DOM 元素的列表,并在右侧看到它们的总体 CLS 贡献。
![Lighthouse 中的“避免大幅布局偏移”审核,其中突出显示了影响 CLS 的相关 DOM 节点](https://web.developers.google.cn/static/articles/optimize-vitals-lighthouse/image/the-avoid-large-layout-sh-629d2845accff.png?authuser=8&hl=fi)
得益于新的 Lighthouse Element 屏幕截图功能,我们既可以直观地预览审核中记录的关键元素,也可以点击进行缩放以获得更清晰的视图:
![点击元素屏幕截图即可将其展开](https://web.developers.google.cn/static/articles/optimize-vitals-lighthouse/image/clicking-an-element-scre-fa8d885736b59.png?authuser=8&hl=fi)
对于加载后 CLS,通过矩形持续直观呈现哪些元素对 CLS 的影响最大是有价值的。SpeedCurve 的 Core Web Vitals 信息中心等第三方工具中都有此功能,我喜欢使用 Defaced 的 Layout Shift GIF 生成器来使用该功能:
![突出显示偏移的布局偏移生成器](https://web.developers.google.cn/static/articles/optimize-vitals-lighthouse/image/the-layout-shift-generato-21aa868cfdf03.gif?authuser=8&hl=fi)
我可以从 Search Console 的“核心网页指标”报告中了解整个网站的布局偏移问题。这样,我就可以查看网站上具有高 CLS 的网页的类型(在本例中,有助于自行确定我需要花费时间的模板部分):
![Search Console 显示 CLS 问题](https://web.developers.google.cn/static/articles/optimize-vitals-lighthouse/image/search-console-displaying-652f8345e0e22.png?authuser=8&hl=fi)
从没有维度的图片中识别 CLS
如需限制由无尺寸图片导致的 Cumulative Layout Shift,请在图片和视频元素中添加宽度和高度尺寸属性。此方法可确保浏览器在加载图片时可以在文档中分配适当的空间量。
![审核没有明确宽度和高度的图片元素](https://web.developers.google.cn/static/articles/optimize-vitals-lighthouse/image/audit-image-elements-wit-469f666c4444e.png?authuser=8&hl=fi)
请参阅再次设置图片的高度和宽度至关重要,了解考虑图片尺寸和宽高比的重要性。
从广告中识别 CLS
借助 Lighthouse 发布商广告,您可以找到改善网页上广告加载体验的机会,包括对布局偏移的贡献,以及可能会延迟多久才可供用户使用您的网页的耗时较长任务。在 Lighthouse 中,您可以通过社区插件启用此功能。
![与广告相关的审核结果揭示了缩短请求处理时间和布局偏移的机会](https://web.developers.google.cn/static/articles/optimize-vitals-lighthouse/image/ads-related-audits-highli-655d466f3dfce.png?authuser=8&hl=fi)
请注意,广告是导致网页布局偏移的最大因素之一。请务必:
- 在视口顶部附近放置非粘性广告时请务必小心
- 通过尽可能为广告位预留最大尺寸,来消除移位
避免使用非合成动画
如果繁重的 JavaScript 任务导致主线程忙碌,非合成的动画在低端设备上可能会出现卡顿。此类动画可能会引入布局偏移。
如果 Chrome 发现某个动画无法合成,就会向开发者工具跟踪 Lighthouse 读取该动画,以便其列出哪些带动画的元素没有合成以及相关原因。您可以在避免非合成动画审核中找到这些内容。
![审核以避免非合成动画](https://web.developers.google.cn/static/articles/optimize-vitals-lighthouse/image/audit-avoiding-non-compo-c2eb95c0a3b8a.png?authuser=8&hl=fi)
调试首次输入延迟 / 总阻塞时间 / 耗时较长的任务
首次输入衡量的是从用户首次与页面互动(例如,点击链接、点按按钮或使用由 JavaScript 提供支持的自定义控件)到浏览器实际上能够开始处理事件处理脚本来响应该互动的时间。长时间的 JavaScript 任务可能会影响此指标以及此指标的替代指标,即总阻塞时间。
![审核以避免长时间运行的主线程任务](https://web.developers.google.cn/static/articles/optimize-vitals-lighthouse/image/audit-avoiding-long-main-bdd20692ccc9c.png?authuser=8&hl=fi)
Lighthouse 包含一个避免长时间运行的主线程任务审核,其中列出了主线程上耗时最长的任务。这有助于确定导致输入延迟的最严重因素。在左侧列中,我们可以看到负责长时间运行的主线程任务的脚本的网址。
在右侧,我们可以看到这些任务的时长。提醒一下,长任务是指执行时间超过 50 毫秒的任务。这被认为会阻塞主线程足够长的时间,从而影响帧速率或输入延迟。
如果考虑使用第三方服务进行监控,我也非常喜欢主线程执行时间轴可视化 Calibre 的可视化这些开销,它会突出显示导致影响互动的长任务的父任务和子任务。
![主线程执行时间轴可视化 Calibre 具有](https://web.developers.google.cn/static/articles/optimize-vitals-lighthouse/image/the-main-thread-execution-16ffaca06acc9.png?authuser=8&hl=fi)
屏蔽网络请求,以在 Lighthouse 中查看更改前/后的影响
Chrome 开发者工具支持屏蔽网络请求,以便您查看个别资源被移除或不可用的影响。这有助于了解各个脚本(例如第三方嵌入或跟踪器)在总阻塞时间 (TBT) 和可交互时间等指标方面的费用。
网络请求屏蔽功能也适用于 Lighthouse!我们来快速了解一下某个网站的 Lighthouse 报告性能得分为 63/100,TBT 为 400 毫秒。我们在深入研究代码后发现,此网站会在 Chrome 中加载 Intersection Observer polyfill,但这并不是必需的。让我们屏蔽它!
![屏蔽网络请求](https://web.developers.google.cn/static/articles/optimize-vitals-lighthouse/image/network-request-blocking-0af6598f53919.png?authuser=8&hl=fi)
我们可以右键点击开发者工具 Network 面板中的脚本,然后点击 Block Request URL
将其屏蔽。在这里,我们将对 Intersection Observer polyfill 执行此操作。
![在开发者工具中屏蔽请求网址](https://web.developers.google.cn/static/articles/optimize-vitals-lighthouse/image/block-request-urls-devto-6a1f372c47f8e.png?authuser=8&hl=fi)
接下来,我们可以重新运行 Lighthouse。这一次,我们可以看到,与总阻塞时间(400 毫秒 => 300 毫秒)一样,我们的性能得分也提高了 (70/100)。
![屏蔽开销大的网络请求之后的视图](https://web.developers.google.cn/static/articles/optimize-vitals-lighthouse/image/the-view-blocking-costl-dd077ef6d8454.png?authuser=8&hl=fi)
使用 Facade 取代昂贵的第三方嵌入
通常使用第三方资源将视频、社交媒体帖子或微件嵌入到网页中。默认情况下,大多数嵌入都会立即加载,并且可能会提供昂贵的载荷,从而对用户体验产生负面影响。如果第三方并不重要(例如,如果用户需要滚动屏幕才能看到该第三方),就会造成浪费。
提高此类 widget 性能的一种模式是在用户互动时延迟加载它们。这可以通过渲染 widget 的轻量级预览(立面)来实现,并且仅在用户与其交互时加载完整版本。Lighthouse 具有一项审核功能,旨在推荐可通过 Facade 延迟加载的第三方资源,例如 YouTube 视频嵌入。
![强调某些昂贵的第三方资源是可以替换的审核结果](https://web.developers.google.cn/static/articles/optimize-vitals-lighthouse/image/audit-highlighting-some-86a43248c5c98.png?authuser=8&hl=fi)
谨此提醒,Lighthouse 会突出显示会阻塞主线程超过 250 毫秒的第三方代码。这可能会公开各种类型的第三方脚本(包括由 Google 编写的脚本),如果它们呈现的内容需要滚动才能查看,那么它们可能值得更好地延迟或延迟加载。
![降低第三方 JavaScript 审核的成本](https://web.developers.google.cn/static/articles/optimize-vitals-lighthouse/image/reduce-cost-third-party-8400bcee48ab3.png?authuser=8&hl=fi)
超越 Core Web Vitals
除了突出显示核心网页指标之外,最新版本的 Lighthouse 和 PageSpeed Insights 还尝试提供具体指南,帮助您在启用源代码映射的情况下提高包含大量 JavaScript 内容的 Web 应用的加载速度。
这包括越来越多的审核来降低网页中 JavaScript 的成本,例如降低对提供用户体验并不需要的 polyfill 和重复项的依赖。
如需详细了解 Core Web Vitals 工具,请关注 Lighthouse 团队的 Twitter 账号和 DevTools 的新变化。
主打图片,由 Mercedes Mehling 在 Unshot 提供。