Magento 2 Optimization Removing the Default Javascript From Magento

If you're serious about optimising Magento, you will already know that having too many Javascript files will slow your site down and that this can affect your conversion rate. Not only do most Magento themes and extensions include way too many Javascript files, the default Magento installation also includes many Javascript files that most likely aren't needed. Below are a list of the JS files included in a default Magento 1.9.2.0 installation:

A lot of these files can be removed completely from Magento while some can be trimmed down, so let's go through each one and see what we can do.

js/prototype/prototype.js

This is the core Prototype library file and is required by Magento. You cannot remove this without breaking pretty much your entire Magento frontend. That being said, you should definitely minifying it.

js/prototype/validation.js

This handles the client side form validation in Magento. When a user clicks the 'Submit' button, Magento uses the class names for each input field in the form to work out what each input value should be. If the validation fails, the form does not submit and the relevant error message is displayed.

This file cannot be removed entirely as all of your Magento forms rely on this file. That being said, I'm a stickler for efficiency and believe that every byte saved is a good thing. As I only use PayPal on my site, I have no need for credit card validation. As a result, I was able to remove a great deal of code from this file that validates credit card data. This task might not be for you though and if you do decide to do it, you will have to re-do the changes each time you update Magento.

js/scriptaculous/builder.js

Builder helps the Scriptaculous Javascript library build elements. This file is only required if Prototype or Scriptaculous method calle 'tagifyText' is called. This method is not used in Magento so this file can be removed safely. To remove this file, add the following code to your local.xml file.

<default>
  <reference name="head">
    <action method="removeItem">
      <type>js</type>
      <file>scriptaculous/builder.js</file>
    </action>
  </reference>
</default>

js/scriptaculous/effects.js

This file creates the Javascript effects such as elements sliding or fading in and out. If you don't use any such effects or any of your extensions don't use them, you can remove this file. To do so, add the following XML layout code to your local.xml file.

<default>
  <reference name="head">
    <action method="removeItem">
      <type>js</type>
      <file>scriptaculous/effects.js</file>
    </action>
  </reference>
</default>

js/scriptaculous/dragdrop.js

This file allows dragging and dropping of elements. Unless you're using the default Magento image zoom (lol, I know) then this can be removed using the following XML code:

<default>
  <reference name="head">
    <action method="removeItem">
      <type>js</type>
      <file>scriptaculous/dragdrop.js</file>
    </action>
  </reference>
</default>

js/scriptaculous/controls.js

This file provides AJAX based functionality such as search autocomplete and in place editing. Most themes don't use it so this file can also be removed.

<default>
  <reference name="head">
    <action method="removeItem">
      <type>js</type>
      <file>scriptaculous/controls.js</file>
    </action>
  </reference>
</default>

js/varien/js.js

This file provides a multitude of different JS functionality to Magento and cannot be removed. That being said, a lot of the contents of the file probably aren't needed and can be removed by hand. For example the Varien.searchForm and Varien.Tabs are only needed if you're using the default Magento search system and tabs system. The mulitple different Varien Date classes can be removed unless you're using a Date custom field. If you have enough Javascript knowledge, removing these bits of code will add up by the end but remember, each time you upgrade Magento you will have to re-do this. If you're confident though, you can do it in a few minutes (especially if you make notes in a separate file of what functions/classes you removed).

js/varien/form.js

This provides the Javascript form functionality to Magento and cannot be removed.

js/varien/menu.js

This JS file powers the Magento category/top menu and allows for the hover/dropdown effects. Unless you are using the default menu system, this can be removed using the following XMl code:

<default>
  <reference name="head">
    <action method="removeItem">
      <type>js</type>
      <file>varien/menu.js</file>
    </action>
  </reference>
</default>

js/mage/translate.js

This file provides client side translation of strings found in Javascript. If you're running a multi-lingual Magento store, you might want to leave it in. If you're rolling with just the one language, this can be removed using the following XML:

<default>
  <reference name="head">
    <action method="removeItem">
      <type>js</type>
      <file>mage/translate.js</file>
    </action>
  </reference>
</default>

You will also need to modify your template/page/html/head.phtml file and remove the following line of PHP code:

<?php echo $this->helper('core/js')->getTranslatorScript() ?>

js/mage/cookies.js

This file handles the getting and setting of Cookies in Javascript. I'm sure that there are extensions and themes out there that make use of this but the themes that I have developed do not. As a result I personally remove this file but it's definitely worth checking whether your theme uses it before removing it.

<default>
  <remove name="js_cookies" />
  <remove name="global_cookie_notice" />
  <reference name="head">
    <action method="removeItem">
      <type>js</type>
      <file>mage/cookies.js</file>
    </action>
  </reference>
</default>
<catalog_product_view>
  <remove name="external.pagecache.cookie" />
</catalog_product_view>

With this, you also need to remove the default Magento files that reference the Mage.Cookies JS object.

Conclusion

You need to be really strict with the Javascript that you place on your site as it all has an affect on the performance of your website. If you don't need the JS, remove it. If you aren't sure if you need, remove it and test in a development environment and then make an informed decision.

Once you have the number of Javascript files down to the fewest possible, it's time to think about minifying and cleverly merging them.