Yup yup. That list and the book I sighted were done by the same guy. The book goes way more in-depth and shows his research, which is great.
Indeed – that’s why I don’t even wait for onload to start applying those changes and do it right before </body>… at that point the DOM is built, but putting it there applies the changes before CSS is applied.
Though a lot of the things like “doing it in the head stops CSS from starting to load” usually come up when people don’t have their site put together well in the first place. I often laugh when the people kvetching over things like the load order in the header slowing the page down have a hundred K of HTML, 50k of CSS and 200k of javascript doing 10k of HTML, 10K of CSS and 20k of Javascript’s job.
You would place such a script in the <head> (as it avoids applying CSS to elements that haven’t been created, which would generate a FOUC). Same for modernizr. Some polyfills require to be included before the DOM loads. But everything you can put right before </body>, and in one single file, is of help in terms of efficiency.
Does it? I’m pretty sure the CSS gets applied as you go along… certainly when an html page is taking a while to download the styling is applied as it is downloaded, not afterwards.
If I’m not mistaken, it loads as the elements complete. If you loaded Javascript before that, then the Javascript would apply first… however the elements you want to affect may not be there if you just let it run as soon as it’s loaded.
And just because you optimize the load order doesn’t mean you have tons of waste. I keep my sites, images, and CSS as trim as possible (including minifying), but I still worry about it. Every quarter of a second I can save a user is a quarter of a second they can spend on my site, not waiting for it.
Exactly, not to mention the bandwidth fees you would save if it were a heavy use site. Lots of benefit for little effort.
Watch a browser load CSS.
It does a reflow (second pass). Loads images/resources last.
From my point of view i agree with you that css should be appeared before java script your answer right.
Does it really make it faster? I mean that loading images/resources last may speed the loading of the site itself and make it usable from the very beggining and that makes sense… but it terms of overall loading speed (with everything included) I’m not sure if there’s such a difference and, after all, the browser needs to recalculate all the space and positions.
Molona: no, that’s just what browsers do: they go through the CSS sheeet and mark the resources like background images, but load them at the end of the stylesheet (and yes, those bg images can block anything after the <link> tag too).
I put my CSS in the head.
I put my JS at the end of my body, before </body>
That’s a really interesting video. Do you happen to know how they generated that? Is it something publicly available?
I’d love to know more about how they did those videos. All I know is they are Japanese.
I found them via Vineet Gupta’s page: How Browsers Work – Part 1 – Architecture » Vineet Gupta gotta scroll a ways, there are three of them.
I wonder why those who think the CSS link should come before the javascript have not given us a good reason why they think so. For me, I don’t think it matters which comes first. It’s just a trick question.
we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.
From the link I mentioned above:
I dunno if that’s the be-all end-all answer or not… dynamic pages are addressed underneath this quote.
Practically, it is recommended to get the javascript loaded at the end and thus you may include the CSS first in <head>
If a visitor is on a slow internet connection and you have JavaScript is loaded before CSS or other elements, the remaining page wont load and will wait till the JavaScript is completely loaded.
Css should be added first as it will load the web design to your pages. After that javascript will do its work. So css is the first preference.
-
You should put the stylesheet links and javascript <script> in the <head>, as that is dictated by the formats. However, some put javascript <script>s at the bottom of the body, so that the page content will load without waiting for the <script>, but this is frowned upon.
-
CSS takes precedence in the order by which they are linked (in reverse): first overridden by second, overridden by third, etc.
Bwahaha, oh we’ll tell you alright : )
As pointed out in today’s TheDailyWTF, a “School of Web Design” is teaching that CSS stands for Client Side Scripting.