×

image02

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.

image03

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.

image00

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.

Summary

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).

Advantages

Disadvantages

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