HTTPS, CSS Pre-Processors and Flash of Unstyled Content

For better page speed with need to use CSS at footer and CSS-Preprocessors, which increases the chance of Flash of Unstyled Content (FOUC). No modern busy website today use CGI-Scripting or Hand Coded HTML, most of us are forced to use this or that content management system, usually based on PHP-MySQL. With the advent of high end mobile devices, it is expected that the users will use a 3G connection at minimum, if not LTE.

HTTPS, CSS Pre-Processors and Flash of Unstyled Content

But, it is not impossible that even with higher bandwidth the device users will face the the unstyled HTML first before loading of the fully rendered page. It happens with Google Plus, it happens with our website, it happens with all websites using HTTPS and serving webpages from a modern web server software like Nginx in fully asynchronous way. Practically for WordPress, the backend seeks for a cached content by fast-cgi and then hand it over to WordPress Cache System. If there is no Cache suppose by W3TC Plugin, the chance is huge to view Flash of Unstyled Content. Google Plus fix this by serving a special Error page – “Error in Loading CSS”. As CORS can still block some components, Web Font CDN can think twice before serving, it is not impossible view a webpage which is getting cleaned up by any Cache. With CSS-Preprocessors, it is more common, it is more common if Icon-Fonts are used.

Practically, the way web was somehow copy-pasted with errors like appending www before the domain name, unfortunately the same kind of morons, solved it by adding the CSS at the header in fully blocking way. In other words, to solve the Flash of Unstyled Content, they completely delayed the loading of webpage. With the advent of jQuery, FOUC has also become more prominent. These are kind of blocking way of fixing. HTML Header should only contain information about the webpage, not links to hundreds of CSS.

HTTPS, CSS Pre-Processors and Flash of Unstyled Content : Metrics

There are two metrics, so far has been widely used to understand the chance of viewing a fully rendered webpage. None of them actually points out the Flash of Unstyled Content issue, it is kind of reverse calculation from the data. They are the Speed Index and Paint Events, the later is part of the former. If Speed Index is closer to 1000, it will appear that the webpage loads instantly. Right now, from analysis of Alexa’s top 300,000 websites done by the HTTP Archive, the Speed Index holds the median value 3519 and average is 4493. In other words, most; over 90% websites shows a white page instead of Flash of Unstyled Content, which is not a great solution for HTML5.

HTTPS, CSS Pre-Processors and Flash of Unstyled Content : Any Fix?

Only practical fix is using div style for each HTML5 DOM Events. If this a part of the source, from the chunk a small part :

We traditionally define it from either inline separate CSS file or by loading the CSS file from somewhere else. The div class is defined there. If we use the style in this manner :

It will, indeed match the way Nginx delivers the webpage or rather the way we use the CSS Pre-Processors for initial styling. Unfortunately, for WordPress, Joomla, Magento, these should be done at the level of Theme Framework to Child Theme or rather hand coding. Another alternative way is to inline the style just before the class.

You can load the whole stylesheet later again, it does not matter. Both ways are hugely used by Google. Google usually starts their webpage in this way :

From Google’s way of output, it is quite clear that should be higher up, which actually with WordPress SEO happens with Genesis Framework. As Google needs not to optimize their onsite SEO score for being whitelisted by the system, they actually avoids hundreds of problems. It is like, Google needs no Pinterest, Facebook buttons.

Here is a kind of guide by Chrome :

As all of us wants to make the web secure with HTTPS, we practically should not make the visitor waiting forever with a white page, the problems should be solved step by step. First, inline all the CSS to footer to avoid blocking the page rendering EXCEPT CSS with huge Base64 Data URI stuffs and Premium web Fonts (which legally might not be delivered from own server).

Second, break the website in to pieces – install a separate WordPress for ‘/2010/’ and keep the caching to higher to avoid getting all the content flushed when a post is published.

The third part, is unfortunately manual, at least for now. There is WordPress plugin which comes quite closer to solve the problem, but the real result is far away. For HTTP 2.0 onwards, for Internet of Things and emerging facts like we’ll not use any IP in future, we should process and style the div class / DOM Elements as they get loaded. WebKit and Gecko renders the webpages in different ways.
This is, to some extent a kind of On-demand stalling. There is another method :

Unfortunately it can hang Microsoft’s excellent browsers.

If you are only a consumer, use latest dev version of Opera or Chrome to avoid viewing the FOUC related problem.