# Remove Render-Blocking JavaScript

> [!CAUTION]
> **Deprecated** . This page was written for version 4 of the PageSpeed Insights API, which is deprecated and will be shut down in May 2019. [Version 5](https://developers.google.com/speed/docs/insights/v5/get-started) is the latest and provides both real-world data from the Chrome User Experience Report and lab data from Lighthouse.

This rule triggers when PageSpeed Insights detects that your HTML references a blocking external JavaScript file in the above-the-fold portion of your page.

### Overview

Before the browser can render a page it has to build the DOM tree by parsing the HTML markup. During this process, whenever the parser encounters a script it has to stop and execute it before it can continue parsing the HTML. In the case of an external script the parser is also forced to wait for the resource to download, which may incur one or more network roundtrips and delay the time to first render of the page. See [Adding Interactivity with JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript) to learn more about how JavaScript affects the critical rendering path.

### Recommendations

You should avoid and minimize the use of blocking JavaScript, especially external scripts that must be fetched before they can be executed. Scripts that are necessary to render page content can be inlined to avoid extra network requests, however the inlined content needs to be small and must execute quickly to deliver good performance. Scripts that are not critical to initial render should be made asynchronous or deferred until after the first render. Please keep in mind that for this to improve your loading time, you must also [optimize CSS delivery](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery).

## Inline JavaScript

External blocking scripts force the browser to wait for the JavaScript to be fetched, which may add one or more network roundtrips before the page can be rendered. If the external scripts are small, you can inline their contents directly into the HTML document and avoid the network request latency. For example, if the HTML document looks like this:

```
<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
```
And the resource `small.js` is like this:

```
  /* contents of a small JavaScript file */
```
Then you can inline the script as follows:

```
<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
```
Inlining the script contents eliminates the external request for `small.js` and allows the browser to deliver a faster time to first render. However, note that inlining also increases the size of the HTML document and that the same script contents may need to be inlined across multiple pages. As a result, you should only inline small scripts to deliver best performance.

## Make JavaScript Asynchronous

By default JavaScript blocks DOM construction and thus delays the time to first render. To prevent JavaScript from blocking the parser we recommend using the HTML `async` attribute on external scripts. For example:

```
<script async src="my.js">
```
See [Parser Blocking vs. Asynchronous JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript#parser_blocking_versus_asynchronous_javascript) to learn more about asynchronous scripts. Note that asynchronous scripts are not guaranteed to execute in specified order and should not use `document.write`. Scripts that depend on execution order or need to access or modify the DOM or CSSOM of the page may need to be rewritten to account for these constraints.

## Defer loading of JavaScript

The loading and execution of scripts that are not necessary for the initial page render may be deferred until after the initial render or other critical parts of the page have finished loading. Doing so can help reduce resource contention and improve performance.

## FAQ

What if I am using a JavaScript library such as jQuery?
:   Many JavaScript libraries, such as JQuery, are used to enhance the page to add
    additional interactivity, animations, and other effects. However, many of these
    behaviors can be safely added after the above-the-fold content is rendered.
    Investigate making such JavaScript asynchronous or defer its loading.

What if I'm using a JavaScript framework to construct the page?
:   If the content of the page is constructed by client-side JavaScript,
    then you should investigate inlining the relevant JavaScript modules to avoid extra
    network roundtrips. Similarly, leveraging server-side rendering can significantly
    improve first page load performance: render JavaScript templates on the server to deliver
    fast first render, and then use client-side templating once the page is loaded. For more
    information on server-side rendering, see <http://youtu.be/VKTWdaupft0?t=14m28s>.

## Feedback

Was this page helpful?
<button class="button button-primary expand-control gc-analytics-event" data-category="Helpful" data-value="1" data-label="/speed/docs/insights/BlockingJS" style="background-color:#f44336;"> Yes </button>

> [!TIP]
> Great! Thank you for the feedback. If you have a specific, answerable question about using PageSpeed Insights, ask the question in English on [Stack
> Overflow](https://stackoverflow.com/questions/tagged/pagespeed-insights). For general questions, feedback, and discussion, start a thread in the [mailing list](https://groups.google.com/forum/#!forum/pagespeed-insights-discuss).

<button class="button button-primary expand-control gc-analytics-event" data-category="Helpful" data-value="0" data-label="/speed/docs/insights/BlockingJS" style="position:absolute;top:0;left:70px;background-color:#f44336;"> No </button>

> [!WARNING]
> Sorry to hear that. If you have a specific, answerable question about using PageSpeed Insights, ask the question in English on [Stack
> Overflow](https://stackoverflow.com/questions/tagged/pagespeed-insights). For general questions, feedback, and discussion, start a thread in the [mailing list](https://groups.google.com/forum/#!forum/pagespeed-insights-discuss).