Magento – Magento adding CSS and JS includes to the footer

cssjavascriptlayout

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?

Best Answer

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/

Related Solutions

Magento – How to override custom css by parent css using local.xml

Why do you think your css is not working? Remember, there are styles given by RWDs stylesheet. So, if RWDs CSS tells

a {
color:red;
}

A link is red. If your CSS says (nearly) the same the browser will be confused.

a {
color:green;
}

Now 2 css are written for the same thing. So overwrite or redefine:

a {
color:green !important;
}

#id a {
color:green;
}

Ok?

Magento – AddJs / CSS in footer. getCssJsHtml() not working

If all you are trying to do is add a JS file inclusion in the footer, the easiest way might be to just put it in a template file. So in your local.xml file.

<default>
    <reference name="footer">
        <block type="core/template" template="my-template-file.phtml"/>
    </reference>
</default>

And then in my-template-file.phtml:

<script type="text/javascript" src="<?php $this->getSkinUrl('js/my-js-file.js'); ?>"></script>

Best Answer

Related Solutions

Magento – How to override custom css by parent css using local.xml

Magento – AddJs / CSS in footer. getCssJsHtml() not working

Related Topic