Features of css/js loader consists of:
- Combine external CSS.
- Minify CSS.
- Identify the files that will be loaded on page.
Combining external scripts into as few files as possible cuts down on RTTs and delays in downloading other resources.
Here is an example of the download profile of an HTML file containing requests for 13 different .js files from the same domain; the screen shot is taken from Firebug's Net panel over a DSL high-speed connection with Firefox 3.0+:
All files are downloaded serially, and take a total of 4.46 seconds to complete. Now here is the the profile for the same document, with the same 13 files collapsed into 2 files:
However, there are other factors that come into play to determine the optimal number of files to be served. First, it's important also to defer loading JS code that is not needed at a page's startup. Secondly, some code may have different versioning needs, in which case you will want to separate it out into files. Finally, you might have to serve JS from domains that you don't control, such as tracking scripts or ad scripts. We recommend a maximum of 3, but preferably 2, JS files.
Combine external CSS
Combining external stylesheets into as few files as possible cuts down on RTTs and delays in downloading other resources.
It often makes sense to use many different CSS files during the development cycle, and then bundle those CSS files together as part of your deployment process. See below for recommended ways of partitioning your files. You would also need to update all of your pages to refer to the bundled files as part of the deployment process.
Compacting CSS code can save many bytes of data and speed up downloading, parsing, and execution time.
Minifying CSS has the same benefits as those for minifying JS: reducing network latency, enhancing compression, and faster browser loading and execution.
Identify the files that will be loaded on page.
Help for the programmer specify the css/js files are loaded on the page and remove the css/js files not needed on that page.
When you use zen cart CSS/JS loader, you can specify CSS/JS files to load on the page that you want.
For example: you have 3 CSS files:
You can specify the following:
stylesheet.css will be loaded on all pages of website
homepage.css only loaded on home page.
contact_us.css only loaded on the contact page.
So, when you go to the home page, you can only see 2 CSS files is stylesheet.css and homepage.css instead of having to load the 3 files. The same for the contact page, stylesheet.css and contact_us.css will be loaded.
For more information: