Lighthouse Field 数据长时间不更新,怎么办?

Lighthouse Field data is not updated for a very long time, what should I do?

由于错误的用户体验设计,我的 CLS 分数很低。但是,我已经在一个多月前修复了这个错误。

但是字段数据仍然没有更新。

我应该怎么做才能强制更新字段数据?

What should I do to force update the Field data?

我不确定您是否可以做任何事情来更改此数据,因为此数据是根据 Chrome 用户体验报告 收集的,如前所述 here:

The Chrome User Experience Report is powered by real user measurement of key user experience metrics across the public web, aggregated from users who have opted-in to syncing their browsing history, have not set up a Sync passphrase, and have usage statistic reporting enabled

关于你为什么不更新它的问题,在你的实验室数据中它有 0 cls 但在现场数据中它不一样,同样取决于多种因素。实验室数据基本上是 运行 受控环境(主要是您的机器)中的报告,而现场数据是 聚合数据 的结果,这些数据来自具有各种网络和设备的各种用户以及移动设备他们可能与您不同,除非您的目标受众使用与实验室报告 运行.

相似的网络和设备

您可以通过 searching webmasters forum 找到几个相似的帖子。

我应该怎么做才能强制更新字段数据?

恐怕不行

但是,如果您想实时查看累积布局偏移数据(以发现任何问题/及早确认修复),您可以使用“web vitals library”——请参阅最终的第 3 级标题(“跟踪使用JavaScript 用于实时数据”)在此答案的末尾。

这里到底发生了什么?

字段数据是按 28 天滚动计算的,因此如果您在一个多月前进行更改问题仍然存在。

仅仅因为实验室测试产生 0 累积布局偏移并不意味着现场就是这种情况。

在字段数据中,计算(并累积)累积布局偏移 (CLS) 直到页面卸载。 (See this answer from Addy Osmani,在 Google 的 Lighthouse 工作,Lighthouse 是 Page Speed Insights 背后的引擎)。

因此,您可能会在页面下方遇到问题,或者在一段时间后发生问题,这会导致发生布局偏移,而自动测试不会发现这些问题。

这意味着如果在滚动页面后发生布局偏移(例如由于延迟加载无法有效工作),它将开始影响 CLS 字段数据。

另请记住,现场数据是通过所有设备收集的。

可能的原因

以下是几个可能的原因:

屏幕尺寸

仅仅因为网站没有在 Page Speed Insights 使用的移动和桌面尺寸上显示 CLS,并不意味着 CLS 不会出现在不同的尺寸上。可能是平板电脑或某些移动屏幕宽度导致项目在屏幕上“跳来跳去”。

JavaScript 布局引擎

另一个可能的原因是使用 JavaScript 进行布局。查看您的“交互时间”和“总阻塞时间”,我猜您的网站正在使用 JavaScript 进行布局/模板化(因为它们都很高,表明 JavaScript 负载很大)。

请记住,如果您的最终用户使用较慢的机器(台式机和移动设备),那么巨大的 JavaScript 有效负载也可能对页面绘制时的布局变化产生严重影响。

字体

字体交换会导致很多 CLS 问题,因为在其中交换新字体会导致自动换行发生变化,从而改变容器的高度(以及宽度,如果宽度不固定/不固定的话)。

如果由于某种原因您的字体加载缓慢或加载顺序非常晚,这可能会导致较大的 CLS。

再一次,这很可能是在较慢的连接上,例如 4G,网络延迟可能会导致问题。自动化测试可能无法识别这一点,因为它们基于模拟(通过算法)限制加载,而不是对每个请求应用 限制(实际上应用延迟和吞吐量降低)。

此外,如果您正在使用 font-icons,例如 font-awesome,那么这很可能是导致 CLS 的原因。如果这是原因,请改用内联 SVG。

确定问题

Here is a question(没人回答我的回答)我创建了如何识别 CLS 的问题。我对自己的问题给出的答案是确定我能找到的问题的最有效方法,但是我仍然希望随着越来越多的人习惯于纠正 CLS 问题,有人会改进我的答案。同样的原则也适用于查找字体 word-wrapping 问题。

如果我怀疑该问题与 JavaScript 相关,那么更改开发人员工具中的 CPU 减速将使您能够发现这一点。

  1. 转到开发人员工具 -> 性能 -> 如果需要,单击右上角的“齿轮”图标 -> “CPU”。将其设置为 6 倍减速。

  1. 然后转到“渲染”选项卡并打开“Paint Flashing”、“Layout Shift Regions”和“Layer borders”。您可能必须使用下方面板菜单栏左侧的 3 个垂直点下拉菜单来启用“渲染”选项卡。

  1. 现在重新加载您的页面并在您开始浏览页面时查找任何问题。密切注意任何蓝色闪光,因为它们突出显示已移动的项目。我发现,一旦我发现潜在的变化,单独打开和关闭前两个选项并重复操作是很有用的,因为有时布局变化不如重绘那么明显,但两者一起可能会造成混淆。

所以我是否必须等待 28 天才能看到我是否已解决问题?

不,如果您在修复后观察您的 CLS 分数大约 7 天,您会看到缓慢而稳定的改善,因为“处于红色”的人从滚动的 28 天平均值中消失。

如果您的红色百分比在 7 天后从 22% 下降到 18% 以下那么很可能你已经解决了这个问题(对于“橙色”的人你也会看到类似的下降)。

实际的 CLS 数字(在您的屏幕截图中为 0.19)可能要到 28 天后才会改变,所以请忽略它,除非它向上跳跃

使用 JavaScript 跟踪实时数据

您可能想要查看 web vitals library 并实施您自己的 CLS(和其他关键指标)跟踪,这样您就可以获得 real-time 用户数据,而不是等待字段数据待更新。

我自己才刚刚开始玩这个,但到目前为止它看起来很简单。我目前正在尝试为数据实施我自己的 end-point 而不是 Google 分析,这样我就可以控制实时数据。如果我在赏金用​​完之前解决了这个问题,我会相应地更新答案。