Magento adding CSS and JS includes to the footer

Question

I'm doing some Yslow optimization of my Magento site and am trying to add the CSS and Js to the footer of the site.

At the moment I'm using a head reference tag in the layout XML and using addJs and addCss actions to include all my files. I tried swapping the head reference to footer, but was given an error when I tried to view the site. Is there a way of doing this in local.xml or does this have to be done hardcoded in the footer template file itself?

Answer 1

I know this is not an answer to your question but something you might want to consider nonetheless.

Magento uses quite a lot of inline javascript, especially on the product detail page. As that javascript depends on external scripts loaded in the header you will need to move all the inline scripts to external files too and add them in the footer.

You might be faster and better off by compressing the CSS and JS with the tools built into Magento and using gzip compression and far expiration headers to speed them up. That way the 'lag' caused by the javascript and CSS would be kept to a minimum without the need of changing the default Magento and 3rd party extensions layout. This way, when you upgrade your Magento or extensions, you don't have to redo all the work.

The .htaccess provided by the HTML5 boilerplate project provides this gzip compression and the far expiration headers, Please check http://inchoo.net/ecommerce/magento/magento-boilerplate/

Answer 2

The first step is to create a block called "foot" which is essentially the same as "head" but you'll output it in a different spot. You can add this to your page.xml:

    <block type="page/html_head" name="foot" as="foot" template="page/html/foot.phtml"/>

Now you can add JS/CSS (although CSS in the footer is not recommended) using this command in any of your XML files:

    <reference name="foot">
        <action method="addItem">
            <type>skin_js</type>
            <name>js/somefile.js</name>
        </action>
        <action method="addItem">
            <type>skin_js</type>
            <name>js/main.js</name>
        </action>
    </reference>

Inside page/html/foot.phtml:

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

In your page template files (e.g. page/1column.phtml) you'll need to output this block before the closing body tag:

    <?php echo $this->getChildHtml('foot') ?>

If you're using the default Magento templates you will get JS errors. Take the mini search form for example (catalogsearch/form.mini.phtml). It has this inline script:

<script type="text/javascript">
    //<![CDATA[
    var searchForm = new Varien.searchForm('search_mini_form', 'search', '<?php echo $this->__('Search Redset...') ?>');
    //]]>
</script>

This will be called as soon as it loads, as it's not in any document ready handler. Varien doesn't exist yet because it's in the footer, so you get an error. You can fix this by adding a document ready handler or by moving all inline JS of this nature to an external file that is also loaded in the footer. Problems like this will occur throughout the site, particularly in the checkout and configurable product pages.

The other problem you might encounter is if you're using jQuery alongside Prototype in noConflict mode. You'll need to ensure jQuery is loaded before Prototype so no conflicts happen.

Answer 3

For Magento v1.6+ (need to test in older versions);

1 - create an template file in page/html/footer/extras.phtml with this content:

<?php echo $this->getCssJsHtml() ?>

2 - Add this html node to your layout xml:

<reference name="before_body_end">
<block type="page/html_head" name="extra_js" as="extraJs" after="-" template="page/html/footer/extras.phtml">
    <action method="addItem"><type>skin_js</type><name>js/jquery.min.js</name></action>
</block>

3 - That is it!