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