[Resolved] Jumping header

[Marius]

Hi. Google has recently added the CLS metric and I noticed that I was above the suggested 0.1 which seems to be due to the header jumping when loading the page. To be more specific, when loading any page, the header space becomes very tall for a few milliseconds and then is adjusts to the header image that has been set by me. I noticed that this does not happen when I simply let a header title instead of a personalized image (in which case, the CLS goes to 0). Is there a fix for this issue?

[David]

Hi there,

that issue comes from your Lazy Loader – it adds a very large placeholder whilst it awaits for the image.

Check in the lazy loaders settings for how you can disable it on the logo image.

[Marius]

That indeed did the trick. Thank you very much for the very quick support!

[David]

You’re welcome

[Gary]

Following up on the jumping header I am talking with “adthrive dev team” and they wanted me to add this —
<div class="adthriveheader"></div>

I added CSS to the theme but they need the specific placeholder.

They highlighted the #content area and need the <div class="adthriveheader"></div> to be placed as the first child element right underneath that element.

Can you tell me HOW to do that?

I don’t want to edit any files that may be overwritten when/if the theme gets updated.

[Leo]

Can you open a new topic for your question?

Thanks 🙂

[Author]

Posts