CMS Development

FurqanAli
Participant

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

SOLVE

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

0 Upvotes
2 Accepted solutions
Indra
Solution
Guide | Elite Partner
Guide | Elite Partner

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

SOLVE

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.


Vet Digital - The Growth Agency | HubSpot Solutions Partner Agency

Did my post solve your question? Help the community by marking it as a solution

View solution in original post

Sjardo
Solution
Top Contributor | Elite Partner
Top Contributor | Elite Partner

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

SOLVE

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

View solution in original post

0 Upvotes
7 Replies 7
Sjardo
Solution
Top Contributor | Elite Partner
Top Contributor | Elite Partner

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

SOLVE

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

0 Upvotes
FurqanAli
Participant

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

SOLVE
0 Upvotes
FurqanAli
Participant

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

SOLVE

thanks a lot @Sjardo 

0 Upvotes
FurqanAli
Participant

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

SOLVE

@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?

0 Upvotes
Indra
Solution
Guide | Elite Partner
Guide | Elite Partner

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

SOLVE

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.


Vet Digital - The Growth Agency | HubSpot Solutions Partner Agency

Did my post solve your question? Help the community by marking it as a solution
ALaskey
Member

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

SOLVE

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

0 Upvotes
Indra
Guide | Elite Partner
Guide | Elite Partner

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

SOLVE

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.


Vet Digital - The Growth Agency | HubSpot Solutions Partner Agency

Did my post solve your question? Help the community by marking it as a solution