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.
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:
- An banner image;
- 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.
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.
Why is the cookie banner 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.
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.
Does the cookie banner mess with the LCP?
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.
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!
Conclusion
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?
