Why is it faster to load HTML and CSS first while loading a page? [duplicate]

Question

This question already has answers here:

Should CSS always precede JavaScript? (14 answers)

Closed 10 years ago.

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)?

• James Donnelly: 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.
• Niet the Dark Absol: This question appears to be off-topic because it does not appear to be about programming within the scope defined in the help center. It may be better suited to Webmasters.SE.

Answer 1

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

• zerkms: "but it is "better"" --- curious if you could point to any modern site that follows this "better" idea
• trnelson: This answer is definitely on point and very concise and accurate. It should be marked as the answer. I learned a few things here!
• Niet the Dark Absol: @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: @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: @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

Answer 2

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.

• MHOOS: Are there any exception to this?
• trnelson: 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.
• Niet the Dark Absol: @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.

Answer 3

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.