Web Development

How to prevent Flash of Unstyled Content on your websites

Discover ways to stop Flash of Unstyled Content (FOUC) from occurring on your sites or at least reduce the possibility that your sites will be affected by it.

I am sure you have seen web pages load with unstyled content, and then it might be a few seconds (or minutes) before you see what may or may not be the page's intended look and feel. In web design, this aberration is called the unintended Flash of Unstyled Content (FOUC). Figure A displays an example of the FOUC anomaly on the CNN U.S. Edition front page where the CSS failed to load.

Figure A

FOUC_FigA_101713.gif

See an enlarged view of Figure A.

In this article, I will share some background about FOUC, and then describe ways to stop FOUC from occurring on your websites or at least reduce the possibility that your websites will be affected by it, no matter the browser or device.

A brief history

When FOUC was first documented in the 2001 article Flash of Unstyled Content, the problem appeared to be unique to Internet Explorer. Then the glitch found its way into Safari in 2006, and it was described in the article The FOUC Problem. Both articles exposed the nature of the irregularity inherent with CSS rendering properly within these two browsers and their inability to render styled content on a consistent basis. Recent indications show that FOUC also occurs with certain JavaScript and jQuery implementations where the scripts are used for styling, images, typically content that takes longer or hangs after the page loads.

Techniques to minimize FOUC

The first technique is presented in a FOUC tutorial by Brad Baxter. He outlines a simple method for minimizing FOUC by hiding all or part of the web page until all styles and JavaScript are finished by applying a class name "js" as the selector that hides all content within a container that has an id="fouc". The "fouc" element is unhidden using a JavaScript getElementById function setting the display value to "block" level.

The examples given in the short presentation include <style> and <script> suggestions for class and id names, as well as placement for code examples within the web page's <head> and <body> elements. The presentation is also available for download as a PDF from Google docs. The screen capture shown in Figure B displays two pages from the document representing the code snippets that Brad shares for handing FOUC.

Figure B

FOUC_FigB_101713.gif

See an enlarged view of Figure B.

Another short FOUC tutorial that uses this same technique is presented by John Polacek. He uses the <style> and <script> with a JavaScript method to set a "no-fouc" class name to display equals none, which hides the specified content until the page is fully loaded. The code is also available from GitHub Gist.

Another FOUC lesson that uses a similar technique is by Karl Swedberg. He demonstrates one way of using jQuery to avoid FOUC when JavaScript is utilized for applying styles on web page loads; he even provides a demo test page that flashes a yellow highlighted list, which is initially hidden on page load. In Karl's other test page, the FOUC is virtually eliminated by placing scripts at the bottom of the page. One of the main takeaways with the <script> technique is to make sure you put all scripts at the bottom of the web page.  

A technique that's similar is described in Paul Irish's blog post Avoiding the FOUC v3.0. He utilizes a unique CSS for the non-JavaScript user, so there is no need to write .js in front of every selector for popular functions such as accordions, image sliders, and the like. His solution is to add a class="no-js" to the html tag, and then he adds one <script> within the <head> that changes it back to 'js'.  I have not played around with this method, but according to Paul, this approach is also used in Modernizr to set the classes on the HTML element when the <body> loads.

A technique that is a no-brainer for most web developers is that you must include your link tag(s) to stylesheets within the <head> of your web page documents. Steve Souders makes this point in his Rule #5 - Put Stylesheets at the Top (which is part of his list of 14 Rules for Faster-Loading Web Sites). His Rule #5 page demonstrates this by having the stylesheet added to the bottom of the body just before the closing </body> tag. The FOUC in action on this page can be seen as displayed in Figure C with the before and after screen captures.

Figure C

FOUC_FigC_101713.gif

See an enlarged view of Figure C.

I'm sure this last technique is in use by most web developers. While some of the JavaScript techniques may be in use, they're probably not utilized as much as they could be. I suggest you take these underutilized methods for avoiding the FOUC, and see if you can win the fight with your websites. 

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

2 comments
Web Developer/Design
Web Developer/Design

Thank you for the tip. This may help me to developer sites. Thanks for sharing.

grayknight
grayknight

I think using link ref=stylesheets in the head is the easiest method. Generally, the main styling should be non-JavaScript based. JavaScript should just be used as an enhancement to the styles, not the main mechanism.