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

Largest Contentful Paint, or LCP

On some 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.

INP Testing

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

Partial Measurement

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

If you 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 impact 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 affect the web performance of your pages.

Comparison of the weight of a page with and without accepted cookies on the Allianz site, the page is heavier after cookie acceptance (in red)

Comparison of web performance metrics with and without accepted cookies on the Allianz site, the figures are worse with active cookies (in red)In these captures, it is clearly visible that the weight of the resources and the 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 such as 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.

In Summary

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

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