I’m having an issue with a site I’m building where the content from the header (nav) flashes in the top left of the window before fully loading and showing as it should according to it’s styling.
If you go to the link below, you’ll likely see a quick flash of the content (shown in screenshot below). I’m fairly new to liquid, but the header I’ve created is fairly simple, so I’m puzzled as to why this is happening! Any help would be much appreciated. Thanks!
Here’s how it should look, and does look after 100ms or so:
Here’s the link: https://www.misefootwear.com/pages/launching-soon
The styles for your prelaunch nav are in the theme.css file and that file is set up to be non render-blocking. So the page continues to load content (text, images, buttons, etc) without the styles from the theme.css stylesheet until the stylesheet loads. This is a tactic to get better page speed scores. Normally, you’d put styles for the header (critical styles) into an inline tag so you don’t have to wait for the stylesheet to load to have that area appear styled.
https://web.dev/render-blocking-resources/
https://web.dev/extract-critical-css/
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css
