In /app/design/frontend/base/default/layout/page.xml, Magento uses addJs and addCss action methods to add internally hosted JavaScript and CSS files. Your attempts to add external JS or CSS files with these methods would eventually fail because the generated URL will always start with your store’s absolute URL path such as http://www.yourstore.com/, making it impossible to include JavaScript or CSS hosted on another domain / sub-domain.

What if you want to add an externally hosted JavaScript such as one from a sub-domain CDN or one from Google’s hosted libraries? Such as prototype.js?

Add External JavaScript to Magento Header

Just edit the head.phtml located at here:

/app/design/frontend/default/your_theme/template/page/html/head.phtml

Open it and you should see the entire HTML header that Magento uses to render all pages of your store. Simply add a hard coded line of script tag anywhere appropriate:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>

Refresh the cache and you would find the external javascript hosted at Google loaded in every page of your store in the HTML header section.

Remove Default JavaScript Files in page.xml

You may also want to get rid of the same version of JavaScript (prototype.js in this case) that’s hosted local on your main site. Duplicate ones would simply mean a waste of bandwidth and unnecessary download time. Because you should always try to serve static content from a separate domain / sub-domain as CDN rather than on the same domain as your site, or it’d be slower to download all the assets for the users.

To remove a local JavaScript from your Magento theme, simply create a new .xml layout file in /app/design/frontend/default/your_theme/layout and name it whatever you want, such as custom.xml or local.xml and put the following snippet in it to remove the prototype.js loaded in the base default theme of Magento:

<?xml version="1.0"?>
<layout version="1.1.1">
	<default>
		<reference name="head">
			<action method="removeItem"><type>js</type><name>prototype/prototype.js</name></action>
		</reference>
	</default>
</layout>

Refresh your store’s cache and you should see no local prototype/prototype.js being loaded in the HTMl header any more.