19

Although it is always recommended to put JavaScript and CSS code into appropriate files (as .js and .css), most of major websites (like Amazon, facebook, etc.) put a significant part of their JavaScript and CSS code directly within the main HTML page.

Where is the best choice?

Improve this question
5
  • That's an interesting observation. I wonder if it's because the majority of the time is spent setting up an HTTP connection? If the overhead is big enough, you probably want to pack as much as possible into the actual payload. Commented Sep 17, 2011 at 10:24
  • Yeah, interesting question (although maybe better suited on webmasters.SE?) Commented Sep 17, 2011 at 10:25
  • Many will disagree, but imo it makes little difference. I always put the css and js that I write into the html page. It's much more convenient to change it when I can easily read the stuff. Commented Sep 17, 2011 at 10:29
  • 2
    The "rules" for mega-sites like Amazon and Facebook on the one hand and your site on the other hand are not the same. Unless your site has hundreds of millions of visitors, you don't have to look that much into what they're doing... Commented Sep 17, 2011 at 10:41
  • Why you deleted your recent question stackoverflow.com/questions/16294803/…? I've got answer for you Commented Apr 30, 2013 at 7:54

6 Answers 6

Reset to default
16

Place your .js in multiple files, then package, minify and gzip that into one file.

Keep your HTML into multiple seperate files.

Place your .css in multiple files, then package, minify and gzip that into one file.

Then you simply send one css file and one js file to the client to be cached.

You do not inline them with your HTML.

If you inline them then any change to the css or html or js forces to user to download all three again.

The main reason major websites have js & cs in their files, is because major websites code rot. Major companies don't uphold standards and best practices, they just hack it until it works then say "why waste money on our website, it works doesn't it?".

Don't look at examples of live websites, because 99% of all examples on the internet show bad practices.

Also for the love of god, Separation of concerns please. You should never ever use inline javascript or inline css in html pages.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

You're absolutely right, this is a case of good versus evil - +Bruce, you found the evil, @Raynos, you're pushing the good.
9

http://developer.yahoo.com/performance/rules.html#external

Yahoo (even though they have many inline styles and scripts), recommends making them external. I believe google page speed used to (or still does?) do the same as well.

It's really a logical thing to have them separate. There are so many benefits to keeping CSS and JS separate to the HTML. Things like logical code management, caching of those pages, lower page size (would you rather a ~200ms request for a 400kb cached resource, or a 4000ms delay from having to download that data on every page?), SEO options (less crap for google to look through when scripts/styles are external), easier to minify external scripts (online tools etc), can load them synchronously from different servers....

That should be your primary objective in any website. All styles that make up your whole website should be in the one file (or files for each page, then merged and minified when updated), the same for javascript.

In the real world (not doing a project for yourself, doing one for a client or stakeholder that wants results), the only time where it doesn't make sense to load in another javascript resource or another stylesheet (and thus use inline styles/javascript) is if there's some kind of dynamic information that is on a kind of per-user, per-session or per-time-period that can't be accomplished as simply any other way. Example: when my website has a promotion, we dump a script tag with a small JSON object of information. Because we don't minify and merge multiple files, it makes more sense to just include it in the page. Sure there are other ways to do this, but it costs $20 to do that, whereas it could cost > $100 to do it another way.

Perhaps Amazon/Facebook/Google etc use so much inline code is so their servers aren't taxed so much. I'm not too sure on the benchmarking between requesting a 1MB file in one hit or requesting 10 100KB files (presuming 1MB/10 = 100KB for examples' sake), but what would be faster? Potentially the 1MB file, BUT smaller requests can be loaded synchronously, meaning each one of those 10 requests could come from a separate server/domain potentially, thus reducing overall load time.

Further, google homepages for example seem to dump a JSON array of information for the widgets, presumably because it compiles all that information from various sources, minifies it, caches it, then puts in on the page, then the javascript functions build the layout (client side processing power rather than server-side).

Improve this answer

10 Comments

"dynamic information" is bad. Generating js dynamically is evil. Your doing it wrong. Store that data in the HTML or expose it over REST.
Hmm, how would a javascript countdown function get the date to countdown to without dumping it to the page somehow then???
at least I have pride. best practices are best practices for reason. Maintainability and future proofing are worth gold. Trust me those 8 hours are worth more to a company in the long run.
Maybe if you intend that system to still be in use in a few years. The maintainability of dumping dynamic JS/CSS to the page is negligible because (in my case) its dumped via a server-side class that manages campaigns. What the best solution is, is all relative to your knowledge, skills, and what is expected of you in the workplace. If you worked for me and spent all day researching the best way to do something simple to make it 'best practice' I would fire you then and there. You should always gauge the workplace environment for what kind of level of alignment with standards they're after.
Get over yourself, I was speaking in general terms, so my response could be of some use to the OP. Do you think Microsoft, Google, Yahoo or anyone that is successful follows every single best practice to the letter? No. Because they know where the line is between spending stupid ridiculous amounts of time making something 'perfect' and making something functional. The OP wanted to know what the best choice is. The best choice is to follow best standards, but realise that sometimes you may not be allowed to or it makes better sense to 'hack' due to time or budget constraints given.
|
1

An interesting investigation might be whether they include various .css files regardless of the style blocks you're also seeing. Perhaps it's overhead or perhaps it's convenience.

I've found that while working with different styles of interface developer (and content deployers) that convenience/authority often wins in the face of deadlines and "getting the job done". In a project of a large scale there could be factors involved like "No, you ain't touching our stylesheets", or perhaps if there isn't a stylesheet using an http request already then convenience has won a battle against good practice.

Improve this answer

Comments

1

If your css and javascript code is for a global usage, then it is best to put them into appropriate files. Otherwise, if the code is used just by a certain page, like the home page, put them directly into html is acceptable, and is good for maintenance.

Improve this answer

2 Comments

"good for maintenance". Since when is hard coupling ever good for maintenance.
There is a balance point to choose, if one page is always changing, every time you have to change the js/css and gzip them again. And there is no need for user to reload the js/css if they already cached the main js/css.
1

Our team keeps it all seperate. All resources like this goes into a folder called _Content.

CSS goes into _Content/css/xxx.js

JS goes into _Content/js/lib/xxx.js (For all the library packages)

Custom page events and functions get called from the page, but are put into a main JS file in _Content/js/Main.js

Images will go into the same place under _Content/images/xxx.x

This is just how we lay it out as it keeps the HTML markup as it should be, for markup.

Improve this answer

Comments

1

I think putting css and js into the main html makes the page loads fast.

Improve this answer

1 Comment

Though it is hard to measure in a fast Internet connection.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.