1

It is a best practice to combine CSS/JS files so that less requests need to be made to the site. How exactly to do it is not trivial, though. There are three extreme strategies:

  1. Don't combine anything. Good for caching, but lots of HTTP requests for users who have not cached the files.
  2. Combine every single file on the site into one. Also good for caching, and only a single request, but the file will be unnecessarily large and will contain a lot of unneeded stuff which slows down the browser and possibly leads to conflicts.
  3. Combine only the files which are needed to the current page. Only one request and no unneeded content, but horrible for caching - if you have 10 files, they can appear in a thousand possible combinations, so even adter your visitors have seen a page with files 1 and 2 and another with files 3 and 4, they would still have to download a new combined file for a page which has files 1, 2 and 3. (The situation gets even worse if we want to preserve the order of the files.)

The ideal solution is probably a combination of these three strategies (combine some files which are used on a lot of pages and include them everywhere, and combine the rest into a few files in a way that is hopefully identical with how it is done on other pages), but it is hard to find. You need to know what files are used on the site, which file is used on which page (or which type of page), how much visit each page type gets, how much of that comes from returning visitors... in short, it seems to be a huge pain to do manually. I'm looking for

  • ideally, tools which are intelligent enough to do the optimization for you, or help with it.
  • more realistically, tools which can make statistics of which CSS/js file is included on which page / how often those files are downloaded / how often two files are downloaded together.
  • if there are no good tools for this, advice/strategies/best practices on how to do it manually
Improve this question

4 Answers 4

Reset to default
1

site-centric CSS and JS should be minimized and combined. You definitely don't want to do that manually, but rather make it part of your deployment process. More individual files locally make it easier to develop/maintain.

page-centric CSS and JS should be minimized, but not combined, as it only pertains to a part of the site. (I argue that page-centric CSS should not even be a separate file, but part of the page itself...granted, the whole point of CSS is to avoid page-centric styles, so perhaps moot)

And, of course, there are ALWAYS exceptions and will highly depend on the particulars of a project.

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

Comments

0

IMO the only things you should ever think about combining is the files that are present on absolutely every page of your site AND are you own home made resources. No public library or anything like that should ever be combined. Caching easily defeats "many connections" argument already and servers/browsers gets more and more intelligent on how to efficiently cache stuff as time passes. Spawning numberless recombination will only keep you from profiting on that progress.

Improve this answer

Comments

0

As far as I am aware, css and js files are NOT to be combined with a page since they are mostly cached and less frequently modified than the contents.

Google chrome comes with "Developer Tools" (one that you see when inspecting code) that has lots of wonderful functions.

Audit menu is especially useful since it gives you suggestions of optimization like Leverage browser caching, Leverage proxy caching, Minimize cookie size, Optimize the order of styles and scripts, Remove unused CSS rules etc... Check it out!

Improve this answer

Comments

0

Another strategy is to move common libraries (read: jQuery) to a CDN. It's said to be even more possible that the client already cached it. It's possible to provide a self hosted fallback in case the cdn file isn't available.

Improve this answer

Comments

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.