PageSpeed Insights

Remove Render-Blocking JavaScripts

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 a browser can render a page to the user, it has to parse the page. If it encounters a blocking external script during parsing, it has to stop and download that Javascript. Each time it does that, it is adding a network round trip, which will delay the time to first render of the page.

Recommendations

JavaScript needed to render the above-the-fold region should be inlined, and JavaScript needed to add additional functionality to the page should be deferred until after the above-the-fold content has been delivered. Please keep in mind that for this to improve your loading time, you must also Optimize the CSS Delivery.

Inline Small JavaScript

If the external scripts are small, you can include them directly into the HTML document. Inlining small files in this way allows the browser to proceed with rendering the page. 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>

This eliminates the external request for small.js by placing it inline in the HTML document.

Defer loading of JavaScript

To prevent JavaScript from blocking page loading, we recommend using the HTML async attribute when loading JavaScript. For example:

<script async src="my.js">

If your JavaScript resources use document.write, it is not safe to use asynchronous loading. We recommend that scripts that use document.write be rewritten to use a different technique.

Additionally, when loading JavaScript asynchronously, if your page loads scripts that depend on one another, care must be taken to make sure that your application loads scripts in the proper dependency order.

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 moving the execution and loading of such JavaScript until after the page is loaded.
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 JS templates on the server, inline the results into HTML, and then use client-side templating once the application is loaded. For more information on server-side rendering, see http://youtu.be/VKTWdaupft0?t=14m28s.

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.