Website layout shifting whilst loading

Store Design
,

Topic summary

A website owner is experiencing layout shift issues during page load, particularly with the navigation bar loading last. The problem is visible on their reviews page.

Proposed Solution:

  • Move the navigation bar div directly into the page.liquid file instead of inserting it at the end of the document
  • Apply the same approach to the “Reviews” section
  • Avoid using document.body.insertAdjacentElement for post-page-load insertions; use predefined sections instead

Current Status:

  • The issue remains unresolved
  • The website owner is using only the visual editor and cannot access the underlying code
  • A third-party app may be causing the Reviews section to load improperly, but this cannot be confirmed without system access
  • Further troubleshooting is limited without code-level visibility
Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,

My website is shifting around a lot whilst it is loading, how do I stop that happening as the navigation bar is often the last to load?

Please check out this page as an example: https://altitudesupplements.com/pages/reviews

Thanks!

1 Like
2

Instead of inserting the navigation bar div in the document at the end, include the div as part of the page .liquid file. Similar for the “Reviews” section.

3

Hi Gaurav,

Thanks for the reponse could you please give a bit more detail how to do this?

Thanks,

Tom

4

Hi Tom,

Will actually need to look at your code to be able to give more detail.

But from the look of the website, are you using? document.body.insertAdjacentElement add any element post page load? Then instead of that, add a predefined section?

5

Hi Gaurav,

Thanks for your help, apologies I am only editing in the visual editor so I am not 100% sure what it is using, how do I check this?

Thanks,

6

Ah, then its difficult to check without logging into your system. Are you using any app to display the “Reviews”. Maybe that is causing this issue.