The FOUC - dread by web designers and web developers everywhere. The FOUC (Stands for “Flash Of Unstyled Content”) is what happens when a web page loads the HTML content before loading the stylized information. I’m sure you’ve seen it, whether you are a designer, developer, or just a customer (or random Google Searcher). The page loads and it seems to be just blank HTML information with no flair whatsoever. Here’s a pretty good example of a FOUC happening on CNN’s website1:

CNN FOUC

#FakeNews

Why does a FOUC happen?

A long long time ago, back when modems made that horrible noise, and AOL sent everyon free ninja frisbees (don’t even act like you didn’t), styling information was built directly into the html. You’d have awesome codeblocks like this:

<HTML>
<BODY BACKGROUND="#000000" ACOLOR="#00CC00" VCOLOR="#00FF00">
<A HREF="HTTPS://WWW.REMYSHEPPARD.COM">REMY SHEPPARD RUNS THE BEST WEBSITE</A>
</BODY>
</HTML>
The Good Ol' Days

This came to be considered bad form as the folks who built web pages decided that structural information (HTML) should be kept away from styling information (CSS). And the advent of CSS made this a possibility. Suddenly everyone was writing these badass stylesheets and putting them in css folders and just linking to them with the <link> tag.

This was great, especially when DSL started taking off and people had reliably and reasonably fast internet.

Of course, with everything, this chewey wonderful goodness wasn’t to last.

The Complicated Web

The web got really complicated. People started building these big huge javascript libraries that enabled all sorts of fancy effects. The W3C enabled CSS to mimick a lot of these effects, web pages got bigger, more interactive. Hell, the web is so popular now you can buy an entire computer that’s literally nothing but a web browser.

Of course this sort of thing, these big, fancy web pages, require what we in the biz call “dependencies”. You see, I can’t use fancy jQuery code to animate my menus without loading the 255 kB library. Those awesome icons I have around the site? I have to load the Font Awesome library (30kbs, gzipped and delivered via CDN), not to mention my own style sheet, however bulky that is.

To put that in perspective: The average rendered HTML web document (not including those things) is like 10kb. So I have to load 30 times the information that my page takes up, just to get my page to display properly.

This leads to a prety bad user experience at the end of the day, as people have to sit and wait for all of the dependencies to load on a page before they can actually read the content (you know, the thing they came there to do). And this is to say nothing of images, videos, and other rich content. Google recognizes this and has started shitting on people in the SERPS for having poor UX.

And there are plenty of workarounds these days for FOUC. We minimize files, we gZip shit, we use CDNs (literally delivering content from computers that are physically closer to you so that information has less distance to travel). But there are other ways to overcome the dreaded FOUC.

Google suggests going back full circle and inlining critical style:

<div style="width:100%;background:firebrick">Some Content</div>

But that defeats the purpose of including the styling seperately. Keeping your design and your stucture apart so that they can remain easy to manipulate and scale.

Thankfully: Jekyll

Jekyll is a wonderful system that takes liquid templates, ruby code, and markdown files and outputs them into a structured, minified, static html website. This is great for overcoming a FOUC because we can embed stylesheets directly into the head matter of our websites.

The SASS file for this website isn’t very large (like, 6kb?), and once I run it through the compiler it comes out even smaller (just over 4kb, I think?). So this isn’t a very large file and won’t add very much to my web page. So why not just include it directly? That way it loads with the page, doesn’t burden the page down, and completely negates the impact of a FOUC.

Here’s what the head.html liquid template file for my website looks like, more or less:

<head>
	<title>{ if page.title }{ page.title }{ else }{ site.title }{ endif }</title>
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="icon" type="image/png" href="https://www.remysheppard.com/favicon.png" />

  <style>{ include main.css }</style>

</head>

The important line there is <style>{ include main.css }</style>. What I’ve done is opened up a small style tag and - instead of including critical - I’ve loaded my entire minifed CSS file into the tag using liquid’s include. Then I just make sure my compiler dumps the finished output to the _includes folder, and it’s good to go.

If you take a look at the source code of this site you’ll see the end result:

Avoiding The FOUC

Problem? Solved.

In fact, as of the writing of this post, the only thing with real file weight that I am loading up front, is the Roboto font family. I have it highlighted in that picture of my source there, if you didn’t notice. I’m importing that from Google’s font CDN. Hopefully, by the time this post goes up I’ll have gotten over my lazy patch and moved that down to the footer so it loads last.

In the case of a font we’re dealing with FOUC’s little brother: FOUT (flash of unstyled text). But I’m okay with a half of a second of system-font until the load can happen. A fancy font isn’t necessary to the experience, and everything else that is loads right up front. And even still, my website is run on Google’s cloud so it’s going to move pretty fast.

So there you have it! That’s why FOUCs are a thing and that’s what you can do (if you use Jekyll) to overcome it. Keep in mind, if you run an enterprise website, something huge like Nike.com, this probably won’t work for you as I imagine your stylesheets are much bigger. But perhaps you can load your base styles this way, and then load idividual or page-specific styles as needed.