With Firefox Quantum I noticed a "glitch" on loading the CSS of some websites.
One of these is my company's website:
Or Github too:
In the first one, we have only one CSS file in the <head> section of our pages.
It seems that - only in Firefox Quantum - the CSS doesn't block the render of the page as it should. The rest of the page loads without the CSS for some instants, then the CSS is applied as if it loads asynchronously (but it's not).
Obviously, this behavior doesn't happen in all the websites I visited.
I really have no clue what's going on :)
To summarize information from bug 1404468, the "flash of unstyled content" ("FOUC") usually happens when something asks for information depending on styles before the stylesheets are loaded:
Scripts on the page that force layout/style recalc, that are executed before the stylesheets are loaded.
It's recommended to "Put all your styles in and make sure that any script that asks for layout information comes after them".
Be careful with defer scripts, which may execute before the stylesheets are loaded (spec bug).
An iframe that loads faster than parent page's stylesheets forces layout of the parent page for complicated reasons, described in the bug.
Addons (example) which ask for layout information before the styles finished loading (i.e. on run_at: "document_end"). Firefox 60 (2018-05-09) fixed FOUC with the addons that queried layout using run_at: "document_idle", and a few add-ons were fixed around the same time.
Firefox had a bug causing it on sites with autofocus, notably GitHub. Also fixed in Firefox 60.
Factors that do not cause FOUC by itself, but can increase the chances of it being visible:
Firefox 53 reduced nglayout.initialpaint.delay (which delays the initial painting of a page after it stopped being blocked by stylesheets, assuming the HTML is not fully loaded by that time) from 250ms to 5ms.
If the FOUC-causing stylesheets happen to load before the delay, you won't see the unstyled content. With 5ms it became much less likely.
If the HTML page itself loads slowly, you may see some content jumping around the page with more likelihood.
Slow network combined with the factors above increases the chances of seeing the FOUC.
Finally, it's common to see the fonts on the web page "upgrade" to page-provided web fonts, because they don't block the initial rendering by design.
Quick fix that worked for me (from vrancken.gilbert in bug 1404468):
<body>
<script>0</script>
<!-- Your code ... -->
</body>
(...) if you add a dummy script right after your tag FF will only render the page when the CSS is loaded.
Additionnal info :
If you manage the Content-Security-Policy (CSP) in your application (prevents inline-script), it's necessary to white-list this line :
For example :
In your application :
<script nonce="JwkbSbZ2MYNwp5Adp8Nk">0</script>
In your 'Content-Security-Policy' HTTP Header :
(...) script-src 'self' 'nonce-JwkbSbZ2MYNwp5Adp8Nk'
Ref : MDN
Related
So I read everywhere that CSS is render blocking. Though this is different than the blocking caused by <script> tag as it does not pause parsing of HTML. The browser basically waits for the CSSOM to be constructed and then only render anything to the webpage. Therefore, when CSS is loaded late, it can effect load time for your webpage. But what I don't understand is that if this is the case, how is FOUC (Flash of unstyled content) caused? FOUC is basically when the browser momentarily displays HTML without the styling, and then when the CSS is available, it displays the correctly styled page. So if browser always waits for the CSS to be loaded and parsed first before rendering anything, FOUC should not happen.
if browser always waits for the CSS to be loaded and parsed first before rendering anything, FOUC should not happen.
Indeed, that's what should happen in such a case, except that browsers don't wait for all resources to be loaded before rendering.
Note that this doesn't contradict what you "read everywhere", if you really did read "The browser basically waits for the CSSOM to be constructed and then only render anything to the webpage."
The browser can very well build the CSSOM while it still misses resources, for instance, it definitely doesn't need to load all background-images resources to calculate the elements' box positions.
And it may actually even need to build the CSSOM as soon as the DOM is being constructed because in cases like the below snippet, you need the CSSOM for the js to work:
<h1>test</h1>
<script>
// without CSSOM, we couldn't get its width yet
console.log(document.querySelector('h1').offsetWidth);
</script>
<style>
/* even if it's gonna be invalidated later on */
h1 { width: 300px; border:1px solid; }
</style>
FOUT in SPAs using FEFs. That's a lot of odd acronyms. :)
But it's still an issue.
I have a dynamic component which loads a bunch of components which are meant to look in a very specific way. Each would have its own css, and critically, its own specific fonts.
The fonts are the issue here.
What ways are there to avoid this FOUT in this case?
This is my current research on the topic:
Browsers have a mechanism to hide text it detects is styled with a custom font until the font has loaded.
This does not work in vue, because the text isn't loaded yet either for the browser to detect, so when JS puts the text, this browser mechanism isn't triggered.
Might be fixable via SSR, static DOM - browser can now detect. Still might not want - FOIT (Flash of invisible text) arguably worse (no content vs bad content).
This does nothing for dynamic components
CSS is consolidated unless async component.
You do get all CSS imports, but not all fonts until they are used on the page. I.e. it makes a network request for the css import, but not the fonts, until something on the page gets styled with this font. At least it's... quic. :D
WebFontLoader?
A js library by google/typekit, companion to google web fonts.
Possibly can be used to delay component loading until the font has loaded using its events?
Requires things outside the component to know about the font.
No obvious way to reach down and pull out CSS.
Depending on how many fonts you're loading and the size there are a few things you could do.
Call the fonts in the base HTML file (separate from your other CSS) so the browser is aware of them. Then create a hidden div in the parent component with CSS calling the font for the child. This will cause the browser to request the font before the child component is loaded.
Load all fonts separately in the HTML with rel='preload' or rel='prefetch'. I would do this at the bottom of the HTML so you don't block other content.
Load your fonts in the created lifecycle hook using the CSS Font Loading API. I'm not sure how this will work with Google Fonts vs self-hosting.
Create CSS transitions when loading content like a half-second fade to mask the FOUT. This is obviously not a solution but never underestimate the power of smoke and mirrors to influence the way your app feels.
Also, you should try to make use of the font-display (docs) CSS property. This won't solve the problem but it will make the results more predictable.
My requirements:
Icons will be used "above the fold", including the site-wide navigation header/menu
Page should initially render without waiting for icons to load (i.e. icons are not added to the HTML nor are they part of critical CSS). In other words icons are considered as progressive enhancement, not core functionality.
Icons should be able to be cached, as many will be used on every page
Do not cause too many extra HTTP requests
Possible solutions (and why they may not work):
Webfont
As it's applied using CSS, it will become part of the critical CSS and cause extra roundtrips before the page can render = violation of requirement 2
One SVG file per icon
Causes one HTTP request per icon = violation of requirement 4
Embed SVG sprite and <use> it
Will be embedded on every single page and hence non-cacheable = violation of requirement 3
External SVG sprite
This is the only solution I can think of that provides efficient HTTP requests (only one!), will support caching, and won't be required before the initial content can be painted by the browser. The sprite could be generated easily using something grunt-svgstore but I'm not sure exactly how the rest would work, particularly CSS. Using <object> with an external link sounds plausible for the HTML (assuming a polyfill for IE is used) but then what about icon backgrounds for CSS - reference them by URL?
I understand that CSS is used to decide about Layout and other styling things on Web Page. and If CSS is at the bottom of the page then everything (html elements, text, image, etc) will be displayed by using Browser's own styling and when browser find our CSS then it redesign pages again for us. It may be called repainting!
So, I understand that it will look very ugly repainting the page and user seeing it (FOUT - Flash of Unstyled Text - as expert named). But still, I want to understand about:
How much time this repainting can take? Approx value! I understand this can depend on content on the page.
What else happen or can happen?
My main concern right now is about using font-awesome CSS file (externally hosted on their own cdn which download css and font files). I want to know what will happen across devices if I place this at bottom of the page or delay its loading ? Currently it is placed on <head> section as
link rel='stylesheet' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' type='text/css' media='screen'
Use Del so that it should not look main part of the question. Main part of the question is about Some CSS at the bottom then What will happen to repaint, Blocking, etc. with measurement given or supported by measurement etc.
In the above case or in case when only part of document will get affected by CSS at the bottom then what will happen? Browser repaint everything, and what else? How much time it can take. Suppose, font-awesome is used at 10 icons placed in <i>.
I am never sure of what actually happens when CSS is at the bottom. So, please if you have any video or image showing flow then please mention here.
Base everything on performance across devices, and off course user experience as well. Thank you.
Update: I got something more for myself and for everyone.
Here is a function (delayLoadCss) Google suggest for css for below-the-fold content. Though, I am not going to go that extreme but what about doing that for Font-Awesome kind of CSS?
In my experience the loading of css will be virtually instantaneous no mater where it appear on the page--except in one instance: what will cause a delay in the browser applying your css is placing your css after a script element that takes time to complete.
This is why it is considered best practice to end your body section with your scripts, that way your page is rendered and styled before the browser commits to crunching through your scripts.
So if you html looks like this:
<head>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
<script>
[long loading js]
</script>
</head>
<body>
... content
<script>
[long loading js]
</script>
</body>
Then your css will still be applied right off.
However if you structure it like this:
<head>
<script>
[long loading js]
</script>
<style>
[css here]
</style>
</head>
<body>
... content
<script>
[long loading js]
</script>
</body>
or even
<head>
<script>
[long loading js]
</script>
</head>
<body>
... content
<script>
[long loading js]
</script>
<style>
[css here]
</style>
</body>
Then your css will not be applied to the document until after the js has completed.
The first is best practice and I recomend keeping style tags out of your document completely, but certainly out of the body of your document. External style sheets placed above you script tags is the way to go... This is true for font awesome's externally hosted css also. The browser should not hang on rendering that unless your link to it appears after a script element that is taking up the browsers attention.
* EDIT *
However this post directly contradicts what I just said.
There are two cascades that occur with CSS.
The small Cascade: this is the parsing of an individual style sheet
The Big Cascade: This is where the browser performs three "small cascades", in this order:
User Agent (the web browser's native stylesheet)
Author (the stylesheet that you write)
User (the stylesheet the end user can write).
Your question is about what would happen if you put styles anywhere but the head. Let's discuss:
The browser has its own native stylesheet sitting in the background
The browser loads your HTML document first
The browser then reads the <head>
the browser loads assets in the <head>
the browser parses the rest of the document, i.e. the <body>. assets and style rules located here will be processed last.
the last <style> block, or the last stylesheet in your document is the one whose styles over ride everything else.
In a nutshell, the browser applies styles in the order in which they are seen. A stylesheet at the footer would make things worse, not better. I can't offer a quantifiable measurement of worse because I don't have your stylesheets or website.
All Browsers have FOUC (or FOUT). The duration of it is based on the speed of the browser and the quality of your stylesheet. A minified stylesheet which applies text styles immediately after the reset, and before other styles, usually has the least amount of FOUC.
The styles in the footer are not blocked from being processed, and they will not block styles in the <head>, either. Styles in the footer are simply processed last.
I appreciate the answer from Jeremythuff, however I would also like to answer as well and hope it helps you.
Approx it will take a time to download CSS file (if not cached and not inlined) + a moment. This moment depends on CPU, GPU, HD speeds (if cached) and content + scripts as you have already mentioned. In real practice you do not want to use [link href="..."/] at the end of body because of download time.
You also do not want to use inline styles, because they are not cached and this is yet another piece of code users will download with html, however, this solution can work with small inline styles. In practice it does not produce blinks.
I recommend the following schema:
HEAD > MAIN CSS > BODY > HTML > ADDITIONAL CSS > SCRIPTS
If scripts change default behavior of elements (for example preventing a link from clicking) I recommend to put scripts in head instead.
Now about fonts. In my opinion using external fonts is a bad practice. But if you want, fonts better to include in head because you probably cannot inline them in style tag. So the download time problem occurs here.
10 icons is nothing for nowadays CPUs even on mobile phones.
My advices are straightforward:
(if across devices, I also think of page weight because of slow mobile networks)
Have large additional css (significant difference between the size of html with and without css) - do not include at the end nor as [style]...[/style] (never caches), neither as [link href="..."] (takes download time).
Have small additional css - try with [style]...[/style] at the end of the body before scripts.
Do not worry about 10 icons rendering, worry about download time for 1st visiting users (for fonts).
Your questions are interesting... But there's a problem:
CSS stylesheets must be placed in the <head>!! (except if they are scooped)
Otherwise, your html markup is invalid. Then, every browser could handle it differently.
It doesn't always happen so it makes me think it happens when the browser doesn't have the css cached. What happens is the page loads and you see the entire page without any css and then it "pops" in styled. The css files are hosted off a different domain and they're all in the header of the document. Any thoughts?
Browser around the source I noticed that we have google optimizer code on some pages. Could this cause this to happen?
There might be many reasons, behind this, but as you described:
Your CSS are not included in inside the <head>
Is this perhaps a flash of unstyled content.