20

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:

  1. 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?

  2. 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? enter image description here

Satya Prakash
  • 3,372
  • 3
  • 31
  • 47

4 Answers4

6

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.

Community
  • 1
  • 1
Jeremythuff
  • 1,518
  • 2
  • 13
  • 35
  • Your answer is mostly based on all or first set of full css content. I was looking for css content which applies to part of doc or does not apply anywhere then what happen. – Satya Prakash Dec 08 '13 at 15:22
  • Hope it is correct: "... In my experience the loading of css will be virtually instantaneous .." So, +1. I was looking for some Data about repaint time etc. when found some CSS at the end. – Satya Prakash Dec 21 '13 at 13:19
5

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:

  1. User Agent (the web browser's native stylesheet)
  2. Author (the stylesheet that you write)
  3. 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:

  1. The browser has its own native stylesheet sitting in the background
  2. The browser loads your HTML document first
  3. The browser then reads the <head>
  4. the browser loads assets in the <head>
  5. the browser parses the rest of the document, i.e. the <body>. assets and style rules located here will be processed last.
  6. 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.

paceaux
  • 1,762
  • 1
  • 16
  • 24
  • You talked about putting styles at the bottom instead of head. But my question is about - what happen when some part of css are at bottom only. Mostly all css are in head as usual but only few are at the bottom. Does it cause blocking? Does it cause ripple effect? Does it cause repaint of all doc or part of it, how much resources wasted in it, etc – Satya Prakash Dec 20 '13 at 16:03
  • I modified my answer slightly to answer your question. Styles in the footer are not blocked, nor do they block. They are processed last. The selectors which are in the footer stylesheet are the only items to receive a "repaint". – paceaux Dec 20 '13 at 16:13
  • Assumed you are correct about - "... they will not block styles in the , either...", so +1. Thanks. I am looking for measure and stats. Simple answer I know. – Satya Prakash Dec 21 '13 at 13:13
0

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)

  1. 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).
  2. Have small additional css - try with [style]...[/style] at the end of the body before scripts.
  3. Do not worry about 10 icons rendering, worry about download time for 1st visiting users (for fonts).
igorpavlov
  • 3,576
  • 6
  • 29
  • 56
  • Your 1st point, is not telling where to put Large CSS. You said to put it nowhere. I also thought to get idea about how to measure or any measure already available. Simple answer I know but I want answer with explanation to measure or already measured and presented here. Thanks – Satya Prakash Dec 21 '13 at 13:11
-2

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.

Oriol
  • 274,082
  • 63
  • 437
  • 513
  • Google itself say, put only important css above the fold. I don't remember the rule right now otherwise I would have given you. Though I do not like that but .. – Satya Prakash Dec 21 '13 at 13:04
  • Yes, correct, we don't really need to put in , it depends on your CSS code – Mike Nguyen Jan 13 '21 at 07:10