I have an ASP.NET Core 5 MVC web application that is suffering from "Flash of Unstyled Content" (FOUC). Essentially, my styles show for a short period while the page is loading. I saw this Stack Overflow question about dealing with FOUC, and the suggestions are mainly to hide the page via CSS or JavaScript with a CSS class, then to remove that class to show the HTML after the page is done loading. This seems likes more a "trick" than an actual solution. I've also seen some suggestions to minify your CSS and compress your images. I've already done that, but I still have FOUC.
How can I avoid FOUC, specifically in an ASP.NET Core application?
For my specific case, I have all my links and my stylesheet in my primary shared layout _Layout.cshtml. I have my JavaScript at the bottom of the page after all my HTML. I do have some Razor code at the top of my page, but from my understanding, this code is ran on the server side and should not affect page load times.
You could try hiding your <html> tag with CSS, and then showing it with a JavaScript window.onload function?
<!DOCTYPE html>
<html style='display: none;'>
<head>
<script>
window.onload = function() {
document.querySelector('html').style.display = '';
}
</script>
</head>
<body>
<h1>My Content</h1>
</body>
</html>