Render-blocking JavaScript in Magento 1 RWD theme

In the past few months I started researching the possibilities to optimize the front-end performance of the Magento 1.x RWD theme. I found 3 very basic and important solutions that, once implemented, bring a lot of value. I worked on eliminating render-blocking JavaScript, eliminating render-blocking CSS, and showing product list images in a smarter way.

I’ve also shared my progress during Meet Magento Croatia 2017 and you can check my slides if you are interested: https://www.revampix.com/wp-content/uploads/presentations/

In this article, I would like to focus on eliminating render-blocking JavaScript. I’ve decided to first write about this problem because during my experiments I found that fixing it is both easiest to implement and brings most value.

I’ve created a simulation aiming to show render-blocking JavaScript for mobile devices. The simulation was run for Magento 1.x category page.

Simulation:

  • 3G mobile internet (200 ms latency)
  • Emulated iPhone 5C
  • No CDN
  • HTTP 1.1
  • GZIP enabled

This pseudo-waterfall diagram gives a better idea of how much we could save by eliminating render-blocking JavaScript:

I am also eager to show the comparison between render time before eliminating the problem and after eliminating the problem.

Please watch the video in order to get an idea of the impact of this problem:

The problem is caused by the fact that browsers wait for JavaScript to be downloaded in order to render what we have in the HTML document after the JavaScript tag. This isn’t really a browser problem or a bug but rather a standard browser feature. Browsers expect that if we include JavaScript in an HTML document then probably this JavaScript will be used for manipulating/rendering the HTML elements that we have below the JavaScript. In Magento 1.x we don’t usually need to use this browser feature because there are no HTML elements whose rendering depends on the JavaScript we include from the HTML HEAD tag.

In the beginning, I started working on my own solution. I had 3 options: 1. move all JavaScript near closing BODY tag, 2. defer JavaScript or 3. use mod_pagespeed which does JavaScript defer by modifying all JavaScript tags in a special way. I found an already existing solution that moves all JavaScript near the closing BODY tag. I decided to give it a try and observe the results.

You can find the extension in this repository: https://github.com/bobbyshaw/magento-footer-js

Thanks to Tom Robertshaw who created this extension!

This is what my pseudo-waterfall diagram looked like before and after the optimization:

Before

After

Why I didn’t choose the other 2 solutions?

In the beginning of the article, I mentioned that there were 2 other implementations that I was considering using.

Mod_pagespeed was a good option but required installing the Apache or NGINX module. I am not very good with server administration, and in my case I was just looking for proof of concept and installing a Magento module was much easier for me. I also like the idea of using Tom’s extension because it allowed me to easily disable it if things go wrong.

I also tried to add defer to the script tags but it required a lot more work in order to take care of the inlined JavaScript tags we have in Magento 1.x. I’ve decided to stick to something that already works and Tom Robertshaw already had the solution for me.

Leave a Reply

Your email address will not be published. Required fields are marked *