The FOUC Means I Care
There’s a FOUC on my website, and it tells you I care.
If you’re not familiar with the FOUC, or Flash of Unstyled Content, it’s that brief second while a page loads where things aren’t all in the right place. It can take lots of different forms, but one of the most common relates to specialty web fonts.
Done right, web fonts generally load late in a page request, with lots of content coming through first. Lots of developer time and effort is spent trying to hide that FOUC, so that you only see the content once all of the fonts are properly loaded – you never see the content in its unstyled state.
But as the web has evolved, total page sizes are growing, and performance of the web, especially on underpowered devices, is suffering.
This is particularly topical right now, with the release of iOS 9. iOS 9 is the first release of the iPhone/iPad operating systems that allows for third party software to affect how mobile Safari renders a page – this means ad-blockers have finally come to iOS.
This is a big step. Ads are lots of things. They’re a primary source of revenue for a lot of websites. They’re annoying. They’re often particularly bad for performance. And now, at least for iOS users, they’re optional. And people are really excited about it.
Now three of the top four paid iPhone apps in the US are adblockers pic.twitter.com/48GSRIBRQ6
— Tim Bradshaw (@tim) September 17, 2015
But not only does iOS allow the blocking of ads, but also social widgets and external fonts.
Folks on iOS 9 can now block the loading of all web fonts with one setting. Make sure your site looks great anyway. pic.twitter.com/1A4oe6iTDO
— Jen Simmons (@jensimmons) September 17, 2015
Web fonts are big. With a few different styles, you’re looking at 300k+. As a result they’re slow. But most of the time, they should be unnecessary. Unless you’re using icon fonts via an external web font (and you probably shouldn’t be – use SVG), the content on your site should look pretty reasonable without that web font, and will be readable faster.
So, there are going to be (more) people blocking your web fonts. You should probably make sure your site doesn’t break without them. But even more than that, you should be trying to make your users browsing and reading experience as fast and easy as possible.
I am, and that’s why the FOUC means I care.