Preload Key Request

November 22, 2020 3 min read

Google Lighthouse sends you a warning about the 3rd level request coming to the critical request chain. These requests are generally marked as preload candidates. Here is a screenshot of the warning:

How does Lighthouse manage the audit?

The critical request chain on your web page will look like the following:

index.html
|--app.js
   |--styles.css
   |--ui.js

Let’s briefly examine the example above. You can see <script src="app.js"> in the index.html file above. When app.js starts running in this type of code, that system calls fetch() command. The reason it does this is to download styles.css and ui.js. In this case, your page will wait for these two resources to be downloaded and will not be visible until this process occurs, which will negatively affect its performance. Passing and executing processes must also be completed before your page to appear. In such a case, Google Lighthouse defines styles.css and ui.js as candidates and flags them to be preload candidates.

In order for your page to perform well, you need to save time. The performance will also vary, depending on how early the browser can initiate its own connection requests after the preload links are declared. To give an example from the code snippet above, let’s assume that it takes 200ms for app.js to download, parse, execute. In this case, the potential savings for each would be at most 200ms.

In short, you can make your page load faster thanks to the preloading request. See screenshot below:

Actually, the problem here is: the only way for the browser to be aware of the last 2 sources is to download, parse, and execute app.js. waiting for these does not provide the desired performance. Because these resources are extremely important and they must be downloaded as quickly as possible.

How to pass the audit? – Declaring your preload links

If you want your page to run faster, you have to make sure your browser downloads essential resources as quickly as possible. In order to do this, it would be a good solution to inform the browser about the key resources in your HTML source code.

<head>
  ...
  <link rel="preload" href="styles.css" as="style">
  <link rel="preload" href="ui.js" as="script">
  ...
</head>

Test Your Website Performance!

You can quickly analyze your site in a minute