Best way to optimize for LCP

[urbgimtam]

When testing in LightHouse / pagespeedinsights in anonymous mode, there is a LCP penalty that seems tied to the Nuxt Cookie-Control banner. It displays the banner as the culprit, even in desktop.

This seems to happen because of all the javascript work required to check if there is a previous cookie for cookie-control, and the whole setup to be displayed, which is fine.

My question: is this just happening to me, or is this something that others are experiencing?
If so, what can be done to mitigate it?

(thanks for a great module, I really enjoy it)

[dargmuesli]

I made a change that should fix this in #226. Could you try v8.4.8 to see if the situation improved?

[urbgimtam]

Thanks! I've upgraded and it does to cut between 30% ~ 40% of the render delay, which is awesome.
I'll try to test further with different projects, as the current one has a lot of media requests, which can skew the results somewhat.

[urbgimtam]

Meanwhile, I've also tried to investigate why the banner was triggering the LCP, and stumbled on this article.

https://www.rumvision.com/use-cases/be-wary-a-cookie-banner-may-cause-your-lcp-to-vary/

It can give a quick win in the sense of reducing the chance of triggering LCP. Maybe it can help?

I couldn't implemented because, as far as I understood the cookie control module, the bannerDescription content is already wrapped with a <p>. Is there a way to circumvent that without building a banner from scratch?

[dargmuesli]

Well, the cookie banner just is one of the largest elements on a site when not dismissed. So it will always be likely to show up as LCP element. To speed up loading the cookie banner, several optimizations could be made to the overall loading speed of the website or chunking. That's somewhat dependent on other resources used in a project, I think.
If you refer to splitting the text, that would just be a trick / workaround on the LCP statistic, I'd say. Making two elements of of one would decrease the size of the original element, thus the metric would not trigger the same way as before, but your page would not load any faster. So I guess we should think again about what's our goal here.

[urbgimtam]

I agree with you. Just wondering if it would make sense.

In any case, the Web Vital metrics don't have perfect detection, and this kind of trick will stop working someday.
But trick or not, Google's boost for websites that return better scores is always appetizing.

Anyway, thank you for your attention on this matter 🙏. It's always a nice discussion, at least to me.

[dargmuesli]

To me too! Thank you for bringing this up, otherwise I wouldn't have given the clientonly tags a second thought!