Put javascript and css inline in a single minified html file to improve performance?

Question

A typical website consists of one index.html file and a bunch of javascript and css files. To improve the performance of the website, one can:

• Minify the javascript and css files, to reduce the file sizes.
• Concatenate the javascript files into one file and similar for the css files, to reduce the number of requests to the server. For commonly used (and shared) libraries like jquery it makes sense to leave them external, allowing the browser to cache the library and reuse it in different web applications.

I'm wondering if it makes sense to put the concatenated javascript and css file inline in on single html file, which will reduce the number of requests even further. Will this improve the performance of your site? Or will it work reversed, making it impossible for the browser to cache anything?

Answer 1

Concatinating your CSS and JS files into one file will reduce the number of requests and make it load faster. But as commented, it won't make much sense unless you have a one-page site and the load time of that page is very critical. So you're better off to separate CSS from Javascript in my opinion.

Here's a book where you can learn more about the topic:

High Performance Web Sites

Answer 2

this tools maybe help you. Turns your web page to a single HTML file with everything inlined - perfect for appcache manifests on mobile devices that you want to reduce those http requests.

https://github.com/remy/inliner