第三方 chrome 扩展是否会影响网站的 Cumulative Layout Shift (CLS)？
Does a third party chrome extension affects a website's Cumulative Layout Shift (CLS)?
假设我有一个名为“示例网站”的网站，其中有很多段落。如下图所示
现在假设有一个 chrome 扩展程序可以在我的页面中注入一些图像。这些图像插入时没有任何动画，导致我的网页布局发生非常糟糕的变化。这是扩展程序插入图片后页面的样子。
所以这是我的问题，
- 此第三方扩展引起的布局偏移是否会影响我网站中的 CLS？
- 作为 Web 应用程序的开发人员，我可以做些什么来防止此类扩展导致我的网站布局发生变化？
- 作为 chrome 扩展开发人员，我可以做些什么才能不影响任何其他网站的 CLS？
简答
是的，如果扩展导致布局偏移，它们确实会影响 CLS。
您无法停止影响您的 CLS 的扩展程序。
如果您正在构建一个扩展，您可以通过使用不改变文档流的定位（如果可能）来限制由您的扩展引起的 CLS 问题。
最重要的是......不要太担心，非常你不太可能导致或让某人的延期导致任何影响你的 CLS 问题SEO 努力等
更长的答案
此第三方扩展引起的布局偏移是否会影响我网站中的 CLS？
是的！
如果您在页面上使用 performance-observer（与 API 构建 CrUX 数据所用的相同）来衡量布局变化，您会发现这些确实有助于您的 CLS。
不清楚（或据我所知已披露）的是 Google 是否考虑过这一点并在它们用于核心网络生命 (CWV) 的数据集上考虑了已安装的扩展。
这就是为什么无论何时您 运行 Google Lighthouse or a Performance Trace 在您的浏览器中，您都应该始终“隐身”，这样扩展不会影响您的分数。
作为 Web 应用程序的开发人员，我可以做些什么来防止此类扩展导致我的网站布局发生变化？
很少！
扩展程序在您的站点控制之外运行。即使您尝试使用内容安全策略来限制脚本插入（或类似的），它也会被忽略。
您可以尝试使用 service worker 来监听请求，有一个脚本白名单，然后删除或拦截任何不匹配的（我不知道这是否适用于扩展仅供参考，只是想一想我的头顶！）。
但到那时（假设它有效）你造成了一个更糟糕的用户体验问题......你破坏了我想作为最终用户使用的扩展，我会很生气。
黄金法则是以 CWV 为指导...永远不要为了取悦而做任何损害用户体验的事情 Google！
作为 chrome 扩展开发人员，我可以做些什么才能不影响任何其他网站的 CLS？
不在文档流中插入任何内容。
因此，让您的元素出现在容器内，例如 position: fixed（或任何不影响原始文档布局的定位）。
除此之外，我认为您的选择很少，因为您通常希望在干扰扩展之前加载页面。
真正的问题是……这真的是个问题吗？
我认为不是。
如果您的扩展程序导致布局偏移，那么用户会预料到这一点，因此您无需为此担心。
就您的网站性能和 CWV 而言...除非您的用户群中有很大一部分使用了行为不当的扩展程序，而这种扩展程序恰好会导致大规模的布局变化，您甚至不会注意到！
想象一个不太可能出现的“最坏情况”场景：由于扩展，您的用户群中有 10% 的 CLS 得分为 1（这将是一个完整的页面转换！）。
假设您的网站没有布局变化（CLS 分数为 0），那么您的 CLS 平均值仍然只有 0.1，这仍然是一个“好”评级（只是刚刚好）。
然后考虑 CLS 仅占 Web Vitals 得分的一小部分，而 Web Vitals 得分仅占您的 SEO 得分的一小部分......您会发现它 非常 您不太可能会看到任何负面影响。
假设我有一个名为“示例网站”的网站，其中有很多段落。如下图所示
现在假设有一个 chrome 扩展程序可以在我的页面中注入一些图像。这些图像插入时没有任何动画，导致我的网页布局发生非常糟糕的变化。这是扩展程序插入图片后页面的样子。
所以这是我的问题，
- 此第三方扩展引起的布局偏移是否会影响我网站中的 CLS？
- 作为 Web 应用程序的开发人员，我可以做些什么来防止此类扩展导致我的网站布局发生变化？
- 作为 chrome 扩展开发人员，我可以做些什么才能不影响任何其他网站的 CLS？
简答
是的，如果扩展导致布局偏移，它们确实会影响 CLS。
您无法停止影响您的 CLS 的扩展程序。
如果您正在构建一个扩展，您可以通过使用不改变文档流的定位（如果可能）来限制由您的扩展引起的 CLS 问题。
最重要的是......不要太担心，非常你不太可能导致或让某人的延期导致任何影响你的 CLS 问题SEO 努力等
更长的答案
此第三方扩展引起的布局偏移是否会影响我网站中的 CLS？
是的！
如果您在页面上使用 performance-observer（与 API 构建 CrUX 数据所用的相同）来衡量布局变化，您会发现这些确实有助于您的 CLS。
不清楚（或据我所知已披露）的是 Google 是否考虑过这一点并在它们用于核心网络生命 (CWV) 的数据集上考虑了已安装的扩展。
这就是为什么无论何时您 运行 Google Lighthouse or a Performance Trace 在您的浏览器中，您都应该始终“隐身”，这样扩展不会影响您的分数。
作为 Web 应用程序的开发人员，我可以做些什么来防止此类扩展导致我的网站布局发生变化？
很少！
扩展程序在您的站点控制之外运行。即使您尝试使用内容安全策略来限制脚本插入（或类似的），它也会被忽略。
您可以尝试使用 service worker 来监听请求，有一个脚本白名单，然后删除或拦截任何不匹配的（我不知道这是否适用于扩展仅供参考，只是想一想我的头顶！）。
但到那时（假设它有效）你造成了一个更糟糕的用户体验问题......你破坏了我想作为最终用户使用的扩展，我会很生气。
黄金法则是以 CWV 为指导...永远不要为了取悦而做任何损害用户体验的事情 Google！
作为 chrome 扩展开发人员，我可以做些什么才能不影响任何其他网站的 CLS？
不在文档流中插入任何内容。
因此，让您的元素出现在容器内，例如 position: fixed（或任何不影响原始文档布局的定位）。
除此之外，我认为您的选择很少，因为您通常希望在干扰扩展之前加载页面。
真正的问题是……这真的是个问题吗？
我认为不是。
如果您的扩展程序导致布局偏移，那么用户会预料到这一点，因此您无需为此担心。
就您的网站性能和 CWV 而言...除非您的用户群中有很大一部分使用了行为不当的扩展程序，而这种扩展程序恰好会导致大规模的布局变化，您甚至不会注意到！
想象一个不太可能出现的“最坏情况”场景：由于扩展，您的用户群中有 10% 的 CLS 得分为 1（这将是一个完整的页面转换！）。
假设您的网站没有布局变化（CLS 分数为 0），那么您的 CLS 平均值仍然只有 0.1，这仍然是一个“好”评级（只是刚刚好）。
然后考虑 CLS 仅占 Web Vitals 得分的一小部分，而 Web Vitals 得分仅占您的 SEO 得分的一小部分......您会发现它 非常 您不太可能会看到任何负面影响。