Prevent flash of unstyled content

[jedcrowther]

I was getting a flash of unstyled content on the Lyttelton Museum staging site.

By removing the true parameter in this line of code I was able to prevent this. I had a look over other craft twigpack projects and none of them were set to true.

Could we please investigate why the true parameter has been included with the function (do we need to asynchronously load the css? Interesting that by default this function is set to false but are there potential benefits we are missing out on by not asynchronously loading it?) and whether or not there is a better way of preventing the flash other than removing the parameter. More info in the docs here.

[rb1193]

It would be cool if, rather than just loading all CSS before rendering (which is what removing that parameter would do), we could separate out the critical CSS and the rest and defer the non-critical stuff, as we're currently doing with JS. I don't know how practical that would be with Tailwind in the mix though. This issue also affects Natural Paint Co I think, so it would be good to figure out an approach.

Would it be worth trying to provide a single stylesheet, "critical.css", that is non-tailwind and just provides a skeleton structure for the page, and then the rest of our styles get added in later on? The advantage of this would be to speed up our initial load time and first paint.

[moacode]

Thanks @xjnny & @rb1193!

Yeah, I reckon we should look at integrating critical css into our sites moving forward. I've used it in the past with great success but we may have to start off by adding this manually to our sites until we can develop an automated solution. Running a service that extracts the above-the-fold styles into a critical.css file is a nice way to go.

@xjnny removing the true parameter is the best way to resolve this at the moment until either option above is documented, thanks for pointing this out 😄