Have questions about images on the web? Tweet your questions to @ChromiumDev with #AskChrome and we'll answer the top questions in our next #AskChrome episode on YouTube.

Preload key requests

Overview

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

Your index.html file declares <script src="app.js">. When app.js runs , it calls fetch() in order to download styles.css and ui.js. The page doesn't appear complete until those last 2 resources are downloaded, parsed, and executed.

Without preload links, styles.css and ui.js are requested only after
            app.js has been downloaded, parsed, and executed.
Figure 1. Without preload links, styles.css and ui.js are requested only after app.js has been 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.

Recommendations

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>
With preload links, styles.css and ui.js are requested at the same time
            as app.js.
Figure 2. With preload links, styles.css and ui.js are requested at the same time as app.js.

See Can I Use link-rel-preload? to see browser support for preload links.

More information

Lighthouse flags the third level of requests in your critical request chain as preload candidates. Using the example above, Lighthouse would flag styles.css and ui.js 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, if 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.

Sources:

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.