What Is FOUC?
No, we are not being rude, just an amusing acronym. FOUC stands for Flash Of Un-styled Content.
Example of FOUC in action
As you can see from the image, FOUC is the unstyled version of your site. It's not interactive and often leads people to click off if the problem lasts for too long, or frequently occurs on your site.
Why Does Fouc Occur?
A FOUC occurs when the browser loads the content or, technically speaking, the HTML of the site before it delivers the styles (CSS) - this causes you to see the raw, un-styled pieces of information whilst the server is still delivering the styling files, thus causes the site to “FLASH” and after that; VOILA the site looks as it should… to the most part anyway. Sometimes the page may not necessarily function as it should due to certain other scripts being loaded prematurely, or partially due to this lag, but this can usually be remedied by a quick refresh and should only need to be done if the page isn’t performing correctly.
FOUC can sometimes me more prominent at certain times, locations and many other factors and it may even be something you have only just started to see… but it has in fact been around as early as 2001! First documented in Internet Explorer (no surprises there), but as time has gone on, it has become more prominent in other browsers - especially Safari.
Why do I need to care about it?
If you’ve got FOUC on your site, then this basically means that it’s running slow. And no-one likes to be a slow poke now do they? So, the reason why you should care if this is happening to your site, is simply that you’re not providing your users with a good enough experience.
User experience is vitally important for many factors ranging from your Search Engine rankings to your conversion rates. Google state that they use site speed as a key ranking factor, and stats show that 53% of mobile users will abandon a site if it takes longer than 3 seconds to load (Hobo, 2017. ) That means that by having a slow-speed site, you could be missing out on lots of good visibility and potential customers.
How can I stop it happening?
With technology advances and increasing internet speeds, we’re able to add more cool stuff into websites to enhance them, giving you the best possible experience (and this cycle tends to repeat itself over and over thankfully!) But the more cool stuff we add, the heavier the load on the server… so what can we do?
*** CUE DRUM ROLE AND SUPER HERO MUSIC ***
Here comes the SEO’s!
Yes, with the help of Search Engine Optimisation, we can most certainly help eliminate or reduce the FOUC phenomena. Some techniques are obvious and easy and some a little more complex.
Here’s how we help reduce FOUC on your site:
- Limit your fonts and scripts
- The more font files, the more script files, which means… yep, you’ve got it, the more information the is needed to be downloaded. By reducing this to only what is necessary, it can dramatically help reduce the likelihood of FOUC.
- Defer the scripts that you can and load them at the bottom of your template/PHP/HTML page.
- Deferring the script stops the script from loading before the page has loaded More info on this can be found here.
- Also, by loading these scripts at the bottom of the page, it will then load these last as well, thus allowing other pieces of information to be requested first.
- Intentionally delay/display a loading screen
- Another option is to delay the showing of a page and display a loading icon whilst the page loads in the background.
- Reduce the image and file sizes on the site
- Whether its removing unwanted lines of code, compressing images or minifying stylesheets, all of these helps deliver the files quicker.
These are just some methods we can use and we haven’t even gone down the route of using a Content Delivery Network yet!
So, if you think you require our help or need some more information regarding this then, please do get in touch with us and let us help eliminate the FOUC or even just speed up your website to a more acceptable level!