Lighthouse Field数据很长时间没有更新,该怎么办? 屏幕尺寸 JavaScript布局引擎字体使用JavaScript跟踪实时数据

问题描述

由于错误的UX设计,我的CLS分数非常低。但是,我已经在一个月前解决了该错误

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

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

screenshot

解决方法

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

我不能害怕。

但是,如果您想实时查看您的“累积版式更改”数据(以发现任何问题/及早确认修复),则可以使用“网络生命周期库”-请参阅最后的第3级标题(“使用JavaScript跟踪实时数据”)。

这里到底发生了什么?

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

仅仅因为实验室测试得出的布局偏移为0并不意味着在现场就是这种情况。

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

因此,您可能会在页面的下方或在一段时间后发生问题,这些问题会导致版式转换发生,而自动化测试无法对此进行检测。

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

还请记住,现场数据是跨所有设备收集的。

可能的原因

以下是一些可能的原因:

屏幕尺寸

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

JavaScript布局引擎

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

请记住,如果您的最终用户使用的是较慢的计算机(台式机和移动设备),那么随着页面的绘制,巨大的JavaScript有效负载可能也会严重影响版式转换。

字体

字体交换会导致很多CLS问题,因为交换新字体会导致自动换行,从而更改容器的高度(如果宽度不固定/可变,则会改变宽度)。

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

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

此外,如果您使用的字体图标(如font-awesome),则这很可能是CLS的原因。如果这是原因,那么请使用嵌入式SVG。

确定问题

Here is a question(然后回答,因为没人回答我)我创建了如何识别CLS问题的方法。我对自己的问题的答案是识别我可以找到的问题的最有效方法,但是我仍然希望随着更多人习惯于更正CLS问题,有人会对我的答案有所改进。同样的原理也可以解决字体换行问题。

如果我怀疑此问题与JavaScript有关,则可以通过在Developer工具中更改CPU速度来发现这一点。

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

showing 6x slowdown location on the performance tab in developer tools

  1. 然后转到“渲染”选项卡,然后打开“绘画闪烁”,“版式转换区域”和“图层边框”。您可能需要使用下面板菜单栏左侧的3个垂直点启用“渲染”标签。

showing location of paint flashing,layout shift regions and layer borders in developer tools

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

那我是否必须等待28天才能查看是否已解决问题?

否,如果您在修复后的7天内观看自己的CLS评分,就会看到缓慢稳定的改善,因为“亏损”的人从28天的滚动平均值中消失了。

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

CLS的实际编号(屏幕截图中的0.19)可能要等到28天后才会更改,因此除非它向上跳,否则请忽略它。

使用JavaScript跟踪实时数据

您可能想签出web vitals library并实现自己的CLS(和其他关键指标)跟踪,这样您就可以拥有实时用户数据,而不必等待字段数据更新。 / p>

我自己才刚刚开始玩这个游戏,但到目前为止看来还挺简单的。我目前正在尝试为数据而不是Google Analytics(分析)实现自己的端点,以便可以控制实时数据。如果我在赏金用​​完之前得到了排序,我将相应地更新答案。

,

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

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

Chrome用户体验报告由真实的用户评估提供支持 从以下网站汇总的关键用户体验指标: 选择同步其浏览历史记录的用户尚未 设置同步密码,并启用使用情况统计报告

关于您为什么不对其进行更新的问题,并且在您的实验室数据中它具有0 cls,但在野外数据中它不相同,再次取决于各种因素。实验室数据基本上是在受控环境(主要是您的计算机)中运行报告,而现场数据是来自具有各种网络和设备的各种用户的汇总数据的结果,并且可能会不同除非您的目标受众使用的网络和设备与运行实验室报告的网络和设备类似。

通过searching webmasters forum,您几乎找不到类似的线程。