how to resolve largest contentful paint issue due to cookie policy notice.

[FurqanAli]

Can someone please guide me on how I can resolve the largest contentful paint issue in HubSpot due to cookie notice?

[Indra · Accepted solution]

Hi @FurqanAli,

It can indeed be a problem if your largest contentful paint is the Cookie policy notice.

You can optimize your Cookie bar with custom CSS to make it less large.
So you can do the following:

• Try make the font-size for the text and buttons smaller
• Use less padding
• Change the text and link info to the privacy page to decrese the amount of characters.

Hope this will help improve your LCP.

If the above didn't help. Please share your site link.

[Sjardo · Accepted solution]

Hi @FurqanAli ,

Indra asked me to have a look at your question 🙂
It's good to know that there is always an element that is the largest contentfull paint (LCP). There is always an item the biggest on the screen, and thats the LCP.m  Most of the time it's an oversized cookiebanner, the hero image or a big heading. So instead of trying to get "rid" of it, try to improve it and if posible. 

Content layout shift (CLS) happends when elements grow or shrink in size based on the content they hold. For example, if you do not set an height to an image, when it's done loading it will push down all the elements downwards, causing CLS. It could also happen that something loads later than other elements, and when that happends, it pushes other elements away.

The most important thing to do is setting fixed height and width on elements that you know have a fixed height. Images, menubar, maybe even a heading if that's causing CLS. If you are not sure about the height, set an target heigh on the elements so the CLS is atleast reduced. 

PSI gives you a create overview of all the elements that cause CLS and which one you should fixed to get below the treshhold.

Regards,

Sjardo

[FurqanAli]

Hi, @Sjardo @Indra do you mind seeing the new question I posted:
https://community.hubspot.com/t5/CMS-Development/How-to-optimize-hubspot-website-related-to-javascri...

[FurqanAli]

thanks a lot @Sjardo 

[FurqanAli]

@Indra thanks a lot and Yes with the above recommendation it eliminates cookie notice as the largest contentful paint and now there is another element also can you also guide me about layout shift related to banner text and buttons?

[Indra · Accepted solution]

Hi @FurqanAli,

It can indeed be a problem if your largest contentful paint is the Cookie policy notice.

You can optimize your Cookie bar with custom CSS to make it less large.
So you can do the following:

• Try make the font-size for the text and buttons smaller
• Use less padding
• Change the text and link info to the privacy page to decrese the amount of characters.

Hope this will help improve your LCP.

If the above didn't help. Please share your site link.

[ALaskey]

Is this something Hubspot support will be able to help with - we Have a theme and i can seem to find where to make these changes

[Indra]

Hi @ALaskey,

Best you can do is asking a developer to help you who is specialized in page performance.

In HubSpot it's possible to create a css file inside the designer tools and include it on domain level. To include it, go to the Settings. On the left go to Website -> Pages. In the Tab 'Templates' you can include a css file.