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?
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.