Question

I am try to move all my static content to a CDN to improve performance on my Magento store. I can successfully get the script tag I want in the head of the page but I can’t figure out how to put it in the right place.

The code below outputs the prototype.js script tag below the rest of the output so it does not work. Basically, I just want to know the best way to control the order of the script elements.

This is in my page.xml layout file in my theme directory.

<block type="page/html_head" name="head" as="head">
                <block type="core/text" name="cdn_prototype">
                    <action method="setText">
                        <text><![CDATA[<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>]]></text>
                    </action>
                </block>
                <action method="addJs" ifconfig="dev/js/deprecation"><script>prototype/deprecation.js</script></action>
                <action method="addJs"><script>lib/ccard.js</script></action>
                <action method="addJs"><script>prototype/validation.js</script></action>
                <action method="addJs"><script>scriptaculous/builder.js</script></action>
                <action method="addJs"><script>scriptaculous/effects.js</script></action>
                <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
                <action method="addJs"><script>scriptaculous/controls.js</script></action>
                <action method="addJs"><script>scriptaculous/slider.js</script></action>
                <action method="addJs"><script>varien/js.js</script></action>
                <action method="addJs"><script>varien/form.js</script></action>
                <action method="addJs"><script>mage/translate.js</script></action>
                <action method="addJs"><script>mage/cookies.js</script></action>
                <action method="addJs"><script>dvm/menu.js</script></action>

                <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>

                <action method="addItem"><type>skin_js</type><name>js/scripts.js</name></action>

                <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
                <action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
                <action method="addItem"><type>skin_css</type><name>css/styles-ie-8.css</name><params/><if>lt IE 9</if></action>
                <action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
                <action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>

                <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
                <action method="addItem"><type>skin_js</type><name>js/iehover-fix.js</name><params/><if>lt IE 7</if></action>
            </block>

Answer 1

This is how to do it:

<block type="core/text" name="google.maps">
    <action method="setText">
        <text><![CDATA[<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>]]></text>
    </action>
</block>