0

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.

Ethan Partridge
  • 147
  • 3
  • 12
  • 2
    Hiding content until assets are ready is a trick, but it's also a valid way of dealing with FOUC. FOUC is usually because the CSS is loaded as a secondary file (especially fonts or background images since they're often loaded as tertiary files) & takes a bit to complete or because some of the styling is done via javascript. If it's CSS loading, inline the critical CSS as in, for example, ``. (For fonts, you may need to figure out how to embed them instead of loading them.) If it's javascript, see if you can adjust the page so it doesn't need to be updated on load. – Ouroborus Jan 08 '22 at 07:22

1 Answers1

0

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>
Jake Lewis
  • 1
  • 4