Accelerate banner or message loading to improve LCP

Hi @elevas33,

First a little background about LCP:

Web Vitals will count HTML elements (not all) in the viewport, above the fold. It is considered a ‘perceived’ page load speed and does not say anything about the actual loading time of the specific element. It’s based on layout surface, and not about rendering speed or download sizes.

By design, the cookie banner is one of the latest elements to load, always above the fold. If the cookie banner message (text) is larger in layout than other elements above the fold, it will count as the Largest Contentful Paint.

This is not an issue per se. Only if that specific element is loaded after 2.5 seconds. In this case, the cookie banner loading time is fine, but will “lazy load” itself and appear last.

Now you can make the cookie banner message smaller on mobile, by using less text, smaller fonts, deferring Google Fonts, smaller line-height, or a fixed height with a scroll bar. This however will not change your loading speed, it will just remove the cookie banner as LCP, and now another element might take its place.

You can use some CSS to manipulate the banner on mobile;

@media only screen and (max-width: 415px) { 
#cc-window .cc-message { // Custom CSS here } 
}

What I would suggest is making all the above content elements faster, by either preconnect or prefetch styles and fonts, and making sure you do defer unused javascript. This would accelerate your website’s first seconds, and push the cookie message forward. It will still be the LCP but in the ‘normal’ range.

The CSS will likely change the LCP, but not the loading time.

Hope this helps;

A helpful link https://web.dev/optimize-lcp/

regards Aert