This rule triggers when PageSpeed Insights detects that your HTML references a blocking
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.
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
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:
And the resource
is like this:
Then you can inline the script as follows:
Inlining the script contents eliminates the external request for
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.
attribute on external scripts. For example:
<script async src="my.js">
to learn more about asynchronous scripts.
Note that asynchronous scripts are not guaranteed to execute in specified order and should not use
. 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.
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.
additional interactivity, animations, and other effects. However, many of these
behaviors can be safely added after the above-the-fold content is rendered.
network roundtrips. Similarly, leveraging server-side rendering can significantly
fast first render, and then use client-side templating once the page is loaded. For more
information on server-side rendering, see