Should I Inline Css & Js In Mobile Sites To Save Bandwidth?

Is there a reason not to inline CSS & JS when I make a mobile-ONLY site, to save bandwidth?

Solution 1:

The only possible benefit I can think of is a couple less HTTP requests, but you totally give up the benefits of having the files cached if you do so.

Caching is a good thing and it saves bandwidth, so I can't see why you'd want to lose that advantage.

Besides that (not related to performance), maintenance will be a nightmare with everything inline, as it would be with any site.

I wouldn't be the least bit surprised if there were even more compelling reasons not to.

Use separate files.

Solution 2:

Yes. First of all, you'll either have to code like that or inline them dynamically. Dynamically = waste of processing power. Code like that = hard to maintain and bad practice. And for what? You barely save any bandwidth at all, and it makes caching impossible and might actually slow you down. Now minification, on the other hand... that's what you should do instead. Minify your CSS and JavaScript, combine them into one file, and it's okay if you do this dynamically because the benefits outweigh the problems.

Solution 3:

In-lining everything has different effects:

• Reduces number of requests -- but increases your HTML file size
• Increased HTML file size -- Load time increases considerably
• No caching -- you have lost a good opportunity
• Maintenance is like hell -- unless you inline as a step of your development process

A good blog post you can read - Why inlining everything is not the answer There he recommends only to inline very small files (less than 1KB)

Hey by the way, why not inline -- Google does it in their homepage. Anyone who has 'View-ed Source' Google has seen it. But still its your choice. If you are still thinking to reduce the number of HTTP requests then it is better to use a build tool to do the inlining autonomously. Otherwise you'll have to go through the 'maintenance hell'.

Solution 4:

Yes, this reason is named cache :-) not inline css and js will be cached (Mobile browsers with html support use cache)