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 Like
any fix for this? I’m having the same issue
I am not seeing this now, since I updated to the latest, though I don’t know if it was specifically addressed.
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 Likes