We've built what is called a one page web app(a single html page + ajax)
In the pursuit of shaving as much http calls as possible, we bundled the JS and CSS in 2 files.

Meanwhile we took a look at the way Google Buzz for mobile is built and there are some interesting points:

• inline SCRIPT and STYLE
• no external JS and CSS
• data:images in CSS instead of url(...)

Thus we went further and "inlined" the 2 JS and CSS files in SCRIPT and STYLE tags. Removing 2 precious http calls.

Anyone experienced some troubles doing that on desktop browsers ?

I'm not trying to open a religious debate about unobtrusivity ;) It is about performance, network latency, mobile pages, etc...

We've built what is called a one page web app(a single html page + ajax)
In the pursuit of shaving as much http calls as possible, we bundled the JS and CSS in 2 files.

Meanwhile we took a look at the way Google Buzz for mobile is built and there are some interesting points:

• inline SCRIPT and STYLE
• no external JS and CSS
• data:images in CSS instead of url(...)

Thus we went further and "inlined" the 2 JS and CSS files in SCRIPT and STYLE tags. Removing 2 precious http calls.

Anyone experienced some troubles doing that on desktop browsers ?

I'm not trying to open a religious debate about unobtrusivity ;) It is about performance, network latency, mobile pages, etc...

• javascript
• html
• css
• mobile-website

• Note that IE does not support data: URLs – SLaks Commented Feb 24, 2010 at 17:03
• So was this actually a question or just a request for confirmation of what you actually believed? – Tom Commented Feb 24, 2010 at 18:12
• I'm obviously convinced by the results I got, but don't know if there is some hidden traps that someone already got. – Mic Commented Feb 24, 2010 at 19:48

6 Answers 6

It is worth noting here that inline CSS <style/> blocks trump linked CSS files when there is a conflict.

For example

<style type="text/css">
  div .whiteBG {
    background-color: #fff;
  }
</style>

trumps a linked CSS file containing

  div .whiteBG {
    background-color: #ccc;
  }

even if the linked files are called last.

Never. Put them in the html head so they load first and don't fret.

Virtually no-one has to deal with the traffic Google do. I'd say it's virtually never worth following Google's lead in optimisations, because they just don't apply in the real world.

Inlining and linked CSS and script files are equivalent. There's no difference other than the HTTP gets.

Is performance a problem you currently have? What Google does to support 100ks of concurrent users isn't necessarily what you should be doing. I've found it much easier to maintain code when things like CSS and JavaScript are kept in separate include files. I only break what I consider good coding practices when there's a pelling reason. It's hard to imagine a one-page app is being killed by traffic for two include files that will be cached by user browsers after first use.

I think you are over looking the fact that nobody actually coded the output you see with a system like Google Buzz, or Gmail. They depend on a very very sophisticated system that have built on Python and C to pile the source and make it very friendly to there homegrown "push" system they have.

I dont think you should be as concerned with the output as being multiple requests, I think that issue is totally secondary to being able to build and deploy your app. Later focus on plopping all your JS and CSS in the head, as this can be done pragmatically when you deploy.