This is a selected part of a technical audit I've conducted as a freelancer for an agency - Hop Online.
The LCP score was poor and the LCP element was a paragraph inside the cookie consent popup on the site (for first time visitors). A big part of the delay was due to a render delay, so this was investigated and explained to the client.
CWV Issues
Read Google's documentation on Core Web Vitals.
LCP Issues
Learn more about the Largest Contentful Paint.
Currently, the LCP on the public scorecards is a paragraph within the cookie consent. This is for first-time users only or users that haven't given consent.
Most of the delay is a "render delay". In your case the render delay is caused by the extreme amount of stylesheets and Javascript resources. Also, we can observe something called "layout reflow". We can see that the layout of the page drastically changes at one point, there are multiple style recalculations and forced layout reflows.
This whole process is slow and really bad for UX, as what is displayed at first isn't what the user is going to interact with later.
We are pointing this out because, even though we will provide you with solutions regarding the isolated cookie popup LCP issue, they are not going to completely solve your LCP problems.
🧐 We are strongly advising your dev team to investigate the layout reflows, as this would make a positive impact on your CWV and website usability.
✔️ Option 1: Make the popup smaller
By making the popup smaller, and hence the paragraph itself, another element might become the LCP. There are two issues to this:
- This other element should be then properly optimized;
- Sizing the popup down might not be enough to prevent this paragraph from being the LCP.
You should still consider making the popup smaller even if it doesn't improve the LCP score. The current setup prevents the user from interacting with the page (intrusive interstitial), thus forcing them to just accept the cookies. It is bad for ranking in Google, as it is considered a low-quality signal, and it is also bad for UX. You can see more here: https://growth.design/case-studies/cookie-consent-ux
Here's an example of another website using the same CMP, Cookiebot, you're using.
✔️ Option 2: Trigger the popup after user interaction
By loading the popup only after a user interaction, such as a scroll, it can no longer be included in the LCP metric. This is stated in web.dev's documentation. Yet again, this means that another element will be chosen as the LCP and it would have to be optimized accordingly.
Please, note that you have to block third-party cookies until the user gives consent.
✔️ Option 3: Optimize the cookie popup itself
You could try to optimize the cookie popup by preconnecting to the origin of the cookie notice and by combining the solutions provided in option 1 & 2.
For example, you can see how heavy our cookie consent is on the DOM size:
If you load it after user interaction, though, these nodes won't be a part of the initial DOM, which would help decrease data costs and load time.
You could consider changing your CMP or use a different layout, as well. The Cookiebot consent includes 3 different tabs, each with quite a lot of expandable sections and links. Whereas, here is an example from the website CarWOW:
- There's a link to the "Privacy policy"
- When the user clicks on "Partners" or "Manage settings" another tab opens, but the content in it is not present in the DOM prior to the interaction (in this case, a click)
Back to portfolio home