Cookie Banners and Web Speed

Cookie banners, when deployed without speed optimizations, pose a considerable threat to your site's speed and Web Vitals metrics. In this article, we will share insights we've gained working with our clients.

You probably know that cookie banners (or “CMP banners”) will become mandatory on most websites due to legislative changes. We won’t delve into legislation (that’s covered by Petra Dolejšová) or design (analyzed by Ondřej Ilinčev), but will focus solely on how not to ruin your speed when deploying them.

First, let us introduce you to the champion. The worst possible cookie banner that will undoubtedly obliterate your metrics.

There it is, the champion of web speed destruction! Five seconds of nothingness. Then, very slowly, the banner begins to shift the content. And more, as a really large image is rendered within it.

Why is this so bad from a speed perspective? Think for a moment, you'll figure it out.

Got it?

Here are the major problems this banner causes:

1. It loads late, just when the user might be consuming the page content.
2. The shift severely degrades the CLS metric, in this case quite drastically. The metric would skyrocket to more than five times the maximum allowable value just because of the cookie banner.
3. Finally, an image is rendered in the cookie banner. Ideally a bit later than the banner itself, poorly optimized, and preferably larger than any other element on the page. We have perfect conditions here for destroying the LCP metric.

There are many such champions of speed destruction to be found online. And as you've rightly deduced, it doesn't have to be just cookie banners...

Now, let’s look at specific issues cookie banners can cause to metrics.

LCP Metric: Render as Soon as Possible#

Among developers, there’s a myth that rendering content like cookie banners should be postponed as much as possible. After all, it's not the main content of the page.

This is one of the major mistakes you can make when implementing banners. From the user’s perspective, the cookie banner is the main and most important content. Ideally, they should read it first, click it away, and only then proceed to your site.

Moreover, if you've designed the banner in such a way that it includes large elements (long texts or images), it can become an LCP element, according to which the Largest Contentful Paint metric is calculated.

So, by delaying the banner, you might also delay the LCP metric.

Look at the image below, there are two websites. Both large and technically complex. For their developers, rendering the cookie banner in time is problematic, even though they’ve done quite a bit to achieve it. How does it look from the user’s perspective on a slower connection?

In both cases, the LCP metric is calculated from the banner content. In the first case, the banner appears later than the website layout, and then, unfortunately, there's a wait for the image to download.

The second variant is slightly better. Before the banner loads, a skeleton is visible on slow connections, maintaining space for the banner content to render.

More information on how to maintain space for components can be found in this article.

CLS Metric: Don’t Shift, Don’t Animate#

You probably already know that the Cumulative Layout Shift metric is degraded by unwanted content shifts. In the opening example of a really bad banner, we saw the biggest problems you can cause to the CLS metric (and users) through poor design or implementation.

In the context of CLS, also be cautious about specific solutions. With one of our clients, the implementation of the Google Funding Choices solution tripled this metric:

We've verified that on user data (Web Vitals from Chrome UX Report), it didn't have such a major impact. Still, it's definitely a warning against blindly implementing foreign solutions.

Test. And measure, measure, and measure. Perhaps with our web speed tester.

With CLS, also watch out for animations. You probably know that you need to animate correctly, using CSS properties like transform. However, if you leave certain solutions' animations enabled, they are done poorly and worsen your CLS. Here, as a poor example, we could mention the solution OneTrust (formerly Optanon).

INP/TBT: Measure Browser Performance Impact#

The “JavaScript” Interaction to Next Paint metric (or Total Blocking Time during synthetic measurement) is not typically worsened by cookie banners. But there are exceptions.

Be cautious about the Didomi solution, which on a slower mobile can block the browser’s main thread to four times the value of Google Analytics. On regular websites, it’s just a bit annoying, but for websites where rendering is already heavily loaded by third-party JS (content sites with ads), this can mean a deterioration of INP for users.

Note on Measurement#

We often encounter the opinion that third-party components should not be included in speed measurements because developers are not responsible for them.

However, users don’t see the web without third-party components. You have no choice but to accept the cookie banner and other third parties and simply measure the real state.

With a cookie banner, however, there's a special situation: Some users see the web with it, and some without it. Therefore, we recommend testing both variants.

The image shows the SpeedCurve setup for Livesport, where we test only the homepage with the cookie banner. This is technically handled using WebpageTest scripting. You can create a similar solution using Lighthouse User Flows.

Recommendations for Your Implementation#

Let’s summarize:

1. Load the cookie banner as soon as possible.
2. Avoid large elements in it that could be LCP elements, if possible.
3. Be cautious about animations and sliding the banner from the top.
4. Test the speed impact of chosen solutions.
5. Measure the speed impact with or without the cookie banner.

Video in Conclusion#

If you prefer spoken word, a webinar recording by Pavel Ungr on cookie banners is available.

We can certainly help you with implementation and optimization within a few hours of consultations, feel free to contact: martin.michalek@pagespeed.cz.

Wishing you fast websites! Even with a cookie banner.