Stay organized with collections Save and categorize content based on your preferences.
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 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.
OverviewBefore 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 JavaScriptto learn more about how JavaScript affects the critical rendering path.
RecommendationsYou 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.
Inline JavaScriptExternal 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 AsynchronousBy 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 JavaScriptto 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 JavaScriptThe 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.
FAQWas this page helpful?
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. For general questions, feedback, and discussion, start a thread in the mailing list. Sorry to hear that. If you have a specific, answerable question about using PageSpeed Insights, ask the question in English on Stack Overflow. For general questions, feedback, and discussion, start a thread in the mailing list.Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-09-03 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-09-03 UTC."],[[["This document is outdated; refer to Version 5 for the latest information on PageSpeed Insights."],["Avoid or minimize blocking JavaScript, especially external scripts, to improve page load times."],["Inline small, essential JavaScript code and use `async` or `defer` attributes for non-critical scripts."],["For JavaScript libraries and frameworks, explore asynchronous loading, deferred execution, or server-side rendering for optimal performance."]]],["The key issue is blocking JavaScript, especially external scripts, which halt HTML parsing and delay page rendering. Recommendations include inlining small, critical scripts to avoid network requests, and making non-critical scripts asynchronous or deferred. Asynchronous scripts use the `async` attribute, while deferred scripts load after the initial render. JavaScript libraries and frameworks should be evaluated to see if they can be loaded asynchronously or inlined to avoid extra round trips.\n"]]
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4