Help Remove Render-Blocking JavaScripts

Help 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. For more details on how to do this, please see:

  • How to inline small JavaScript?
  • How to defer loading of blocking JavaScript?
  • Frequently Asked Questions

Inline Small JavaScript

If the external scripts are small, you can insert those directly into the HTML document. Inlining small JavaScripts 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

In most cases, the bulk of the JavaScript code handles user-initiated events, such as mouse-clicking and dragging. All of these user-triggered events occur after the page is loaded and the onload event is triggered. In order to defer loading of these JavaScripts insert a JavaScript event listener in the head of the containing document that forces the external file to be loaded after the onload event. We recommend adding a very simple scripted DOM element. Here’s an example, wheredeferredfunctions.js contains the resources that need to be deferred:
<script type="text/javascript">

 // Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "deferredfunctions.js";
 document.body.appendChild(element);
 }

 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;

</script>

Frequently Asked Questions

I am using a JavaScript library, such as JQuery, any advice?
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.
I am using a JavaScript framework, to construct the page, any advice?
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.

0 komentar:

Langganan: Posting Komentar (Atom)