Welcome to PotatoCommerce - Magento Extensions Store

Home > Blog > Javascript Defer Parsing

How to Defer Parsing of Javascript in Magento 2

Posted on 12 June 2018

Page loading process is not as simple as it might seem at first glance. It's not just the delivery of bytes of information down the pipe. A browser needs to download and apply hundreds of page resources — scripts, images, styles, and fonts, which are used on Magento storefront pages.

The problem of render-blocking Javascript

If you have tried to test your Magento store using Google PageSpeed, then you may have seen the rule "Eliminate render-blocking javascript above-the-fold content". In GTmetrix this rule is called "Defer Parsing of Javascript".

Magento.com GTmetrix test
Magento.com Page Speed Insights

With the standard script declaration (<script src="file.js"></script>), the browser will block the rendering of a page until the browser loads and parse all the scripts before the body tag. This is also true for inline scripts (included in the document itself) which also halt the document parsing.

Magento 2 defer parsing of javascript

Javascript Parsing

The problem is that the process of parsing, interpreting and running scripts can take a significant amount in the process of loading a web page. And if this process takes a long time, it delays the moment when a user can read and interact with a page. As a result, slow parsing of scripts degrades the user experience and negatively impact conversion on your Magento store.

It is also worth noting that Javascript parsing can differ several times on different devices and in different browsers. So, the parsing time of same Javascript bundle on high-end devices (MacBook Pro in Safari browser, latest iPhones, etc) takes ten times less than the average hardware. On average, parsing on mobile devices is slower by 36% than on desktop devices.

Magento 2 javascript parsing time on different devices

Source

Some scripts are used for rendering a page, that is, the page can look or function incorrectly without such scripts. For example, categories menu on your Magento store may stop working if you disable the script used. However, most of the scripts are not involved in page rendering, and they can be parsed as late as possible so that the user can work with the page faster.

To speed up the construction of the DOM page, most of Javascript should be deferred on any website.



How to defer parsing of Javascript?

Four popular methods:

  • Use the Defer attribute. It is used to tells browsers to postpone the parsing of the script.
    <script src="file.js" defer></script>
    Magento 2 javascript defer
  • Place a script at the bottom of the page (body end), so the DOM will be built faster and the user will be able to start learning the page.
  • Use tricks to deceive browsers. There are many techniques for this. One of them is to comment out the javascript code so that the browser does not start parsing it. And then use the eval() function to parse the script only when necessary.
  • Using Async attribute. This attribute is used to give the browser information that this file can be executed asynchronously.
    <script src="file.js" async></script>
    When async used, HTML page parsing will not be stopped to load the script.
    Magento 2 javascript async


Defer parsing Javascript in Magento 2

As for clean Magento 2 installation with the default theme, there are no problems with render-blocking Javascript. This is achieved due to the fact that Magento 2 uses Require.JS to dynamically load Javascript and CSS on Magento 2 storefront pages.

But in practice, many 3rd-party extensions and theme modules do not use Require.JS — we have seen this many times on the stores of our clients. We developed the Performance Optimization Tool that fixes the defer parsing issue with any 3rd-party module.

As you probably already know, Require.JS does not work well because Magento 2 doesn’t merge most of Javascript files. As a result, more than one hundred requests sent to a server, which negatively affects Magento 2 speed.

Our feature-rich Performance Optimization Tool merges all Javascript files, even those that are loaded dynamically by Require.JS. And of course, these scripts can be deferred correctly with our extension.

In addition, Performance Optimization Tool provides minification of Javascript, CSS, and HTML. In addition, this module can lazy load Images and even load all images with one request. On top of that, it comes with free installation and support. Learn More →



Conclusion

A combination of slow javascript parsing, interpretation and running is often a bottleneck for most Magento 2 stores.

Our recommendations:

  • Ship less Javascript — Reduce Javascript code on pages
  • Get rid of poor-quality libraries and code — Even 3KB of bad JS implementation can shatter your dreams of a fast Magento 2 store.
  • Use best tools to speed up your Magento 2 store