Let’s do a little visualization… You’re browsing the web, perhaps looking for your next big vacation. You’re looking through various websites and eventually you click on one that seems to have everything you’re looking for. You excitedly start clicking and eventually you are brought to a home page for a new site. As you sit and look at the blank homepage, waiting for it to load, for a split second, you see content… but it doesn’t look right! Everything is all squeezed together, unstyled, unplaced, and a complete mess… and as quickly as it came, it’s gone… now replaced by a perfectly styled page made up of the squeezed mess you saw moments ago. While altogether, this wasn’t much of an inconvenience to you, you’re right back to browsing for the perfect trip… but there is a name for this freak occurrence you just experienced: It’s called “Flash of Unstyled Content” or FUAC for short. 

Sometimes when a page takes a few seconds to load, either due to the page having a lot of image/CSS/javascript assets or the user being on a slow connection, the user may see an unstyled version of the page for a second or two as the page loads. When loading finishes the layout corrects itself and the user sees the correct version that is intended. This is commonly referred to as FOUC (Flash of Unstyled Content). It’s not a great user experience for the user to see “under the hood” so it’s preferable to adopt a strategy to make sure that this does not happen. The solution is to ensure that the element with the FOUC behavior is hidden on initial page load and then displayed only after it is initialized and correctly styled. 

While this occurrence may not be a big deal, and frankly something the user just chalks up to their internet speeds and keeps moving on with their lives, as the owner of a website, if I told you that you could avoid this, wouldn’t you take me up on that offer? Today we will discuss just that. How to make the very best first impression you can, no matter how small of an inconvenience you might be fixing, if you can, you should.  In this article we will be using a specific example of an image slider to illustrate it in a tangible sense

Let’s take an image carousel using the Flickity plugin. This is the end result we want the user to see

However when it hits a FOUC scenario the user sees this for a couple of seconds when the page initially loads, before Flickity applies the necessary CSS and javascript to render it correctly.

The carousel is not yet initialized and the images are all stacked under one another in a broken layout. 

To solve it, we use a common strategy, which is to hide the carousel initially and only display it after it is fully initialized and styled. Simple right? I know...

To do this we create a CSS class that we will apply to the carousel

.carousel.is-hidden { display: none; }

This ensures that when the page first loads the carousel is not visible and the user does not see the broken, uninitialized version.

We then add some javascript to remove the “is-hidden” class. To ensure that the carousel renders at the correct size we also trigger a redraw and finally initialize the carousel.

var $carousel = $('.carousel').removeClass('is-hidden');
$carousel[0].offsetHeight;
$carousel.flickity();

This approach ensures that the carousel remains hidden while the initialization and styling happens, and is only displayed when it is fully ready. So the user only sees the fully polished end result and the FOUC problem is solved.

As you may expect, this may cause the user to wait an extra second or so on a blank page, but in my humble opinion, that is better than seeing a collection of images and text completely unstyled before it shows up the way it should. An extra second of loading is unnoticeable, a big pile of pictures and text piled into one mess before it’s all transported to its correct location is MUCH more noticeable, and with this strategy completely avoidable.