[Layout Shift Metrics] Does welcome popup impact CLS?

[Bella Gao]

Hi Google,

Our website has a welcome popup when customers visit the website at the first time.

It is a different layer from our main page layer. Does this popup impact CLS?

Looking forward to your feedback!

[Michal Mocny]

Adding and removing dom content does not itself cause layout shifts.  And, after users interact with the page (for example, to dismiss the popup), any shifts that happen within 500ms will be ignored from CLS.  But, the easiest way to know for sure is to just test the page and see!

If you use a lab tool like lighthouse / web page test / page speed insights, you will only automate and measure the loading portion of CLS without user interactions, so you won't know if the popup dismissal leads to layout shifts.  I think the best way to test CLS is to interact with the page and see what CLS is reported yourself.  You can use the Web Vitals Chrome Extension, or, try to use the Measure using JavaScript, perhaps just from the DevTools console.

--
You received this message because you are subscribed to the Google Groups "web-vitals-feedback" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web-vitals-feed...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web-vitals-feedback/cb5b13fb-5b35-43d4-a240-de81421a391an%40googlegroups.com.

[Lukas Cech]

I am facing a similar issue - Search Console is flagging all my pages with a CLS issue, because of Google's own Privacy Message (Adsense, GDPR) pop-up. 

So it seems this does impact CLS as that's the only CLS issue on all pages, see more here: https://support.google.com/adsense/thread/207167855?hl=en

[Barry Pollard]

Commented on the issue, but I see lots of other CLS as well as that (smaller for me) adsense one.

Repeating my answer here:

It's true that the consent dialog causes some layout shifts as the fonts load. This is an unfortunate fact of web fonts that is tricky to avoid (though there are newer ways of avoiding it: https://developer.chrome.com/blog/font-fallbacks/ and it would be nice if Adsense and/or Google Fonts used them by default, but they are very new so not surprising they are not used yet).

This is particularly apparent on smaller devices (as the shifts are a relatively larger part of the screen) and slow networks (as bigger chance font is not loaded) as used by Lighthouse for the mobile test. Note on the faster desktop test they is little to no layout shift.

I'm not able to get the 0.244 shift figure you got when I run this through PageSpeed Insights but appreciate it might be racy, but that seems VERY high to me for this issue.

You could try preconnecting to Google Fonts domains, to reduce the likelihood of this CLS happening:

<link href="https://fonts.googleapis.com" rel="preconnect">

<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>

However, there are MUCH larger layout shifts elsewhere in the page. I see shifts when the ad loads at the bottom of the page on mobile (ideally you should reserve space for this ad): https://web.dev/optimize-cls/#statically-reserve-space-for-the-ad-slot

If you scroll down fast I see large shifts when the car images lazy load. This is the biggest CLS on the entire page so should be tackled first.

So those are likely the real reasons you are failing CLSs, so you should concentrate on this, and then see if the Adsense issue, while frustrating, is small enough, and rare enough, to not actually be much of an issue.

To view this discussion on the web visit https://groups.google.com/d/msgid/web-vitals-feedback/15458df2-ea88-4dff-8196-ad887b30cb29n%40googlegroups.com.

[Lukas Cech]

thanks for pointing out it's the fonts! I have changed the style of the privacy box through it's Adsense settings to use my website's fonts and it's now less of an issue. (I can't change some paragraphs fonts, guess that's why). 

Will preconnect too, thanks!