Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Support

FOUC on every page load

Started by Christopher Pickert 6 years ago · 3 replies · 748 views
6 years ago

I am seeing a flash of unstyled content on every page load (the html loads, then the CSS, even though the css is in the head, as if it is being written in later). I can't figure out what would cause that, since I haven't changed any related settings. I did upgrade Grav, so that may be part of it. What's a good way to debug this on Grav?

👍 1
6 years ago

I am not seeing this now, since I updated to the latest, though I don't know if it was specifically addressed.

6 years ago

This has nothing to do with Grav directly, and all to do with processing and caching, as well as how the theme is constructed. The DOM is rendered first, then linked assets are called. Only once the browser begins to parse the HTML is the call to the CSS followed, which is then parsed and applied.

Once your browser has cached the page - and assets - subsequent loading-times will be reduced, and thus the FOUC will be closer to the TTFB, making it go by unnoticed. The best way to fight this is to minimize the CSS needed for first load, defer the loading of the remainder, or inline the critical CSS. It's also easier to debug using the browser's DevTools.

There are many tools available to simplify this, including loadCSS for asynchronous loading, HTTP/2 for faster processing of assets. In general, optimized sites will avoid this simply by being better at rendering - a brief explainer on this.

👍 2

Suggested topics

Topic Participants Replies Views Activity
Support · by Thomas, 1 week ago
2 53 10 hours ago
Support · by Anna, 3 days ago
2 60 13 hours ago
Support · by Justin Young, 14 hours ago
1 30 14 hours ago
Support · by Duc , 1 week ago
2 65 5 days ago
Support · by Colin Hume, 1 week ago
2 56 5 days ago