• Home
  • Archive
  • Tools
  • Contact Us

The Customize Windows

Technology Journal

  • Cloud Computing
  • Computer
  • Digital Photography
  • Windows 7
  • Archive
  • Cloud Computing
  • Virtualization
  • Computer and Internet
  • Digital Photography
  • Android
  • Sysadmin
  • Electronics
  • Big Data
  • Virtualization
  • Downloads
  • Web Development
  • Apple
  • Android
Advertisement
You are here: Home » HTTPS, CSS Pre-Processors and Flash of Unstyled Content

By Abhishek Ghosh October 9, 2014 5:43 pm Updated on October 9, 2014

HTTPS, CSS Pre-Processors and Flash of Unstyled Content

Advertisement

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.

Advertisement

---

HTTPS, CSS Pre-Processors and Flash of Unstyled Content

 

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 :

Vim
1
2
3
div class="menu-blog-submenu-container"
...
// HTML opening and closing avoided for avoiding conflict on this page

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 :

Vim
1
2
3
4
5
6
html itemscope="" itemtype="http://schema.org/WebPage" lang="en-IN"
head
meta content="text/html; charset=UTF-8" http-equiv="Content-Type"
meta content="/images/google_favicon_128.png" itemprop="image"
title break css to div class - Google Search title
// HTML opening and closing avoided for avoiding conflict on this page

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 :

Vim
1
https://developer.chrome.com/devtools/docs/css-preprocessors

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 :

Vim
1
http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content/

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.

Tagged With flash of unstyled content , prevent flash of unstyled content html css

This Article Has Been Shared 777 Times!

Facebook Twitter Pinterest

Abhishek Ghosh

About Abhishek Ghosh

Abhishek Ghosh is a Businessman, Surgeon, Author and Blogger. You can keep touch with him on Twitter - @AbhishekCTRL.

Here’s what we’ve got for you which might like :

Articles Related to HTTPS, CSS Pre-Processors and Flash of Unstyled Content

  • Cloud Computing PaaS and SaaS

    Cloud Computing PaaS and SaaS are another two levels apart from IaaS. SaaS is probably the most popular form of Cloud Computing.

  • Cloud Computing Articles – List With Description of all we have Published

    Cloud Computing Solution penetrating as business solution and in day to day usage. Here is list of all articles on Cloud computing we have published so far.

  • Cloud Computing Business Model

    Cloud Computing Business Model, often we hear about this phrase or its shorter phrase Cloud Computing Biz Model. What is exactly this Business Model is?

  • Untrained Employees Increasingly Becoming a Burden For Cloud

    Untrained Employees increasingly becoming a burden for Cloud, a vacuum of skilled networking administrators and personnel lacking experience which is grave.

  • Libswarm : The Open Source Docker API

    Libswarm is an Open Source Docker, a Toolkit for Composing Network Services and Supported by Rackspace Cloud. We can aggregate all containers easily.

Additionally, performing a search on this website can help you. Also, we have YouTube Videos.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!

If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.

Contact Us

Subscribe To Our Free Newsletter

Get new posts by email:

Please Confirm the Subscription When Approval Email Will Arrive in Your Email Inbox as Second Step.

Search this website…

 

Popular Articles

Our Homepage is best place to find popular articles!

Here Are Some Good to Read Articles :

  • Cloud Computing Service Models
  • What is Cloud Computing?
  • Cloud Computing and Social Networks in Mobile Space
  • ARM Processor Architecture
  • What Camera Mode to Choose
  • Indispensable MySQL queries for custom fields in WordPress
  • Windows 7 Speech Recognition Scripting Related Tutorials

Social Networks

  • Pinterest (24.3K Followers)
  • Twitter (5.8k Followers)
  • Facebook (5.7k Followers)
  • LinkedIn (3.7k Followers)
  • YouTube (1.3k Followers)
  • GitHub (Repository)
  • GitHub (Gists)
Looking to publish sponsored article on our website?

Contact us

Recent Posts

  • Cyberpunk Aesthetics: What’s in it Special January 27, 2023
  • How to Do Electrical Layout Plan for Adding Smart Switches January 26, 2023
  • What is a Data Mesh? January 25, 2023
  • What is Vehicular Ad-Hoc Network? January 24, 2023
  • Difference Between Panel Light, COB Light, Track Light January 21, 2023

About This Article

Cite this article as: Abhishek Ghosh, "HTTPS, CSS Pre-Processors and Flash of Unstyled Content," in The Customize Windows, October 9, 2014, January 29, 2023, https://thecustomizewindows.com/2014/10/https-css-pre-processors-flash-unstyled-content/.

Source:The Customize Windows, JiMA.in

PC users can consult Corrine Chorney for Security.

Want to know more about us? Read Notability and Mentions & Our Setup.

Copyright © 2023 - The Customize Windows | dESIGNed by The Customize Windows

Copyright  · Privacy Policy  · Advertising Policy  · Terms of Service  · Refund Policy

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Do not sell my personal information.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT