How To Defer Render Blocking JavaScript

What is web page rendering?

Rendering is the process where all the resources required to display a page are called, and the entire page layout is displayed in the browser. At times, it may happen that a certain resource may delay the rendering of web pages

Scripts that delay Page Rendering

Often an HTML document uses external JavaScript libraries. These libraries may not be entirely needed for the web page. For example, consider a scenario where the page size is 20 KB. However, the page uses an external Jquery file around 100 KB.

It is important to understand here, that a web page may not use all functions in the jquery library. In a typical scenario, this may lead to an unnecessary increase in the page load time.

What leads to the increase in the load time?

Let’s understand how a browser displays a web page.

How to identify render-blocking JavaScript?

Just run the URL of your website through Google’s PageSpeed Insights tool. You may also use developer tools in your browser by pressing the F12 key. Go to the network tab, refresh the web page.  All the resources will be listed in the order of rendering.

The Solution

There are 2 ways of dealing with render-blocking JavaScript: –

a) Use more inline scripts: If any of your external Javascripts are small enough to be inlined, inline them. This drastically reduces the time required to fetch the external Javascript and execute it.

b) Use the defer attribute: Specifying the ‘defer’ attribute in the script tags which are not relevant for ATF (above the fold render) delays the execution of the external JavaScript until the HTML render (page loading) is complete.

<script src=”demo_defer.js” defer> </script>

Likewise, the presence of  ‘async’ attribute executes the script asynchronously with the page render.

<script src=”demo_async.js” async> </script>

For an explanation about the difference between the 3 modes of script execution (render-blocking, defer, async): –

[Courtesy: Kirupa.com]

The Takeaway

The paradigms of SEO is transitioning from mere content to a holistic user experience. Search engines in the future will continue to reward websites which have a smooth user experience along with relevant content.

For web apps compliant with Google PageSpeed Insights, Reach Us