[Resolved] Header Navigation shifts on load

[David]

Hello,

During pageload i can see the header menu shift on mobile. i have drilled it down that the shift takes place when navigation-branding.min.css is loaded. In light of Core Web Vitals, I am looking to remove this shift which takes place on page load. See below: https://www.loom.com/share/9972fb4b8e0d4644952c269995d5d169

Do you know what I can do to make sure this shift no longer appears on the website?

Thanks,

[David]

Hi there,

your site is using a lazy loader which is also applied to the Logo image, this is causing the layout shift. You can test this by disabling the lazy loader, and clearing any caches.

Most lazy loaders provide the option to exclude an image based on a CSS class, you can use the is-logo-image class to exclude the GP logos.

[David]

Awesome, this fixed the issue! Thanks.

[David]

Glad to be of help.

[Author]

Posts