Oh FOUC

Oh FOUC

 Tuesday, May 22, 2018 |  Views:324 |  Posted by: John Marx |  Reading Time: 3 Minutes, 34 Seconds |  Article Tags: 

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.

    

Blog Tags

<a href='mailto:john@jm2marketing.com'>John Marx</a>

CEO / Code Ninja
 Send an email

John Marx

John has been an entrepreneur and pusher of all things “normal”. He was brought up where a handshake is as good as any word and even more important than any legal speak. John believes in giving back and giving people more than they expect. This is the foundation and basis of JM2 Webdesigners & Marketing. The prices will shock you, the amount you get will shock you even more, and the skills his entire team brings will completely amaze. He has built a team of experts that are talented, young, and efficient. Each one has the characteristics of the company in wanting to see a small business grow and each one goes above, and beyond which makes John beyond proud of them.

So why is John considered the “Code Ninja”. It’s isn’t because people fear ninja’s (they should). They will fight until their last breath defending, achieving the mission, and helping (in this case small businesses). John believes in very surgical strikes to help a business grow using agile methods that change rapidly, in ways people don’t expect, and with a relentless passion to achieve greatness.

Blog article comments

No blog comments have been submitted yet. Be the first to leave a comment!

 

 

Comment on blog article

Your Name:
Email Address:
  • Show/Hide Border
  • Table Properties
  • Delete Table
  • Row
    • Insert Row Above
    • Insert Row Below
    • Delete Row
  • Column
    • Insert Column to the Left
    • Insert Column to the Right
    • Delete Column
  • Cell
    • Merge Cells Horizontally
    • Merge Cells Vertically
    • Split Cell Horizontally
    • Split Cell Vertically
    • Delete Cell
  • Cell Properties
  • Table Properties
  • Properties...
  • Image Map Editor
  • Properties...
  • OpenLink
  • Remove Link
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html
  •