Minifying And Compiling JS and CSS [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 8 years ago.

Improve this question

I am Currently very conflicted about having a single js file and a single css file for a website, Let me first Explain Below:

I Mostly use a CMS and Most of the time that CMS would be Joomla, Now when ever i do a page speed test or something along the lines, I always seem to come across that one issue that there should only be 1 style sheet and 1 JavaScript file for a page. So I set out on a mission, and started using css less and using JavaScript concatenation and minification for both.

So My Question now is. Is this Healthy? I mean the larger the website grew the more i noticed that, not all my pages need this piece of JavaScript, I have JSON get requests, Where there is no need for any JSON data? Surely this can do nothing but Slow the Page down? What is the recommended way for dealing with this? I mean Should there only be a separate version of the script for each page with the unused code removed? and then how would one manage that in a CMS?

I am very very much confused... I mean is there no "How to Create Efficient Data Saving Websites for Dummies"?

Any Help Greatly Appreciated.

Answer 1

Make sure the Javascript you load on every page only runs when it is needed.

You can do this either by running the bit you need from an explicit script tag on the page:

<script>
    mysystem.doContentPageSetup();
</script>

or you can detect the kind of page in the javascript itself

function init() {
    switch ($("body").attr('page-type')) {
        case 'content':
            doContentPageSetup(); break;
        // etc
    }
}

You should be able to stop the javascript issuing un-needed Ajax requests that way.

The reason why you want to load all the javascript in one place is that it doesn't get loaded again (as long as it is in cache). So thereafter having the javascript 'load' on pages where it isn't needed is almost free, both in terms of user performance and in terms of your server bandwidth.

Add to that the issue that fetching a new file has a much bigger overhead than fetching a bigger file (i.e. 2 files of 20KB are much more than twice as long to fetch than one of 40KB), you may as well have a big minified JS file.

That said, most folks don't manage to get to just one. I often have three: fetching jQuery from a CDN, then my own code, then the javascript tracking code. Because I prefer a tiny bit slower loading, and someone else can pay a bit of the hosting cost!

So the second thing is, not to take the guidelines of automated tools too seriously. Sure they'll complain when you have more than one script, but the difference between two cached scripts versus one is very slight. The biggest win is when you have the same script/scripts loaded on every page, because you only pay the bulk of the time cost on the first.