Samiksha Hiwase | 6 Min Read | June 29, 2020

Defer Parsing of JavaScript in Shopify

1. Overview

All of us know that no-one likes the slow site. A one-second delay in page loading time affects your visitors as well as to the regular customers on your site.
Shopify store loading time decreases:-
  • Your conversions by 7%
  • Pageviews by 16%
  • Customer satisfaction by 23%
  • Decrease page views by 11%
If you speed up your store just by 1 second then get many positive impacts on your store. By performing the optimization of your site and doing defer parsing of javascript you can improve the speed of your site.

2. What does defer mean of Javascript?

Let’s take a look at what does mean by defer before knowing about how does defer parsing of javascript can be done.
The meaning of deferring is ‘holding back’ or ‘delaying’. When you utilize the ‘defer’ attribute for parsing (executing) of Javascript, then after rendering HTML files the execution of Javascript will get starts.
This process takes place because of putting a defer attribute which also helps to improve the speed of your site.

3. Take the information about Defer parsing of Javascript.

When a user types your website URL in the web browser and clicks on enter. The browser first establishes the connection with the server on which your website is hosted. After making the connection the browser begins delivering the components of the webpage to display the web page.
The browser renders the components serially from the top towards the bottom of the webpage.
When the browser comes upon a JavaScript on a web page, it downloads the JavaScript, executes it, and then deliver the next component. So during this browser stop rendering rest of the web page.
Every time the browser encounters a JavaScript, it stops rendering the rest of the webpage until it executes the whole JavaScript. To avoid this situation you need to do defer parsing of JS files.

What is defer parsing of Javascript?

Defer parsing of Javascript is a process of telling the web browser to render (download) JavaScript only after the main content of the website has finished loading. By using defer attribute with JavaScript to avoid render blocking of the first part of the page.
In this way, users need not wait to see the content of the webpage.
Therefore if you do defer parsing of JavaScript that means JavaScript should load, only after the meaningful content of the website has loaded.

4. Why you should do Defer parsing in Javascript

Page speed is a ranking factor

Google has started using page speed as a ranking factor for desktop and mobile search ranking. Therefore, website speed optimization has become a significant aspect of technical SEO.
Google PageSpeed Insights Tool recommends deferred parsing of JavaScript as one of the solutions to remove render-blocking of JavaScript.

Javascript execution

Javascript is one of the major points to make your site slow.
Wondering, why is this?
Because when the web browser comes over script it starts the execution of javascript before continuing to loading HTML. For a browser, executing javascript is a larger task ( depending on size) therefore, it takes more time to load as compared to delivering the important content of the first part of the webpage.
So, JavaScript affects the critical rendering path and slows down the loading speed of your website.

A good customer experience = success of your site

Visitors do not like slow loading sites which means Speed Matters
The page loading speed becomes slow because of Javascript. Due to this users have to wait for a long time that leads to bad user experience, agreed.
You wish your site visitors get converter into customers. So as to achieve this you require to improve your page speed by deferring parsing of javascript.

5. Test Results:-

By using site speed testing tools you can find delivering blocking of javascript. There are many tools available like GTmetrix, Pingdom tools, etc for testing your site.
Let’s consider you can test your site on GTmetrix and then compare the results.

Before Parsing of Javascript

Test your site before applying the defer parsing to javascript. Consider this as an outline and compare these results after defer parsing of JavaScripts.

After Parsing of Javascript

Test your site after applying the defer parsing to javascript. Consider this as a result.

6. How to do Defer parsing of JavaScript in Shopify

Let’s begin doing defer parsing of javascript in Shopify.
  • First, Go to the Layout theme Liquid
  • Find render-blocking Javascript codes, usually ends with .js
  • Go to Asset from the menu and create a new Asset. Name it { Application js.liquid } then add Asset
  • Now copy all Javascripts files from Assets and place them in the application file that you have created.
  • You place them in { application js.liquid } in the same sequence as they appear in the theme liquid file.
  • So, start copying all js files from the jquery then lazy sizes then the vendor files, and at last copy theme.js files and paste this all file one by one in { application js.liquid } file which you created.
  • You can see all these files on the left-hand side corner under the Asset folder.
  • After finishing the copy and paste, save the application.js.liquid file
  • After that go to theme liquid file and delete all of these javascript codes that usually ends with .js
  • The final step adds before this code of deferring parsing in the theme. liquid file.
  • < script src = “ { { ‘ application.js ’ I asset_url } } “ async defer >
  • Now save and you have done with your defer parsing of javascript code.

For Further Details or Additional Information

OR

If you want to know more about our Services