Navigation causes layout shifts in the header and on a page

[mdemianova]

When clicking any link in the header, it may result in the following shifts:

• The left navigation links move to the right (this is more noticeable when there is only one link).
• The page content shifts to the left (the main page is not affected by this).
• Additional content below the main page description moves up (this isn’t visible in the attached video).

Could you please investigate this issue?

Screen.Recording.2025-03-03.at.21.58.24.mov

[yashmehrotra]

@mdemianova Thank you reporting it, we'll try to find the root cause

[526avijitgupta]

I'll investigate in a few days, thanks for reporting

[526avijitgupta]

I checked, it's probably happening since the html content is getting loaded earlier than the css. If you hard-refresh the same behaviour can be noticed. It's only there for a very short period of time, miliseconds I guess.

To fix it, maybe we can prelaod the css. Although I would like to see if that impacts our lighthouse score, before going ahead with the change. I can research a little to find a way to fix this issue without affecting the loading performance of the website.

That being said, I believe we can live with it right now. What do you think @yashmehrotra ?

[yashmehrotra]

would like to see if that impacts our lighthouse score

I think we can take a small hit on the lighthouse score if problem is visible to the users, I think we should be okay with maybe a 2-4% slower load if it looks cleaner while rendering/loading

@526avijitgupta
Lets try to research ways without losing any performance first though, but we can try your solution of preloading css if we couldn't find anything better

[jamesericdavidson]

I believe Lighthouse recognises this layout shift - its impact is negligible to nil. This fix would improve UX, however.

[526avijitgupta]

I tried out a few solutions including preloading, but those didn't work. We can keep the issue open for someone else to try and fix it.

[jamesericdavidson]

I tried out a few solutions including preloading, but those didn't work. We can keep the issue open for someone else to try and fix it.

Could you list the solutions attempted in #323 so we can track it (at a glance) in this issue? @526avijitgupta 😃