Flash of unstyled content

One of my sites is loading each page unstyled for a brief second (no CSS), then after about a second the page loads styled. What’s the best way to avoid having this unstyled content showing? Any suggestions?

Loading your CSS in the <head> section will sometimes prevent FOUC, but it’s still a race condition. The only surefire way around it is not terribly pretty: you define one stylesheet at the top that hides the entire document, then one at the bottom that reveals it. More detail here:

1 Like

Thanks! I’ll try this.

The problem is caused by network load times. Browsers prioritize the content over the styling, which causes a blip of visual cancer sometimes on slow connections.
If you have Chrome, press f12 on your site, find the Network tab, make sure the record button is on (top left, will be red if it’s on), and reload the page (make sure you selected all at that list up top!)


You’ll see index load instantly, but style will take a second.