Slow-loading web pages are frustrating for users, so you probably want to optimize the rendering of your site. This article focuses on ways you can optimize your JavaScript and CSS so that your page loads your above-the-fold content as quickly as possible. Because this is the content your users see first and foremost, we will cover ways to render that, while deferring, if possible, anything related to below-the-fold content, or content that your users are not seeing initially.


Render-Blocking JavaScript

Prior to rendering a page, the browser has to build the Document Object Model (DOM) tree, a structural representation of the HTML that the browser understands, by parsing the HTML markup. During this process, the browser’s parser must stop every time it encounters a script to execute its content. Because this prevents further parsing and construction of the DOM, it is described as render-blocking. As you can imagine, each and every stop adds to the amount of time it takes for a page to load.


Users in the Rigor app can set alerts based on whether the number of JavaScript resources on a page falls within a set threshold

Depending on how the JavaScript is called from your HTML, the amount of time required to execute the required actions varies. If the script is inline with the HTML, the parser simply works through the script from top to bottom. If the script is an external file, the parser must make the appropriate request, either in-network or not, and wait for the file to download prior to executing its contents.

Methods for Handling Render-Blocking JavaScript

There are three main ways you can reduce the amount of time caused by render-blocking JavaScript:

  • using inline JavaScript
  • declaring a script asynchronous
  • deferring a script.

Inline JavaScript

If you have small scripts, you may choose to include their contents inline in the HTML document.

Suppose the content of your external script looks like this:

/* Your JavaScript code here. */

You can inline the external script’s contents as follows:

The Impact of Inline JavaScript

Inline JavaScript is advantageous because it eliminates the time required for the browser to make a request for and download the external file.

The disadvantage of this method, however, is that the size of your HTML files increases (all the more so if same script contents must be included across multiple pages). As such, you should only use inline scripts for small amounts of content, such as the content required only for your above-the-fold content.

Asynchronous JavaScript

When including a script in your HTML, you have the option of declaring it as asynchronous:

<script async src= “js/sample.js”>

The browser immediately begins to download scripts that are declared asynchronous, but it does not stop parsing and constructing the DOM during the download process, nor does it prevent the processing of any other scripts required by the site. Only when the asynchronous script has fully downloaded does the browser halt any other actions it might be performing to execute the contents of the script.

The Impact of Asynchronous JavaScript

Because the browser does not halt DOM parsing and construction or the fetching/execution of other scripts required by the site during the download process, it can perform multiple actions simultaneously and render your site faster.

There is, however, no guarantee as to the order in which asynchronous scripts execute, so this method works best for scripts that are not dependent on or depended upon by other scripts.

Deferred JavaScript

When including a script in your HTML, you have the option of declaring it as deferred:

<script defer src= “js/sample.js”>

The browser immediately begins to download scripts marked as deferred, but it holds off on executing the script’s contents until the HTML has been completely parsed and the DOM tree constructed.

The Impact of Deferred JavaScript

By indicating to the browser that a certain portion of scripts are not required for initial rendering, you can reduce the amount of time it takes for the page to load for your user. For example, you can separate out any JavaScript that does not impact your above-the-fold content and defer it to a later point. Additionally, deferred scripts are guaranteed to execute in the order they appear.


Because JavaScript is considered to be render-blocking, you can speed up the loading of your site by executing only the scripts required for your above-the-fold content and delaying all others. You can do this by including relevant snippets inline, marking an external script as asynchronous, or marking an external script as deferred. When deciding which method is most appropriate for your needs, you might consider the following:

  • If the script stands by itself and does not rely on any other scripts, use async
  • If the script relies on, or is relied upon, by another script, use defer
  • If the script is small, use inline JavaScript
  • If you have an async script that relies on your inline JavaScript, be sure that the inline script is:
    • Placed above the async script;
    • Contains no attributes (such as async or defer).



Inline JavaScript

Does not require download time like external scripts

Increases the size of HTML files, especially if duplication on multiple pages is required, so best used on small snippets of JavaScript

Asynchronous JavaScript

Browser continues to parse and construct DOM during download, minimizing render delay

Execution order of asynchronous scripts may be random

Deferred JavaScript

Browser continues to parse and construct DOM during download and delays execution of script until DOM is complete, minimizing render delay

Contents of JavaScript is not immediately available to the end user

Suggested Blog Posts

The Perception Gap for Poor Web Performance

E-commerce revenue continues to grow,as consumers turn away from shopping in brick-and-mortar stores to shopping online.  However, many businesses are not prepared for this growth because they do not fully understand the market and how to invest in...

Read More

Using Browser Trends to Maintain a Better Site

Because of the multifarious nature of web clients today, it’s important to consider the usage statistics when designing, implementing, and managing your site. However, misconceptions often arise when determining what browsers to design...

Read More

Finding Causes of Intermittent Errors from Google Webmaster Tools

Google Webmaster Tools is a web service that allows webmasters to view the status of their sites as seen by Google and the Googlebot crawlers. In addition to indexing your site structure and content, the Googlebot crawlers also record data on perform...

Read More

Optimization Options not Always Optimal

Web designers and developers are always looking for ways to speed up their page load times. Yahoo has an excellent article written on the best practices for speeding up your page. How do you know if implementing one of their suggested practices will...

Read More
  • André Böker

    we accepted page speed insights challenge and created a system to build resposnive websites which score tripple 100/100. Removing render blocking resources was the biggest issue. but problem solved by using node.js server for caching pages. Good luck everyone on this task