15

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?

  • 3
    possible duplicate of Move all Javascript includes to before </body> – Ben Lessani - Sonassi Mar 25 '13 at 15:35
  • 1
    Providing the error you received when trying to view the site after your swap might help people answer your question. – Alan Storm Mar 25 '13 at 17:53
  • 3
    Aside from moving JS to the footer, I'm pretty sure you don't want to move CSS to the footer. It should be in <head>. – pspahn Mar 25 '13 at 21:38
  • Checkout @sonassi linking to my older post. One of the solutions was correct and does work, but be aware you get multiple merged JS files when you enable merging. This seems to happen if you include JS using different handles as well. – Mark Weston Apr 16 '13 at 9:30
  • CSS in the foot. Yuck on page display... And JS should be done only for external includes that can block page display. Anything served off your server should be in the head. It's framework, framework is heavily used in page assembly and should be there before the page starts to render. Most of the recommendations blindly followed without understanding (cargo cult) why do you damage. – Fiasco Labs May 26 '13 at 16:38
7

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/

  • 2
    OP's errors are very likely caused by the out of order loading - most of the inline scripts require prototype et al. If you are only loading this in the footer it is too late. Removing the inline JS would be the first step. A lot of work - good luck. – Kristof at Fooman Mar 26 '13 at 8:11
4

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.

2

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!

  • Much simpler method than the above for adding js scripts before the closing body tag – asherrard Apr 27 '16 at 16:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.