Be wary, a cookie banner may cause your LCP to vary

Summary: Everyone hates cookie banners. But did you know they can also impact your Core Web Vitals? Learn how the Largest Contentful Paint (LCP) for a client changed depending on the acceptance of the cookie banner, and how to monitor if this happens to your site as well.

  • by Jordy Scholing
  • Published
  • Reading time ± 4 minutes
Be wary, a cookie banner may cause your LCP to vary

The situation of very high LCP on mobile (but not on desktop)

As experts and fans of pagespeed and Core Web Vitals data, we like to look for ways to help our clients improve. In this case, we had a monthly consulting call, and the following things came up:

  • The LCP value for the homepage was quite high, while the TTFB was healthy enough;
  • On desktop, the LCP was very good, at 1.6 seconds;
  • On mobile traffic, the LCP was very high for unique and even successive visitors (4721 ms and 3937 ms)
  • It turned out that this was because the cookie banner was the LCP for 50% of those pageviews.

As the LCP is part of the Core Web Vitals, both we and the client want to improve this on mobile. Luckily, we came up with a solution in just 3 minutes. If you're curious about how we spotted the issue, and found the solution, continue reading. However, before we get to that, we need a bit more background.

Core Web Vitals Glossary

150+ Terms and Abbrevations You Need To Know.

Go to the CWV glossary
RUMvision Core Web Vitals newsletter

There is not just one LCP element

It is a common misconception that there is only one Largest Contentful Paint (LCP) element because Google Lighthouse typically only displays one LCP. The fact is that visitors access websites under various circumstances, resulting in the possibility of multiple Largest Contentful Paints (LCPs). The homepage for mobile traffic had two significant LCP elements in this scenario:

  1. An banner image;
  2. And the cookie banner text.

What causes different LCP candidates?

Depending on the size of the viewport, the type of device, or the network conditions, you might find different LCP elements when analyzing the LCP. For instance, a website may have different content or layouts for desktop computers and mobile devices. This can cause different LCP elements to show up on different devices, even when the same page is loaded.

In the screenshot below you can see what element types the LCP on the homepage of our clients website are. We see that it is an image for 50% of the pageviews, but also a div for 50% of the pageviews. The value for users having the div element as the LCP is way too high.

LCP element type

What our client learned by using RUMvision

Our client found this out by monitoring with RUMvision. In their previous tooling (which was a lab data tool), only an image element came up and it was never realized that the cookie banner was the LCP for mobile users. They also learned that the LCP differs per situation:

  • What the LCP is per template;
  • That the LCP may be different by pageview type;
  • Which element is largest for the given viewport;
  • And how all these elements score on the LCP.

When we visit a website for the first time (mainly on mobile), a cookie banner comes up that is the largest on the mobile screen. But what about when you return to the website or navigate to the next page? Then you have often already accepted the cookies and this banner will not come up and therefore will not be an LCP element.

For our client the following happend. In the example below, you can see that the left scenario is a new (unique) visitor and sees a large cookie banner. But on the right, the visitor has been to the website before, and the cookies have been accepted.

LCP element visualization
Left is the LCP element for unique visitors | Right is the LCP for successive visitors

The "LCP element" is much smaller than the text in the cookie banner, and it loads with a higher priority than the cookie banner ever did for a unique pageview.

In short, yes.

Because it only becomes visible around 5 seconds while the image is visible earlier. To confirm that the troublemaker is the cookie banner, we can use RUMvisions filter "metric element". This shows which elements are the LCP.

LCP by metric element

How we stopped the cookie banner from being an LCP candidate

The name of the metric gives a hint: Largest Contentful Paint. The text in the cookie banner is larger than the "LCP element" in the screenshot above. We believe in creative, yet practical, solutions. One stood out to us: what if we just made the text in the cookie banner smaller? Since this is currently one large chunk of text, splitting it into two paragraphs would reduce its size to below that of the "LCP element." And it worked!

cookie banner LCP fix


By adjusting the cookiebanner's size, we eliminated it as the LCP and raised the LCP score. When trying to maximize your score, keep in mind that there are usually multiple Largest Contentful Paints at play. Note that a cookiebanner is just one possible cause; other elements may also be to blame (once again, this will vary depending on how the requests are loaded on your site). Instead of staring blindly at a single lab data test, RUMvision will help you gain clear insights into what those elements are so you can optimize with the right data.

Interested in finding out what your sites LCP's are?

Get started using RUMvision

Share blog post