如果 Page Speed Insights 说一件事而 Search Console 说另一件事，如何找到累积布局偏移问题 [英] How to find Cumulative Layout Shift problems if Page Speed Insights says one thing and Search Console says another

问题描述

随着累积布局偏移 (CLS) 现在成为 Page Speed Insights (PSI) 和 Google Search Console (GSC) 的标准，我想知道如果 PSI 返回 0 值但字段数据返回，应该使用什么方法来识别 CLS高价值.

With Cumulative Layout Shift (CLS) now a criteria of Page Speed Insights (PSI) and Google Search Console (GSC) I was wondering what method should be used in order to identify CLS if PSI returns a 0 value but Field Data returns a high value.

例如，根据 Search Console，我有一个页面在 PSI 上的得分为 0，但桌面版的 CLS 得分为 0.99(移动版为 0).

For example I have a page that scores 0 on PSI but gets 0.99 CLS for desktop (0 for mobile) according to Search Console.

使用开发人员工具，我尝试打开油漆闪烁并打开布局移位区域，但仍然得到 0 移位，而现场数据显示为 0.99.

Using Developer Tools I tried switching on paint flashing and switched on layout shift regions but still get 0 shift, whereas field data says 0.99.

那么您如何使用开发人员工具确定导致布局偏移的原因?

So how do you identify what is causing a Layout Shift using developer tools?

推荐答案

所以由于没有人回答这个问题，我将记下我所做的，这可能不是最好的方法，所以请记住这一点！

So as nobody has answered this I will put down what I did, it may not be the best way to do it so bear that in mind!

我打开了开发工具并在网络速度下设置了一个新的配置文件，其中延迟为 1000 毫秒，速度为 50kb/s.(在禁用缓存"旁边显示在线"的地方，单击那里并转到自定义">添加...").

I opened dev tools and setup a new profile under network speed where the latency was 1000ms and the speed to 50kb/s. (where it says "online" next to "disable cache", click there and go to "Custom > "Add...").

这有效地让您有时间查看资源加载时页面上发生的情况.

This effectively gives you time to see what is happening on a page as resources load in.

然后我去了渲染"选项卡并打开Paint Flashing"、Layout Shift Regions"和图层边界"

I then went to the "rendering" tab and switched on "Paint Flashing", "Layout Shift Regions" and "Layer borders"

然后我只是看着页面加载，这种人为的减速就位.

I then just watched the page load with this artificial slow down in place.

这样做很明显，我通过 AJAX 加载了一个侧边菜单，但是当它加载时，由于它的边框，它太宽了大约 1px，所以它使整个主要部分向左移动了一点点.

It was immediately obvious doing this that I had a side menu loading in via AJAX but when it loaded it was about 1px too wide due to a border on it so it made the whole main section shift to the left a tiny bit.

用肉眼无法注意到，但使用上述方法确实很明显.这在自动化测试中没有发生，因为它是(某种程度上)浏览器中的一种竞争条件，它依赖于加载顺序(对脚本使用异步，因为我在旁边进行其他操作)并且 PSI 是一致的.

Impossible to notice with the naked eye but really obvious with the above method. This didn't happen on the automated tests as it was (sort of) a race condition in a browser that depended on load order (using async for scripts as I do other manipulation on the aside) and PSI was consistent.

我希望这对某人有所帮助，直到有人想出更好的方法来确定布局偏移的根本原因.

I hope this helps someone until someone comes up with a better way of identifying the root cause of a Layout Shift.

正如评论中所指出的，请确保您也在不同的屏幕尺寸下进行测试.

As pointed out in the comments make sure you test at different screen sizes as well.

这篇关于如果 Page Speed Insights 说一件事而 Search Console 说另一件事，如何找到累积布局偏移问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！