Adblock extensions affect CLS score

[yashok111]

Recently, I have detected dramatic growth of poor CLS scored desktop pages in Google Search Console. Tried to investigate and noticed that it happens only when you open a URL from another page (New Tab or Google search page) if you use the reload button from the Performance tab or Lighthouse there will be no layout shifts. Then I decided to disable my AdBlock extension and this strange layout shift disappeared. I have tested a couple of Adblocker and they are all producing large layout shifts for Performance however visually nothing is shifting. I know that you are not connected with Adblockers and etc but I think that you need to know about this strange behavior especially if it can affect the global score of the site performance in the eyes of Google Search.

List of tested Adblockers:

• https://chrome.google.com/webstore/detail/adblock-plus-free-ad-bloc/cfhdojbkjhnklbpkdaibdccddilifddb
• https://chrome.google.com/webstore/detail/adblock-%E2%80%94-best-ad-blocker/gighmmpiobklfepjocnamgkkbiglidom
• https://chrome.google.com/webstore/detail/adguard-adblocker/bgnkhhnnamicmpeenaelnjfhikgbkllg

Steps to reproduce:

Profile log example (tested page - https://www.powerthesaurus.org/): Profile-20200927T104459.json.zip

1. Install one of the Adblockers from the list
2. Open New Tab.
3. Start recording of Performance.
4. Navigate to any URL on https://www.powerthesaurus.org/
5. Stop recoding of Performance.
6. See the large layout shift right after server HTML downloaded.
7. Disable Adblocker and repeat.
8. See layout shift disappeared.

Others checks:

• Hydration Errors - log is clear.
• Localize potential error in code by wiping almost everything - no luck, layout shift is always presented.

Other notes:

• Layout shift occurs only on the desktop version according to Google Search Console, this indirectly confirms the problem with Adblockers

Environment Information

• Stack: React SSR + Apollo
• Affected Channels: DevTools
• Lighthouse version: -
• Chrome version: 85.0.4183.121 (Official Build) (64-bit)
• Node.js version: 14.8.0
• Operating System: macOS Version 10.15.6 (Build 19G2021)

[ElForastero]

I can confirm that the behavior is reproducible. I have followed the same steps and every time there was a strange CLS bottleneck.

Several times I had CLS notice with enabled desktop AdGuard application (https://adguard.com), but it's hard to reproduce. But with AdGuard as a Chrome Extension, there's always a CLS.

[patrickhulce]

Thanks for filing @yashok111! Very strange indeed and concerning that you see this in Search Console as well.

I can't reproduce this behavior locally with any of those extensions using stable or canary Chrome though :/

Does this layout shift occur on all pages equally or just yours? Any additional information you might have like a combination of extensions that might be affecting things or is this the only extension installed?

[yashok111]

Thank you @patrickhulce for the fast response!

"Any additional information you might have like a combination of extensions that might be affecting things or is this the only extension installed?" - All tests were in Incognito mode with only one adblocker louched.

"Does this layout shift occur on all pages equally or just yours?" - I have checked and shame to admit but it happens only with the desktop version of https://www.powerthesaurus.org/ 😞. I have tried to track down the issue in code but even with a blank page with one div with the text, I see this layout shift in Performance. I think it's maybe related to code split chunks of CSS but can't figure out why it affects CLS because in fact there no hydration errors which can lead to different HTML and the page looks exactly the same on the server and hydrated client.

"I can't reproduce this behavior locally with any of those extensions using stable or canary Chrome though :/" - very strange, I have double-checked on multiple devices and it's reproducible. Try to reload the browser completely after enabling of adblocker.

Hope I'll get the opportunity to invest more time in this investigation on the next weekend. I'll appreciate any suggestions on where to dig in on my code.

[yashok111]

Hello @patrickhulce ! Looks like I figure it out. Adblockers somehow affect the download of CSS chunks or events for counting CLS.

Here my notes: We include our CSS files through link tag in head like so.

This setup makes a layout shift. As you can see in the next screenshots, Layout Shift highlight moving of default margin of body (8px), but visually nothing is moved. Moved from:

Moved to

The solution is to inline all styles and layout shift disappears. Looks like Adblockers need time to check the styles and this causes the issue.

I don't know is it related to Lighthouse but I don't where to report this behavior. Hope my report will help.

[patrickhulce]

Ah thank you so much @yashok111 this is super helpful! We will look into it with the layout shift folks in Chromium 👍