Preloading requests can make your pages load faster.
Suppose your page's critical request chain looks like this:
index.html |--app.js |--styles.css |--ui.js
index.html file declares
<script src="app.js">. When
app.js runs , it calls
fetch() in order to download
ui.js. The page doesn't appear complete
until those last 2 resources are downloaded, parsed, and executed.
The problem here is that the browser only becomes aware of those last 2 resources after it
downloads, parses, and executes
app.js. Yet you as a developer know that those resources are
important and should be downloaded as soon as possible.
Declare preload links in your HTML to instruct the browser to download key resources as soon as possible.
<head> ... <link rel="preload" href="styles.css" as="style"> <link rel="preload" href="ui.js" as="script"> ... </head>
The table below lists browser support for preload links.
Lighthouse flags the third level of requests in your critical request chain as preload
candidates. Using the example above, Lighthouse would flag
as candidates. The potential savings are based on how much earlier the
browser would be able to start the requests if you declared preload links. For example,
app.js takes 200ms to download, parse, and execute, the potential savings for each
resource is 200ms since
app.js is no longer a bottleneck for each of the requests.