bobbyshaw / magento-footer-js

Magento extension to move all JavaScript to the end of the page

Magento Footer JS

A common web development technique to improve page load times is to move JavaScript to the end of the page. A common frustration for frontend Magento developers is the inability to do this due to the amount of inline JavaScript found in templates.

This extension observes for the core_block_abstract_to_html_after event, removes any javascript it finds and appends it to the end of the body.

Tested against:

• CE 1.9
• EE 1.14 (inc FPC)

Usage

Enable the extension in System > Configuration > Advanced > Developer > JavaScript Settings > Move JavaScript to Footer.

Add name of blocks with JS which must not be moved to footer in System > Configuration > Advanced > Developer > JavaScript Settings > FooterJS Excluded Blocks. Enter block names separated with a comma. Please note, JS libraries are moved to footer so be careful excluding JS which has dependencies.

Also there is another way to exclude some JS from moving to the footer - add attribute data-footer-js-skip="true" to script tag. Currently there is no way to exclude JS added using addJs/addItem in layout.

License

Copyright (C) 2015 Tom Robertshaw

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see http://www.gnu.org/licenses/

magento-footer-js's Issues

IE conditional comments not taken into account

Magento adds some compatibility styles with additional parameters for older IE versions. I.e. in app/design/adminhtml/default/default/layout/main.xml on line 86 and further:

<action method="addItem"><type>skin_css</type><name>iestyles.css</name><params/><if>lt IE 8</if></action>
<action method="addItem"><type>skin_css</type><name>below_ie7.css</name><params/><if>lt IE 7</if></action>
<action method="addItem"><type>skin_css</type><name>ie7.css</name><params/><if>IE 7</if></action>

When these 'items' are put at the end of the HTML output, their IE conditional comments are not respected. This leads to parsing of IE styles in non-IE browsers.

Scripts within hole-punched EE FPC blocks are rendered out of order.

Hi,
I was wondering if you were able to get this working with EE FPC. I tested with a fresh install of mage EE 1.14.2.0 using RWD theme and the JS breaks on some product pages (e.g. /linen-blazer-538.html) where there's a block excluded from FPC that inserts some inline JS.

The only way I was able to fix this was by overwriting some FPC models (but that's ugly and I don't want to do it).
Somewhat related to this issue is this http://stackoverflow.com/questions/31211073/magento-events-including-http-response-send-before-not-launching-observer-with

Looking forward to hearing your opinion. Thanks.

Issue on checkout page

Nice extension and seems to work well but when we get to the checkout page we get lots of JS errors using Chrome. We are using Magento 1.7.0.2 and tested using the default theme with no other extensions installed.

Prototype is loaded before opcheckout.js so unsure why the errors are appearing.

Uncaught ReferenceError: Billing is not defined (index):690
Uncaught ReferenceError: Shipping is not defined (index):716
Uncaught ReferenceError: ShippingMethod is not defined (index):797
Uncaught ReferenceError: payment is not defined (index):801
Uncaught ReferenceError: Payment is not defined (index):807
Uncaught TypeError: Cannot set property 'currentMethod' of undefined

Any ideas?

Scripts skipped by module

Hi,

I have a problem with version 0.1.0, which seems to skip external scripts.

<script type="text/javascript" src="script.js"></script> is skipped, while <script type="text/javascript">var h = 'Hello World';</script> is moved to the bottom.

Using files of the version 0.0.5 works.

This was tested on a Magento 1.7.0.2 & 1.9.2.4.

Thanks for your work.

script tags in HTML comments are not ignored

Another extension used HTML comments in a .phtml template to not load the file:

<!--
<script type="text/javascript" src="http://domain.tld/some.js"></script>
-->

When activating Meanbee_Footerjs, the script tag was added to the end of the HTML code.

Page goes blank for a second before loading

Thank you for making this extension!

After installing it we're having every page of the site go blank for a second and then loading.
When disabled this issue goes away. Have you encountered this? Curious if there's a fix/workaround for this.

Mage 1.9.3

Thanks!

moveJsToEnd run twice

There are two observers set that run moveJsToEnd (on core_block_abstract_to_html_after and http_response_send_before).
Is this necessary? I see that output is the same when using only one observer.

Release 0.0.2

Can you please create a new release?

Async?

Great extension Tom! Thanks so much for your hard work. This is not really an issue but curious if you tried to do any async closure/wrappers in moveJsToEnd similar to how Google does the 'deferredStyles' for CSS. I haven't wrapped my head around how it would actually work but thought I'd ask before starting to play with it.

https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

Thanks!

Magento 2?

Hey Tom, have you had any thoughts to do something similar for Magento 2? Thx!

Magento crashed when I activated this module

Hi, I've tested your module but my Magento 1.9.2 has gone down.
Hope this report should help anyone:

a:5:{i:0;s:71:"Mage registry key "_singleton/meanbee_footerjs/observer" already exists";i:1;s:3837:"#0 /var/www/vhosts/domain.it/httpdocs/app/Mage.php(223): Mage::throwException('Mage registry k...') #1 /var/www/vhosts/domain.it/httpdocs/app/Mage.php(477): Mage::register('_singleton/mean...', false) #2 /var/www/vhosts/domain.it/httpdocs/includes/src/__default.php(22123): Mage::getSingleton('meanbee_footerj...') #3 /var/www/vhosts/domain.it/httpdocs/app/Mage.php(448): Mage_Core_Model_App->dispatchEvent('core_block_abst...', Array) #4 /var/www/vhosts/domain.it/httpdocs/includes/src/__default.php(2641): Mage::dispatchEvent('core_block_abst...', Array) #5 /var/www/vhosts/domain.it/httpdocs/includes/src/__default.php(2335): Mage_Core_Block_Abstract->toHtml() #6 /var/www/vhosts/domain.it/httpdocs/includes/src/__default.php(2275): Mage_Core_Block_Abstract->_getChildHtml('optional_zip_co...', true) #7 /var/www/vhosts/domain.it/httpdocs/app/design/frontend/smartwave/porto/template/page/html/head.phtml(38): Mage_Core_Block_Abstract->getChildHtml() #8 /var/www/vhosts/domain.it/httpdocs/includes/src/__default.php(3428): include('/var/www/vhosts...') #9 /var/www/vhosts/domain.it/httpdocs/includes/src/__default.php(3459): Mage_Core_Block_Template->fetchView('frontend/smartw...') #10 /var/www/vhosts/domain.it/httpdocs/includes/src/__default.php(3473): Mage_Core_Block_Template->renderView() #11 /var/www/vhosts/domain.it/httpdocs/includes/src/__default.php(2617): Mage_Core_Block_Template->_toHtml() #12 /var/www/vhosts/domain.it/httpdocs/includes/src/__default.php(2335): Mage_Core_Block_Abstract->toHtml() #13 /var/www/vhosts/domain.it/httpdocs/includes/src/__default.php(2279): Mage_Core_Block_Abstract->_getChildHtml('head', true) #14 /var/www/vhosts/domain.it/httpdocs/app/design/frontend/smartwave/porto/template/page/1column.phtml(35): Mage_Core_Block_Abstract->getChildHtml('head') #15 /var/www/vhosts/domain.it/httpdocs/includes/src/__default.php(3428): include('/var/www/vhosts...') #16 /var/www/vhosts/domain.it/httpdocs/includes/src/__default.php(3459): Mage_Core_Block_Template->fetchView('frontend/smartw...') #17 /var/www/vhosts/domain.it/httpdocs/includes/src/__default.php(3473): Mage_Core_Block_Template->renderView() #18 /var/www/vhosts/domain.it/httpdocs/includes/src/__default.php(2617): Mage_Core_Block_Template->_toHtml() #19 /var/www/vhosts/domain.it/httpdocs/includes/src/__default.php(28684): Mage_Core_Block_Abstract->toHtml() #20 /var/www/vhosts/domain.it/httpdocs/includes/src/__default.php(14234): Mage_Core_Model_Layout->getOutput() #21 /var/www/vhosts/domain.it/httpdocs/includes/src/__default.php(11585): Mage_Core_Controller_Varien_Action->renderLayout() #22 /var/www/vhosts/domain.it/httpdocs/includes/src/__default.php(11500): Mage_Cms_Helper_Page->_renderPage(Object(Mage_Cms_IndexController), 'home') #23 /var/www/vhosts/domain.it/httpdocs/app/code/core/Mage/Cms/controllers/IndexController.php(45): Mage_Cms_Helper_Page->renderPage(Object(Mage_Cms_IndexController), 'home') #24 /var/www/vhosts/domain.it/httpdocs/includes/src/__default.php(14262): Mage_Cms_IndexController->indexAction() #25 /var/www/vhosts/domain.it/httpdocs/includes/src/__default.php(18726): Mage_Core_Controller_Varien_Action->dispatch('index') #26 /var/www/vhosts/domain.it/httpdocs/includes/src/__default.php(18256): Mage_Core_Controller_Varien_Router_Standard->match(Object(Mage_Core_Controller_Request_Http)) #27 /var/www/vhosts/domain.it/httpdocs/includes/src/__default.php(21152): Mage_Core_Controller_Varien_Front->dispatch() #28 /var/www/vhosts/domain.it/httpdocs/app/Mage.php(684): Mage_Core_Model_App->run(Array) #29 /var/www/vhosts/domain.it/httpdocs/index.php(83): Mage::run('', 'store') #30 {main}";s:3:"url";s:1:"/";s:11:"script_name";s:10:"/index.php";s:4:"skin";s:2:"it";}

Excluding specific assets

Hi Tom,

Just wondering if you had any thoughts on how exclude specific script tags from being moved to before body end?

My use case for this is Google Analytics trackers and Modernizr ideally should be left in the head..

I was thinking to modify the Meanbee_Footerjs_Helper_Data::REGEX_JS constant to exclude script tags which contain a data attribute (mbfjs-exclude ???)

Happy to submit a PR to enhance the module in the cleanest way possible :)

JavaScript inside blocks not respecting FPC invalidation

In Magento EE, blocks can have different invalidation than the page.

An example of this is the cart/minicart/items.phtml template. By default, inline JavaScript is emitted only when there are items inside the cart. When the cart changes, the block is invalidated - so this normally works fine.

With FPC and magento-footer-js, however, the JavaScript is moved to the footer only when it is first cached. Then the footer js is assumed to be static, even if the block is updated.

STR:

1. View the homepage with a new browser session. This will cache the homepage with an empty cart and no JavaScript.
2. Navigate to a product detail page and add to cart.
3. Return to the homepage. The minicart will update its content, but the page will not have the associated JavaScript.
4. Click "Remove" on any product. The link will fail, since it's a GET and missing a form key.

Possibly, it might be necessary to use a separate Processor, so that the js can be moved back to the footer after being pulled from the container cache. Getting it to order correctly with other already moved js seems potentially tricky.

singleton/meanbee_footerjs/observer" already exists

Sorry about my issue.
I had forgotten to turn compilation off.
Your extension rocks !!

Hello,

At first, thank you very much for this amazing extension.
I have installed it n my development server and it works well.
Full of coonfidence, I have made the same modman install (I'm a newbee and I may have made a mistake) on my production server and thinkgs went not so smoothly :(
I have this error code "singleton/meanbee_footerjs/observer" already exists".
I don't understand the difference between the 2 environments.
What am I missing ?
Thanks again for your extension ! I was so glad to find it.

Julien

Does not move JS to footer when lesti_fpc is enabled

On my production site, JS is not moved to the footer when the magento-footer-js 'move JS to footer' setting is enabled. However, if I disable FPC (lesti_fpc) then the JS is moved to the footer.