Okay, okay, it sounds like a bad word but really it isn’t. Really. We just are using the acronym here as it did grab your attention. This article though is intended for those that work on web pages more than your regular every day site users. It is a good read for the non-technical as well as you’ll learn some technical terms but also easy ways to improve upon your website. We recently started adding sites that were having Flash of Unstyled Content or FOUC as it’s called in the web design world. We’ve seen it in the past and we are seeing it more as people that come on board with their existing sites have a ton of data and are not set to load properly. Both items will affect your website search engine optimization or SEO. We’re not going to cover that beyond the most basic of things.
First let’s talk about search engine optimization and why FOUC can hurt your SEO. When a page starts to exhibit FOUC it normally happens months, even years, after a site has been live and more information is added causing the page to take longer than originally designed.
There are two main areas you will find that this problem happens. The first is that the stylesheet (embedded or linked; typically embedded) is loaded at the end of the document. The first fix is to include the CSS information in the HEAD section of your web page. This should also be using a LINK rather than being embedded in the file. Embedding in the file if done correctly will help but not required as many modern-day CMS’s will not like this approach and could make your FOUC worse.
The next most common way of getting a FOUC is by using Twitter Bootstrap or Zurb Foundation. This could be pulling it locally from the same file server or even if you use a CDN or Content Delivery Network. We hope you are using a CDN as that will help your page load in many instances. A quick fix for this is have a loading mechanism on the page which will show the page after it’s been entirely sent, and drawn, on the user’s computer. We see this all too often and we don’t love seeing the endless hourglass but know many times that is a valid approach and is one many site owners prefer.
The method we’ve taken recently is to add a simple CSS class to the sections we know that require longer than normal load times for our clients; especially the new ones. This fix allows the page to load quickly but removes the FOUC from whatever component you apply the CSS class to. The CSS to fix this is very simple and you’ll add it to your stylesheet (we do it in the beginning, but you can do it toward the end as well).
.no-js .top-bar,submenu{display:none}
@media screen and (min-width:40em){
.no-js .top-bar{display:block}.no-js .title-bar{display:none}
}
With the above wherever you notice FOUC you will either add a CLASS or add to an existing class “no-js”. We have other methods that use JavaScript. In our most recent problem we were tasked by the client that they do not want JavaScript at all within their site so using any JavaScript solution was not available. This option worked perfectly for them and eliminated the problem they were having and worked on every web browser the client wanted to work against.
Additionally, to help speed up the pages we also add a lazy loader (being lazy isn’t always bad) to any images that are larger in size. Here we load a very low-resolution of the image, and then after the user is on the page the images start loading their higher resolution as the user was reading through the site.
Writing code is fun and something I truly enjoy. Passing this on to our team of developers to fix our onboarding clients that have existing websites is great but why not share it with the entire Internet as this is a problem we are seeing more of, rather than less of. Now the correct solution when all said and done is optimize your files, images, and website code so that it is as small as possible, loads fast, and doesn’t create the dreaded FOUC problem to begin with.