Loading..
Processing... Please wait...

Product was successfully added to your shopping cart.



How to eliminate render-blocking Javascript in above-the-fold content in Magento

In today's article we will try to address Google PageSpeed Insights warning: Eliminate render-blocking Javascript in above-the-fold content.

Eliminate render-blocking Javascript in above-the-fold content | Google PageSpeed warning | Goivvy.com Eliminate render-blocking Javascript in above-the-fold content | Google PageSpeed warning | Goivvy.com

 

How Javascript affects page rendering?

When a browser encounters external javascript resources it downloads and runs them while putting rendering on hold. Some lengthy files may take a while to be executed and during that time browser shows white screen to an end user.

White screen is not what your website's visitor came to see. If white screens is being showed long enough he/she may leave for other website.

What we need to do is to try and show above-the-fold content as quickly as possible. We should optimize CSS delivery and try and keep most of javascript at the bottom of the page. That way JS files won't prevent browser from painting content.

Move Javascript to the bottom

I will use default Magento 1.9.2.3 installation to show case how to move js to the footer.

First we need to filter out all inlined javascript from all blocks and put it at the bottom. Then we put external js files just above it.

Eliminate render-blocking Javascript in above-the-fold content | DeferJS example | Goivvy.com Eliminate render-blocking Javascript in above-the-fold content | DeferJS example | Goivvy.com

1 Filter out inlined javascript and put it at the bottom

We create core_block_abstract_to_html_after event observer to catch and store javascript code:

<core_block_abstract_to_html_after>
  <observers>
    <module_html_filter>
       <class>module/observer</class>
        <method>filterHtml</method>
    </module_html_filter>
  </observers>   
</core_block_abstract_to_html_after>

inside filterHtml method we filter html code:

$html = $observer->getEvent()->getTransport()->getHtml();
preg_match_all('@(?:<script type="text/javascript">|<script>)(.*)</script>@msU',$html,$_matches);

then on controller_action_layout_load_before event we append our js:

$layout = $observer->getEvent()->getLayout()->getUpdate();
$layout->addHandle('goivvy_deferjs_custom_handle_inline');

 

2 Move external Javascript files to the bottom

First we create uphead block:

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

uphead will be put in place of head block and will contain above-the-fold CSS.

Second we replace head with uphead and move head to the bottom in every *columns template (2columns-left, 2columns-right, 3columns etc).

<head>
<?php if(Mage::helper('module')->isEnabled()):?>
<?php echo $this->getChildHtml('uphead') ?>
<?php else:?>
<?php echo $this->getChildHtml('head') ?>
<?php endif;?>
</head>
<?php echo $this->getAbsoluteFooter() ?>
<?php if(Mage::helper('goivvy_deferjs')->isEnabled()):?>
<?php echo $this->getChildHtml('head') ?>
<?php endif;?>
</body>                                                                                                                                                                           
</html>

We don't put it in footer as footer is cached. Js might differ from page to page.

We also leave option to disable our defer javascript implementation for some pages.

Once it is all ready Google PageSpeed Score goes up:

Eliminate render-blocking Javascript in above-the-fold content | Final Google PageSpeed Score | Goivvy.com Eliminate render-blocking Javascript in above-the-fold content | Final Google PageSpeed Score | Goivvy.com

 

What might go wrong with putting Javascript to the bottom

1. If you filter javascript and then put it all inside one <script type="text/javascript"></script> tag you might encounter errors with missing ; sign. Try to wrap each piece it its own <script> tag:

foreach($_js_arr as $k => $e) $_js_arr[$k] = '<script type="text/javascript">'.$e.'</script>';

2. Full Page Caching might add the same javascript code twice. You might want to move javascript to other blocks.

Once you eliminate render-blocking javascript code from your magento website open up browser developer console and test test and test.

 

 

If you find this post interesting do not hesitate to sign up for our newsletter and join the 650 people who receive Magento news, tips and tricks regularly.

Thank You!

 

 

One thought on “How to eliminate render-blocking Javascript in above-the-fold content in Magento”