Lighthouse Field 数据很长时间没有更新，我该怎么办? [英] Lighthouse Field data is not updated for a very long time, what should I do?
问题描述
由于错误的用户体验设计，我的 CLS 分数非常低.但是，我在一个多月前修复了这个错误.
但现场数据仍未更新.
我应该怎么做才能强制更新 Field 数据?
如何强制更新 Field 数据?
你不能害怕.
但是，如果您想实时查看累积布局偏移数据(以发现任何问题/尽早确认修复)，您可以使用网络生命体征库"；- 请参阅本答案末尾的最终 3 级标题(使用 JavaScript 跟踪实时数据").
这里到底发生了什么?
现场数据是按 28 天滚动计算的，因此如果您在一个月前进行了更改问题仍然存在.
仅仅因为实验室测试产生 0 累积布局偏移并不意味着在该领域就是这种情况.
在字段数据中，计算(并累积)累积布局偏移 (CLS) 直到页面达到卸载.(
- 然后去渲染"选项卡并打开Paint Flashing"、Layout Shift Regions"和层边界".您可能必须启用渲染"功能.使用下面板菜单栏左侧的 3 个垂直点下拉选项卡.
- 现在重新加载您的页面，并在您开始浏览页面时查找任何问题.密切注意任何蓝色闪烁，因为它们突出显示已移动的项目.我发现一旦我发现潜在的转变，单独打开和关闭前两个选项并重复操作是很有用的，因为有时布局转变不像重绘那么明显，但两者一起可能会令人困惑.
那么我是否必须等待 28 天才能确定问题是否已解决?
不，如果您在修复后大约 7 天内观察您的 CLS 分数，您会看到缓慢而稳定的改进，因为人们处于红色"状态.从滚动的 28 天平均值中消失.
如果 7 天后，您在红色区域中的百分比从 22% 降至 18% 以下，那么您很有可能已经解决了问题(您还会看到橙色区域"中的人出现类似的下降).
实际 CLS 数字(屏幕截图中的 0.19)可能要在 28 天后才会改变，因此请忽略这一点，除非它向上跳.
使用 JavaScript 跟踪实时数据
您可能想要查看 网络生命体征库 并实施您自己的 CLS 跟踪(和其他关键指标)，这样您就可以获得实时用户数据，而无需等待字段数据更新.
我自己才刚刚开始玩这个，但到目前为止它似乎很简单.我目前正在尝试为数据而不是 Google Analytics 实现我自己的端点，以便我可以控制实时数据.如果我在赏金用完之前得到排序，我会相应地更新答案.
Due to a wrong UX design, I have got a very low CLS score. However, I have fixed the mistake over a month ago.
But the Field Data still remains not updated.
What should I do to force update the Field data?
What should I do to force update the Field data?
You can't I am afraid.
However if you want to see your Cumulative Layout Shift data in real time (to catch any problems / confirm fixes early) you can use the "web vitals library" - please see the final level 3 heading ("Tracking using JavaScript for real time data") at the end of this answer.
What is actually going on here?
Field data is calculated on a 28 day rolling basis, so if you made the change over a month ago the problem still persists.
Just because the lab tests yield a 0 cumulative layout shift does not mean that that is the case in the field.
In field data the Cumulative Layout Shift (CLS) is calculated (and accumulates) until the page reaches unload. (See this answer from Addy Osmani, who works at Google on Lighthouse, the engine behind Page Speed Insights).
Because of this you could have issues further down the page or that occur after an amount of time that would cause a layout shift to occur that would not be picked up by automated tests.
This means that if layout shifts occur once you scroll the page (due to lazy loading not working effectively for example) it will start affecting the CLS field data.
Also bear in mind that field data is collected across all devices.
Probable Causes
Here are a couple of probable causes:
Screen sizes
Just because the site doesn't show a CLS on the mobile and desktop sizes that Page Speed Insights uses does not mean that CLS does not occur at different sizes. It could be that tablets or certain mobile screen widths cause an item to "jump around" the screen.
JavaScript layout engines
Another possible causes is using JavaScript for layout. Looking at your "Time to interactive" and "total blocking time" I would guess your site is using JavaScript for layout / templating (as they are both high indicating a large JavaScript payload).
Bear in mind that if your end users are on slower machines (both desktop and mobile) then a huge JavaScript payload may also be having a severe effect on layout shifts as the page is painted.
Fonts
Font swapping causes a lot of CLS issues as a new font is swapped in it can cause word wrapping to change and therefore change the height (and width if the width is not fixed / fluid) of containers.
If for some reason your font is slow to load in or is very late in the load order this could be causing large CLS.
Yet again this is likely to be on slower connections such as 4G where network latency can cause issues. Automated tests may not pick this up as they throttle loading based on a simulation (via an algorithm), rather than applying throttling (actually applying latency and throughput slowdown) to each request.
Additionally if you are using font-icons such as font-awesome then this is a highly probable cause of CLS. If this is the cause then use inline SVGs instead.
Identifying the issue
Here is a question (and answer as nobody answered me) I created on how to identify problems with CLS. The answer I gave to my own question was the most effective way to identify the problem I could find, however I am still hopeful someone will improve upon my answer as more people get used to correcting CLS issues. The same principle would work for finding font word-wrapping issues.
If the issue is JavaScript related as I suspect then changing the CPU slowdown in Developer tools will allow you to spot this.
- Go to Developer Tools -> Performance -> Click the "gear" icon if needed on the top right -> "CPU". Set it to 6x slowdown.
- Then go to the "rendering" tab and switch on "Paint Flashing", "Layout Shift Regions" and "Layer borders". You may have to enable the "rendering" tab using the 3 vertical dots drop down to the left of the lower panel menu bar.
- Now reload your page and look for any issues as you start navigating the page. Keep a close eye out for any blue flashes as they are highlighting items that were shifted. I have found that once I spot a potential shift it is useful to toggle the first two options on and off individually and repeat the action as sometimes layout shifts are not as noticeable as repaints but both together can be confusing.
So do I have to wait 28 days to see if I have fixed the problem?
No, if you watch your CLS score for about 7 days after a fix you will see a slow and steady improvement as people "in the red" disappear from the rolling 28 day average.
If your percentage in the red drops from 22% to below 18% after 7 days then the odds are you have fixed the issue (you would also see a similar drop for people "in the orange").
The actual CLS number (0.19 in your screenshot) may not change until after 28 days so ignore that unless it jumps upwards.
Tracking using JavaScript for real time data
You may want to check out The web vitals library and implement your own tracking of CLS (and other key metrics), this way you can have real-time user data instead of waiting for the Field Data to update.
I have only just started playing with this myself but so far it seems pretty straight forward. I am currently trying to implement my own end-point for the data rather than Google Analytics so I can have real time data under my control. If i get that sorted before the bounty runs out I will update the answer accordingly.
这篇关于Lighthouse Field 数据很长时间没有更新，我该怎么办?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
