Removal of Render Blocking JavaScript

0 Comment Admin 2016-01-22
Before a web browser can effectively render a page, it needs to build a standard DOM tree. In order to achieve this task, it has to parse the HTML markup. During the process, if the parser comes across a script, it has to stop and execute the script before continuing with HTML parsing. In case there’s an external script, the parser is forced to wait for a specific resource to download. This incurs multiple network roundtrips and delays the time to render the web page. It leads to a lot of hassles. Due to this, experts have given some important recommendations for removal of render blocking JavaScript. 


Recommendations

It’s important to minimize and avoid the use of unnecessarily blocking JavaScript, especially those external scripts that need to be fetched before being executed. Scripts required to render web page content can be easily inlined to avoid additional network requests. However, the inlined web page content needs to be quite small. It should be able to get executed quickly and properly to deliver high performance. Scripts that aren’t considered critical for the initial render need to be deferred or made asynchronous until after the initial render. It’s worth mentioning that you also need to optimize CSS delivery to improve loading time. 


Inline JavaScript

External blocking scripts tend to force the web browser to wait for the JavaScript to be properly fetched. This may add multiple network round trips before the web page can be rendered. In case the external scripts are small in size, you can easily inline the content directly into the HTML document. You can also avoid the network request latency. 

Experts believe that inlining the content helps you get rid of external requests for small.js. It also allows the web browser to deliver a much faster time for the first render. However, it’s important to understand that inlining increases the size of your HTML document. Moreover, the same script contents need to be inclined across various web pages. Due to this, you should always inline only small scripts to deliver high performance. 


Make JavaScript Asynchronous

By default, JavaScript blocks standard DOM construction. Due to this, it delays the time for the first render. In order to prevent the JavaScript from blocking the parser, it’s recommended to use the HTML async attribute on a wide range of external scripts. The execution and loading of scripts that aren’t necessary for the initial page render can be deferred until after the first render. It may also be deferred until after the important parts of a web page have finished loading. This can help you improve performance and reduce resource contention. 

A lot of JavaScript libraries, like JQuery, can be used to improve the web page to add more animations, interactivity and other special effects. However, a lot of these behaviors can be added safely after the above-the-fold content has been rendered. In case the web page’s content has been constructed by client-side JavaScript, you need to investigate inlining the relevant JavaScript modules. This helps you avoid additional network roundtrips. You should also seek professional help for better results.
0 comments on "Removal of Render Blocking JavaScript"