Hi @inuetc,
I see that you’re using Elementor on the site, and while I can’t say what causes the issue in your case specifically; you might want to take a look at this official resource from the Elementor Team on how to go about dealing with such “flashing of unstyled content” issues.
https://elementor.com/help/dealing-with-flickers-fouc/
I hope this can help you out!
Kind regards, Jarno
Hey @inuetc, I think the issue you are facing is called FOUC ( Flash of Unstyled Content ) and it’s a pretty common issue.
I have used some of the tips below before to solve it. They might help you as well!
1. Load CSS files in the <head> section
2. Preload the style
3. Use concept of Critical CSS if possible
4. Use font-display: swap and preload for fonts as well
Hope it helps!
It’s called FOUC—a flash of unstyled content. To avoid it, the website should be Optimized properly (More details here). You can also use a preloader plugin. FOUC is not specific to any theme or plugin. For more information, check this link: https://en.wikipedia.org/wiki/Flash_of_unstyled_content.
Basically, when visiting a page or site, the browser needs first to print the HTML structure (the red part) and then apply the custom styles (the CSS that resizes it). So there is a brief moment of seeing the page appearing unstyled, but it shows fully styled once the browser has fully loaded the page. The browser can’t instantly just show the website fully as the process requires loading logically bit by bit.
In cases like this, you can use a preloader plugin, which will display a nice animation for the visitors and once everything is done loading it will show the content. You can check one here:
Let me know if this helps. Thanks 😄
Thank you for referring to the article! @jarnovos
And thanks for your response guys @arkaprabhachowdhury @kausaralm