Web Vitals-网页速度优化

此扩展测量 Core Web Vitals,提供有关加载、交互性和布局转换指标的即时反馈。它与 Chrome 衡量这些指标并报告给其他 Google 工具(例如 Chrome 用户体验报告、页面速度洞察、搜索控制台)的方式一致。

插件简介

Web Vitals 是在 Web (https://web.dev/vitals) 上提供出色 UX 的关键质量信号。此扩展测量 Core Web Vitals,提供有关加载、交互性和布局转换指标的即时反馈

Web Vitals-网页速度优化插图

插件安装

方法一:.crx文件格式插件安装

  1.首先用户点击谷歌浏览器右上角的自定义及控制按钮,在下拉框中选择设置。

  2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序或直接输入:chrome://extensions/

  3.找到自己已经下载好的Chrome离线安装文件xxx.crx,然后将其从资源管理器中拖动到Chrome的扩展管理界面中,这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。

  4.松开鼠标就可以把当前正在拖动的插件安装到谷歌浏览器中去,但是谷歌考虑用户的安全隐私,在用户松开鼠标后还会给予用户一个确认安装的提示。

  5.用户这时候只需要点击添加按钮就可以把该离线Chrome插件安装到谷歌浏览器中去,安装成功以后该插件会立即显示在浏览器右上角(如果有插件按钮的话),如果没有插件按钮的话,用户还可以通过Chrome扩展管理器找到已经安装的插件。

方法二:文件夹格式插件安装

  1.首先用户点击谷歌浏览器右上角的自定义及控制按钮,在下拉框中选择设置。

  2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序。

  3.勾选开发者模式,点击加载已解压的扩展程序,将文件夹选择即可安装插件。

注意:最新版本的chrome浏览器直接拖放安装时会出现“程序包无效CRX-HEADER-INVALID”的报错信息,参照这篇文章即可解决

Web Vitals-网页速度优化插图1

插件功能介绍

1) Ambient Badge - 这有助于检查页面是否通过了 Core Web Vitals 阈值。

安装后,扩展程序将显示禁用状态徽章图标,直到您导航到 URL。此时,它将根据 URL 是否通过 Core Web Vitals 指标阈值将标志更新为绿色或红色。

徽章有多种状态:

* 禁用 - 灰色
* 通过 - 绿色
* 一个或多个指标失败 - 红色

如果一个或多个指标失败,徽章将动画显示这些指标的值。

2)弹出窗口中的详细钻取

单击环境标志图标将允许您深入了解各个指标值。在此模式下,扩展程序还将说明指标值是否可能更改或需要用户操作。

例如,First Input Delay 需要与页面进行真正的交互(例如单击/点击),并且在出现这种情况之前将处于等待输入状态。我们建议查阅有关 LCP、CLS 和 FID 的 web.dev 文档,以了解指标值何时确定。

从版本 1.0.0 开始,弹出窗口通过 Chrome UX Report (CrUX) API 将您的本地 Core Web Vitals 体验与来自现场的真实用户数据相结合。这种集成为您提供上下文洞察,帮助您了解您的个人体验与同一页面上的其他桌面用户的相似程度。如果需要,我们还添加了一个新选项“将本地体验与电话现场数据进行比较”。请注意,某些页面可能无法使用 CrUX 数据,在这种情况下,我们会尝试为整个源加载字段数据。

3)HUD叠加

叠加层会显示一个平视显示器 (HUD),它叠加在您的页面上。如果您需要在开发期间持续查看 Core Web Vitals 指标,这将非常有用。要启用覆盖:

右键单击环境标志并转到选项。
选中显示 HUD 覆盖并单击“保存”
重新加载要测试的 URL 的选项卡。现在应该存在叠加层。

Web Vitals-网页速度优化插图2

插件使用方法

1、Google 提供了一个小而美 npm 包:web-vitals,

2、在最近的 create-react-app 脚手架已经包含 web-vitals,主要代码是:

 

Web Vitals-网页速度优化插图3

3、如果你要测量任何受支持的指标,只需将函数传递到 index.js 中的 reportWebvitals 函数中:

Web Vitals-网页速度优化插图4

4、当指标的最终值在页面上完成计算时,将触发此函数。我们就可以通过它将结果记录到控制台或发送到特定端点。

Web Vitals插件下载地址
Web Vitals-网页速度优化插图5
©下载资源版权归作者所有;本站所有资源均来源于网络,仅供学习使用,请支持正版!

发表评论