Magento load CSS and JS in footer

By some online tools(tools.pingdom.com or Gtmetrix.com) It’s suggested that either load JavaScript(JS) files in footer of the page or deferred so that they don’t block downloading of other assets of the page like images etc.

By default Magento load JavaScript and CSS files in header section. Magento footer block is not designed to load JS and CSS in footer of page.

Here is solution for this problem:

Step 1: Add new layout in page.xml

Create a block same as page/html_head with name “footerjscss” to the page.xml

Step 2: Add JS/CSS using xml layout:

Now you can add JavaScript(JS) and CSS files in pages using any of your XML files

Step 3: Create view file:

Create .phtml file in page/html/footerjscss.phtml and add following

In your page template files “1column.phtml”, “2columns-left.phtml”, “2columns-right.phtml”, “3columns.phtml” and etc. you will need to output this block before <body> tag:

If you want to improve/increase Magento speed or optimize Magento performance read this: Magento Optimization

Thanks!!!

  • Rahul Dadhich.