17

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?

Jos de Jong
  • 6,602
  • 3
  • 38
  • 58
  • 3
    unless your website or application is a single page, your users are going to be requesting all your JS/CSS every time they visit a new page. – jackwanders Aug 13 '12 at 13:54
  • 1
    If the HTML file is static and can be cached, then it *might* be worth doing this, but the improvement will be quite small. Are there serious performance problems now? (If there are many pages, then it's almost certainly not a good idea.) – Pointy Aug 13 '12 at 13:54
  • From a maintainability perspective it would be a nightmare for very little gains. You would save on a little bit of overhead but you'd be far better off just setting up a cookieless domain for your image, style and script files. – JaredMcAteer Aug 13 '12 at 13:54
  • I'm indeed talking about a static, one-page web application. The html, js, and css only changes once in a while (and all together) when deploying a new version of the web application. – Jos de Jong Aug 13 '12 at 14:18
  • I created and answered a similar question a while ago: http://stackoverflow.com/questions/23226450/grunt-tasks-to-minify-single-html-file-with-css-and-javascript/23345904#23345904 – bitoiu Oct 16 '14 at 12:29

5 Answers5

6

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

gerky
  • 6,267
  • 11
  • 55
  • 82
  • 1
    Well said. The best performance heavily depends on the use case. In a multi-page web application you should have a separate file with js and css, shared over all your pages, which can be cached once. In that case it would be a bad idea to put the js+css inline. I suppose the only situation where it makes sense to put js+css inline is when you have a static, single page web application (which is my case). – Jos de Jong Aug 13 '12 at 14:35
  • Well, in that case, I suppose it could work. But unless there's really a need for optimization (YAGNI/premature optimization), I would still recommend separating CSS and JavaScript files. – gerky Aug 13 '12 at 14:57
  • Definately true, ["premature optimization is the root of all evil"](https://en.wikipedia.org/wiki/Program_optimization) ;) – Jos de Jong Aug 13 '12 at 14:59
  • While in some context the answer is correct, it's not technically the answer. One obvious scenario to put everything in single HTML file is embedding the page as local asset into mobile application to display in web view. So yes, there are cases when this is definitely an improvement of UX. – rudyryk Sep 10 '20 at 09:45
6

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

herozhang
  • 61
  • 1
  • 2
  • 1
    Thank you for answering the question -- all of the other answers about it being a bad idea or premature optimization are valid in general, but I have a very specific, one-off situation where doing this would definitely be helpful. – knickum May 17 '18 at 13:29
3

It would cut down on the number of requests but it would also mean no caching of those for use on other pages. Think of defining an external file as also a way to tell the browser "and this section of the site is reusable". You'd be taking that ability away and so the CSS and JS would load. Like jackwanders said it's great if you only have one page.

3

This is not a good idea for the following reasons:

  1. You will not enjoy the benefit of cache

  2. You will load unneeded resources in all of your pages

  3. You will have a hard time while developing your website because of large files with unrelated code branches

  4. If you work in a team you will have to work with your teammates on the same files always, which means that you will have a lot of merge conflicts.

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
  • +1. The generally accepted way is to have 1 JavaScript file and 1 CSS file. If you can, you should have many files at development-time so you can easily tell what each one does and have it compiled into minified files prior to uploading them. This is called "bundling". The number of requests is not the only consideration for speed - on a second page load, the JavaScript and CSS wouldn't need to be re-fetched, which is a greater saving than having everything in a single request for each page. The answer differs for single-page-interfaces if they are delivered once. – Fenton Aug 13 '12 at 14:13
  • 5
    @Lajos Arpad: I'm talking about a one page application. The javascript and css files will only change when the application is redeployed as a whole. Why whouldn't cache work with a signle html file? (you normally get a "304 Not modified", which will still be the case...) – Jos de Jong Aug 13 '12 at 14:22
  • 2
    @Lajos Arpad: I don't agree with your points 3 and 4. Minifying and concatenation is only done when the website is build for deployment. The source code itself is of course not minified/concatenated - that would make debugging and teamwork a nightmare indeed. Also your point 2 does not hold in this case - a single-page web application, but this would optionally be the case in a multi-page web application. – Jos de Jong Aug 13 '12 at 14:25
  • Even if you have a single-paged website it is a good idea to be prepared for more pages. If you merge your css and javascript file server-side then your server will have a lot of things to do which might become a problem if you have high-traffic. – Lajos Arpad Aug 13 '12 at 14:43
  • @LajosArpad - I would disagree with that. You would build the final index file at deploy, not when serving the request. I think your first two points are valid for non-single-page apps. The last two points are easily overcome by proper and automated deploy tools/scripts. – j-a Apr 28 '14 at 09:04
0

You can have a single CSS for all your pages and since it will be cached, the subsequent pages will refer it from cache without sending extra request.

However, putting all Javascript files is into one is contextual. Most probably you might be using libraries like jQuery, and relevant plugins. This 'might' throw conflicting issues between plugins. So, before you try it all at once, try merging few files at once and checking if the error pops or not.

Neeraj
  • 132
  • 7