第三方Chrome扩展是否会影响网站的累积布局偏移（CLS）？
假设我有一个名为“示例网站”的网站，其中有很多段落。如下所示的图像
现在假设那里有一个Chrome扩展名，它在我的页面中注入了一些图像。这些图像无需任何动画即可插入，从而在我的网页中引起了非常糟糕的布局变化。这是扩展程序插入图像之后的页面的样子。
那么，这是我的问题，
- 这是由第三方扩展引起的布局变化会影响我网站上的CLS吗？
- 作为Web应用程序的开发人员，我该怎么办，以防止此类扩展在我的网站中引起布局变化？
- 作为Chrome Extension开发人员，我该怎么办才能不影响任何其他网站的CL？
Let's say I have a website called "Example Website", and it has a bunch of paragraphs in it. Something like the image shown below
Now assume that there is a chrome extension out there which injects some images inside my page. These images are inserted without any animations whatsoever, causing a pretty bad layout shift in my web page. Here is what the page looks like after the extension has inserted the images.
So here are my questions,
- Does the layout shift caused by this third party extension affect the CLS in my website?
- What can I do as the developer of a web application to prevent such extensions from causing layout shift in my website?
- What can I do as a chrome extension developer to not affect any other website's CLS?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
简短的答案
是，如果扩展会导致布局变化，则会影响CLS。
您无能为力地停止影响您的CL的扩展。
如果要构建扩展名，则可以通过使用不会更改文档流量的定位（在可能的情况下）来限制由于扩展而引起的CLS问题。
最重要的是...不必担心太多，它是非常您不太可能导致或让某人扩展会导致任何会影响您的SEO努力等的CLS问题。
更长的答案
是由第三方扩展引起的布局班次会影响我的网站中的CL？
是的！
如果您使用
performance-observer在您的页面上（与构建的关键数据相同的API）以测量布局变化，您会看到这些确实有助于您的CLS。尚不清楚的（据我所知）是Google是否对此进行了考虑，并在用于核心Web Vitals（CWV）的数据集上考虑了安装的扩展。
这就是为什么每当您运行时/developer.chrome.com/docs/devtools/evaluate-performance/#record“ rel =“ nofollow noreferrer”>性能跟踪在您的浏览器中，您应该始终走“ Incognito”，因此扩展不会影响得分。
作为Web应用程序的开发人员，我该怎么办，以防止此类扩展在我的网站中引起布局变化？
很少！
扩展在您的站点控制之外运行。即使您尝试使用内容安全策略来限制脚本插入（或类似），也将被忽略。
您可以尝试使用服务工作者收听请求，拥有脚本的白名单，然后删除或拦截任何不匹配的请求（我不知道这甚至不适合扩展FYI，只是我头顶的想法！）。
但是那时（假设它有效）您创造了一个更糟糕的UX问题...您打破了我想用作最终用户的扩展名，我会很生气。
黄金法则是遵循CWV作为指导...永远不要做任何伤害用户体验的事情，只是为了取悦Google！
作为Chrome Extension开发人员，我该怎么办才能不影响任何其他网站的CL？
不将任何内容插入文档流中。
因此，使您的元素出现在一个
位置的容器中：固定例如（或任何不影响原始文档布局的位置）。除此之外，我认为您几乎没有选择，因为通常希望该页面在干扰扩展程序之前加载。
真正的问题是...实际上是一个问题吗？
我会说不是。
如果您的扩展名导致布局变化，则用户期望这一点，因此您不必担心那里。
就您的网站性能和CWV而言，...除非您的用户群中很大一部分都使用不当行为的扩展名，这恰好导致大规模布局变化，您甚至不会注意到！
想象一下，不太可能的“最坏情况”情况：由于扩展，您的用户群中有10％的CLS得分为1（这将是一个完整的页面变化！）。
假设您的网站没有布局偏移（CLS得分为0），那么您仍然只有CLS平均0.1，这仍然是“良好”评级（仅）。
然后考虑一下CLS仅占Web Vitals评分的一小部分，而Web Vitals评分只是您SEO分数的一小部分...您会发现它是非常，您的不太可能很可能会看到任何负面影响。
Short Answer
Yes, extensions do affect CLS if they cause layout shifts.
There is nothing practical that you could do to stop an extension affecting your CLS.
If you are building an extension, you can limit CLS issues caused by your extension by using positioning that does not change the document flow (where possible).
And above all...don't worry about it too much, it is very unlikely you will ever cause or have someone's extension cause any CLS issues that will affect your SEO efforts etc.
Longer Answer
Does the layout shift caused by this third party extension affect the CLS in my website?
Yes!
If you use
performance-observeron your page (which is the same API the CrUX data is built with) to measure layout shifts, you will see that these do contribute to your CLS.What is not clear (or disclosed as far as I am aware) is whether Google have thought of this and take installed extensions into account on the data set they use for Core Web Vitals (CWV).
This is why whenever you run Google Lighthouse or a Performance Trace in your browser you should always go "incognito", so extensions do not affect your score.
What can I do as the developer of a web application to prevent such extensions from causing layout shift in my website?
Very little!
Extensions operate outside of your site control. Even if you tried to use Content Security Policy to limit script insertion (or similar) it is ignored.
You could try listening for requests using a service worker, have a whitelist of scripts, then delete or intercept any that do not match (I have no idea if this would even work for an extension FYI, just a thought off the top of my head!).
But at that point (assuming it works) you have created a far worse UX problem...you broke an extension I want to use as an end user and I will be annoyed.
The golden rule is to follow CWV as a guide...never do anything that hurts User eXperience just to please Google!
What can I do as a chrome extension developer to not affect any other website's CLS?
Not insert anything within the document flow.
So make your elements appear inside a container that is
position: fixedfor example (or any positioning that does not affect the original document's layout).Other than that, yet again, I think you have very few options as you would normally want the page to have loaded before interfering with an extension.
The real question is...is it actually a problem?
I would argue it isn't.
If your extension causes layout shifts then a user is expecting that, so there is nothing you need to worry about there.
In terms of your site performance and CWV...unless a large proportion of your user base are using a misbehaving extension that happens to cause massive layout shifts you will not even notice!
Imagine a very unlikely "worst case" scenario: 10% of your userbase get a CLS score of 1 (which would be a complete page shift!) due to an extension.
Assuming your site has no layout shifts (CLS score of 0), then you will still only have a CLS average of 0.1 and that would still be a "good" rating (only just).
Then consider that CLS only makes up a small percentage of Web vitals scoring, and that web vitals scoring is only a small part of your SEO score...and you will see that it is very unlikely that you will see any negative impact.