: Should I combine js/css files into a single file? Both YSlow and Google's Page Speed add-ons recommend combining script (and style) files into a single file each to reduce the number of HTTP
Both YSlow and Google's Page Speed add-ons recommend combining script (and style) files into a single file each to reduce the number of HTTP requests, and I can certainly see the point of this when the script files are consistent across the entire site, but for a web application that has different requirements across the site.
The way I see it there are a few options:
Combine all of the files that are used across the site, and every page gets the same combined file - the downside is unused content cluttering the script (and a heavier first load (also reload when any component script changes))
Combine the files on a per page
basis - the downside is each page
with different requirements gets a
different combined file (heavier
first load for each page type)
Ignore the strict 'one file only' interpretation of the recommendations and have the page load in multiple files as appropriate, with caching hopefully negating the number of HTTP requests in the general case - downside is the number of HTTP requests on each page
Thoughts?
More posts by @Radia820
4 Comments
Sorted by latest first Latest Oldest Best
I wouldn't suggest combining all of them. If you are useing a common library, you can leverage a CDN to deliver your javascripts. You can then take advantage of browser caching (assuming other sites are using the same CDN) and distributed delivery. Microsoft and Google each have solutions (I haven't honestly used either, but I am certainly going to start) and there may be others. On a related note, SO has this question:
When Does Browser Automatically Clear
JavaScript Cache?
and the first answer is solid gold.
While it's definitely recommended to use as few files as possible, you may find that you have a split between functionality that is required at page load, and functionality that can be deferred through asynchronous loading.
If enough of your JS can be pushed into the second category, you can improve the perceived initial load speed of the page, creating a better experience for your users.
I generally combine "global Javascript" - jQuery and common plugins - into a single file, and then serve up extra plugins as separate files when required.
For example, one site I run many of the pages have data tables on them so I have a global.js with jQuery, DataTables and SuperFish (for my menu). There are two pages on the site that use a "lightbox" so I have a separate script for those two pages.
For CSS, I just serve a single file for the entire site and try to make the CSS as general as possible - most pages only have a few unique CSS elements.
Option 2 is the worst; it means that every page with a different combination of needed JS scripts will result in an HTTP request. It will make performance much worse.
Option 1 is the best. Eventually most users will visit most of the page "types" of your website, so it's still advantageous to combine everything into a single file, with maybe the exception of large JS files that are needed in few, seldom visited pages.
The first page hit may be slower than with different files, but it's still worth doing as every other page hit will used the cached global JS.
One tip though; merge them automatically if you aren't already!
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.