Zen Cart CSS/JS Loader module is required to use for any websites of the Zen Cart. Its main function is to help your website to limit the request to the server and compressing css and javascript files to reduce file size. For Programmers, they can use it to set the css/js file for any page.

Features of css/js loader consists of:

1. Combine external JavaScript.
2. Combine external CSS.
3. Minify JavaScript.
4. Minify CSS.
5. Identify the files that will be loaded on page.

Combine external JavaScript

Overview

Combining external scripts into as few files as possible cuts down on RTTs and delays in downloading other resources.

Details

Good front-end developers build web applications in modular, reusable components. While partitioning code into modular software components is a good engineering practice, importing modules into an HTML page one at a time can drastically increase page load time. First, for clients with an empty cache, the browser must issue an HTTP request for each resource, and incur the associated round trip times. Secondly, most browsers prevent the rest of the page from from being loaded while a JavaScript file is being downloaded and parsed. (For a list of which browsers do and do not support parallel JS downloads, see Browserscope.)

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:

The same 729 kilobytes now take only 1.87 seconds to download. If your site contains many JavaScript files, combining them into fewer output files can dramatically reduce latency.

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.

It often makes sense to use many different JavaScript files during the development cycle, and then bundle those JavaScript 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.

Combine external CSS

Overview

Combining external stylesheets into as few files as possible cuts down on RTTs and delays in downloading other resources.

Details

As with external JavaScript, multiple external CSS files incurs additional RTT overhead. If your site contains many CSS files, combining them into fewer output files can reduce latency. We recommend a maximum of 3, but preferably 2, CSS files.

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.

Minify JavaScript

Overview

Compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time.

Details

"Minifying" code refers to eliminating unnecessary bytes, such as extra spaces, line breaks, and indentation. Keeping JavaScript code compact has a number of benefits. First, for inline JavaScript and external files that you don't want cached, the smaller file size reduces the network latency incurred each time the page is downloaded. Secondly, minification can further enhance compression of external JS files and of HTML files in which the JS code is inlined. Thirdly, smaller files can be loaded and run more quickly by web browsers.

Several tools are freely available to minify JavaScript, including the Closure Compiler, JSMin or the YUI Compressor. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory. We recommend minifying any JS files that are 4096 bytes or larger in size. You should see a benefit for any file that can be reduced by 25 bytes or more (less than this will not result in any appreciable performance gain).

Minify CSS

Overview

Compacting CSS code can save many bytes of data and speed up downloading, parsing, and execution time.

Details

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.

Overview:

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.

Details:

Your site layout is created by CSS and HTML so when a page is loaded, it must always load the file HTML/CSS and Javascript to create the layout of your website.

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:

1. stylesheet.css
2. shomepage.css
3. scontact_us.css

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:

• Combine External JS
• Combine External CSS
• Minify JS
• Minify CSS