2

Why is it faster to load HTML and CSS first while loading a page. What are the exceptions to this general rule(if there is any)?

MHOOS
  • 5,146
  • 11
  • 39
  • 74
  • If you really care about speed you can minify them both. You can also remove any unnecessary declarations and elements as well. If it's a single-page application, you could also go as far as sticking your entire CSS in a `style` element in your document's `head`. As per the way StackOverflow works, I've had to vote to close this question for being **Primarily Opinion Based**. – James Donnelly Oct 21 '14 at 08:27
  • This question appears to be off-topic because it does not appear to be about programming within the scope defined in the [help center](http://stackoverflow.com/help/on-topic). It may be better suited to [Webmasters.SE](http://webmasters.stackexchange.com/). – Niet the Dark Absol Oct 21 '14 at 08:49

3 Answers3

6

Note: This question may be better suited to Webmasters.SE

Your question title and content are different :p

It's not "faster", but it is "better". And it looks faster to the user.

The reason is, loading the HTML first is crucial because it gets the content there in front of your user.

Loading CSS then makes it look pretty. Ideally, it should take zero time to load CSS, which is why CSS is generally a blocking request to avoid the FOUC (Flash Of Unstyled Content) that may occur otherwise.

Finally, JavaScript. This is loaded last because it should not have an effect on the page's appearance. At least, not immediately. Not before user interaction. And since the user is extremely unlikely to have Terminator reflexes and interact with your page in the first few tenths of a second, then it's okay for it to be loaded in just a little later.

Note that I say "should not" above, but that doesn't mean "must not". On my own project, the JavaScript is actually responsible for rendering the navigation bar and other header/footer content - this was done so that the content could be cached and save up to 8Kb of bandwidth for every single pageload - with a few million pageloads per day, that adds up fast! But in this case, space is already reserved for the header/footer, meaning the content itself can begin to be read even in the fraction of a second before header/footer content has been loaded - it's all about getting the important content up and visible first

Community
  • 1
  • 1
Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • "but it is "better"" --- curious if you could point to any modern site that follows this "better" idea – zerkms Oct 21 '14 at 08:33
  • This answer is definitely on point and very concise and accurate. It should be marked as the answer. I learned a few things here! – trnelson Oct 21 '14 at 08:34
  • 1
    @zerkms Mine does, and I've gotten organic feedback (ie. unprompted) congratulating me for having a site that "seems to load before you even click the link" because it just looks that fast as a result of optimisations such as this. – Niet the Dark Absol Oct 21 '14 at 08:35
  • @Niet the Dark Absol: stackoverflow.com looks instant to me and it loads css in its header. So may be it's not the bottleneck? – zerkms Oct 21 '14 at 08:35
  • This cached navigation idea is not one that I have heard before, but it's definitely fantastic. Do you ever have issues with crawling from search engines? I have to assume you're using site maps and canonical URLs and probably no issues. – trnelson Oct 21 '14 at 08:38
  • @zerkms SO has extremely powerful servers backing it. Most sites don't, so "looking instant" becomes more of a challenge :) – Niet the Dark Absol Oct 21 '14 at 08:39
  • @Niet the Dark Absol: if you have slow server/slow script - then your browser will be spinning throbber *awaiting for the first byte*. After the response is generated - the speed of serving the content will depend only on latency + network speed. So honestly I don't see the connection between speed of **rendering** and servers' CPU power. – zerkms Oct 21 '14 at 08:40
  • 1
    @trnelson I can sort of get away with it because practically all the navigation is game-related and therefore wouldn't be indexed anyway. The only really indexable things are the homepage, profiles and the forums, all of which can be backlinked from the forums themselves. Sort of cheating. In the general case, you can use a sitemap or `robots.txt` file to help search engines. – Niet the Dark Absol Oct 21 '14 at 08:40
  • @zerkms True, that's why it's important to optimise every step of the way. Hence the need to load scripts last, because by the time the user has already waited for the server to respond and stuff, the last thing they need is more wait time due to sub-optimal CSS/scripting order. – Niet the Dark Absol Oct 21 '14 at 08:41
  • @Niet the Dark Absol: "that's why it's important to optimise every step of the way" --- it's not clear why it's an "optimization". The UX will be definitely worse due to FOUC. So from this perspective it's rather degradation then optimization. The performance of the "css in the top" is not worse just because CSS files are cached after first request. So it's basically free to put them in the head. I don't even mention that Google in their performance guides recommend to put CSS in the top (https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css) – zerkms Oct 21 '14 at 08:45
  • @zerkms Maybe I'm having trouble expressing myself correctly this early in the morning XD What I'm trying to say is that the page needs to load in a way that appears as fast as possible. While this means having powerful enough servers to handle your website, this also includes little things like loading pages in the best way to achieve the desired effect. The whole question is about loading HTML and CSS first, presumably before JavaScript - and the answer I've been trying to give is that loading them first and the JS later gives the appearance of loading faster because the content takes less. – Niet the Dark Absol Oct 21 '14 at 08:47
  • 1
    @zerkms Ah, I see - I meant that CSS should stay in the head, as this will allow the page to load FOUC-less...ly. But I didn't actually say that XD – Niet the Dark Absol Oct 21 '14 at 08:48
  • @NiettheDarkAbsol now the whole discussion makes sense to me :-D – zerkms Oct 21 '14 at 08:49
  • @zerkms Yay sense-making! :D – Niet the Dark Absol Oct 21 '14 at 08:50
  • @zerkms: Google's thoughts on [JavaScript inside head](https://developers.google.com/speed/docs/insights/BlockingJS); it partially explains why putting CSS before JavaScript files is better. – Salman A Oct 21 '14 at 09:50
3

CSS files can be loaded in parallel with the HTML. That's why they are generally declared first in the head of the documents to load. Browsers are allotted a few streams where they can load documents in parallel from the same domain. For even better performance, if you can load files from different domains, or subdomains, you can even get better performance as you can load more documents in parallel.

JavaScript files differ in that they are considered blocking, and cannot necessarily be loaded in parallel the same way that CSS files can be. That is why it's generally best practice to load JavaScript files near the end of the document where possible.

trnelson
  • 2,715
  • 2
  • 24
  • 40
  • Are there any exception to this? – MHOOS Oct 21 '14 at 08:34
  • The only exception I can think of, is when you want to dynamically change CSS on the fly. HTML allows you to load and change CSS declarations at runtime and the changes will be applied immediately. – trnelson Oct 21 '14 at 08:37
  • 1
    @MHOOS There are exceptions to everything. Even "thou shalt not kill" since it's almost immediately followed by "one who kills shall be put to death", which implies the assumption that "one who kills a killer shall be exempt from being put to death", otherwise one murder would lead to the extinction of the human race... Anyway... PageSpeed offers insights. Insights are perhaps lower-rated than "advice", as they depend entirely on context and requirements. – Niet the Dark Absol Oct 21 '14 at 08:37
0

It's more beneficial for SEO, because Crawlers, scans thousands of websites. And it reads, your HTML source code for just a few seconds. Regardless, even if your website is, not completely loaded. So better load the parts with useful Keywords first.

Cyd Dalupan
  • 1
  • 1