Are all of the default scripts loaded by Magento really needed?

Question

Here's a listing of all the scripts loaded by Magento by default:

../js/prototype/prototype.js    //prototype library
../js/prototype/validation.js   //don't know what this does
../js/scriptaculous/builder.js  //don't know what this does
../js/scriptaculous/effects.js  //base scriptaculous effects library?
../js/scriptaculous/dragdrop.js //component of scriptaculous effects
../js/scriptaculous/controls.js //not sure?
../js/scriptaculous/slider.js   //more scriptaculous effects
../js/varien/js.js          //don't know what this is
../js/varien/form.js        //form validation scripts?
../js/varien/menu.js        //menu/drop down menu scripts
../js/mage/translate.js     //don't know what this does
../js/mage/cookies.js       //don't know what this does

these scripts total 316.8K of javascript... all in various states of being minified (for example, prototype.js isn't minified).

So my first question:

1) Aside from prototype.js, are all of the others really that needed?

and

2) What is the "correct" way to remove these scripts? Layout updates? Or hardcoded in templates?

I want to make the loading of my magento site as light weight as possible.

thanks!

Answer 1

To answer Part 1 - no not all of these are required, but most are and it depends on your theme. A default magento theme uses them all, but a custom one almost certainly won't need all the scriptaculous ones.

The varien, mage and prototype ones will almost always be required, creating a theme that does away with all of these is very, very, hard because some of the in page javascript that depends on them actually comes not from the theme but from the core php files.

On simple themes I've had good results removing dragdrop and slider as I don't use the product zoom display. You can remove menu if you're not using the Magento menu, but only if you're prepared to make dummy js functions to catch any calls to it left behind - the menu navigation object injects javascript function directly from the php layer that need to be caught (or better yet you can roll your own category navigation object that doesn't do this!).

For Part 2 - edit your themes page.xml layout to remove them from the <block type="page/html_head" name="head" as="head"> tag. I suggest commenting them out and testing each one as you go.

You can inject required javascript files into the page types that do need them by adding javascript tags to the head section of the appropriate layout files. As an example of how this is done have a look at the default sendfriend.xml layout file which adds the product.js file to the head only for pages that need it.

If you start adding/removing javascript aggressively based on page type you also need to consider how Magento merges javascript files. There's a setting in the developer area of the configuration screens to merge javascript files, turning this on is a very good thing. This merges all javascript files inside the head area that have been injected using the "addJs" or "addItem" with an item type of "js" or "skin_js".

BUT because of this if you start including/excluding scripts on a page by page basis you'll find that you're generating different merged js files on different pages - destroying most of the benefits of caching a single large js file!

To get the best of both worlds you should be able to inject js into the head using but without specifying the item type, thus preventing that file from being merged - but I've not tried this yet. If this works you'll find the core libraries merged and your per page custom files included individually, meaning you cache the big one and they only download the bit that changes.