Bypassing Cookie Consent Banners in Lighthouse and WebPageTest

When it comes to testing pages using Lighthouse, WebPageTest, or other similar tools, cookie consent banners often pose a problem.

Consent Management Platforms (CMP) can cause layout shifts (which contribute to CLS). On mobile, the banner is sometimes even detected as the main element for the Largest Contentful Paint (LCP), visually obscuring other parts of the page, and if implemented correctly, only certain resources on the page will be loaded.

When analyzing sites, one of my first steps is to find ways to bypass these consent banners to get a more complete view of the page's performance as close to real users as possible.

This article addresses some of the performance issues related to consent banners, how to bypass them, and the method to determine which cookies or localStorage elements need to be set to bypass them.

The Challenges of Cookie Banners

Layout Shift, or CLS

Some banners appear at the top of the page, before the rest of the content. If the banner is inserted after the page rendering starts, all the initial content of the page will jump down.

In the filmstrip of twitch.tv, a layout shift of 0.126 can be observed around 4.0s when the CMP is displayed.

To avoid such issues, the banner's code needs to be in the initial DOM of the page, and the display condition should be calculated before the initial rendering of the page.

Another option to avoid such problems is to display the consent banner above the page content, in a pop-up that obscures the rest of the page content, making the user's choice mandatory to access the page content. This trick also maximizes the click-through rate of CMPs.

The Largest Contentful Paint, or LCP

On certain pages, especially on mobile, the cookie consent banner is detected as the LCP. This type of behavior can severely skew your site's performance metrics.

An example on the site allianz.fr under OneTrust, where the LCP (highlighted in red) is triggered when the cookie banner is displayed.

It is important to test different page templates. On some pages, the LCP is indeed the main image of the page as seen in the previous capture.

Testing the INP

Since the March 2024 update, Interaction to Next Paint (INP) is a core web vital in its own right. When testing your INP with a tool like DebugBear INP Tester, the measurements can be misled by the absence of activation of third-party scripts such as GTM or other analytics tools.

💡 In real-world site usage conditions (especially when tracking sessions in Real User Monitoring), the LCP will only be detected on the CMP once since it is only displayed on the first page viewed.

Partial Measurement

In EU countries, properly configured CMPs must prevent the loading of third-party resources until the user has given consent for their data to be used.

If we test the performance of pages without accepting cookies, the measurement will not reflect the experience of users who accept cookies on your website.

Indeed, third-party scripts affect the performance of the website, at least on the page weight, but they generally add JavaScript execution time (see long tasks), or even layout shifts that negatively impact the web performance of your pages.

In these captures, it is clearly visible that the weight of resources and web performance metrics are worse when third parties are injected.

How to Properly Test Web Performance Through a Cookie Banner?

To accept cookies by default, several methods are possible. For some CMPs, you can simply observe which cookies are added to the browser upon cookie acceptance and add them to your web performance testing tool.

⚠️ Some providers like Quantcast rely on other processes like localStorage to retain user consent. In this case, you will need to create a script that simulates the addition of cookies but also the injection of data into localStorage.

To Summarize

Integrating the CMP on your site to comply with GDPR can have impacts on website performance. It is crucial to choose the provider correctly based on various criteria, including web performance.

Once the provider choice is made, ensure to integrate methods that allow you to continue testing the real performance of your site, loading third parties as if a user accepted cookies on your site.

Need help? Contact me using the information available on my references page.