How to Preload Key Requests for Better Core Web Vitals

Not all of your site’s resources are equally important. 

Yes, they are all needed for your website to look and operate flawlessly, but when it comes to its performance, some must have a higher priority. 

Otherwise, you risk having slow-loading pages and a long list of warnings in your PageSpeed Insights (PSI) report. 

One of which is – Preload key requests.

In the following lines, you will learn what key requests are, why it is important to fix the “Preload key requests” warning, and last but not least – how to do it. 

• What does Preload key requests mean
• How preloading critical assets will improve your site speed
• How to identify the key requests you should preload
• How to fix the Preload key requests warning
• Preloading key requests automatically

Read on. 

What does Preload key requests mean?

By preloading key requests, you tell the browser which are the most critical assets to download in advance. This enables the most important files to load quicker, particularly when they would otherwise be discovered and downloaded later in the process.

But this raises the question:

What makes a request critical?

Critical request is a resource displayed in a page's initial viewport (or above-the-fold as we markets like to call it).

For instance, here’s what I see when I load NitroPack’s home page on my laptop:

All resources that are loaded in the above-the-fold are considered critical. Hence, they should be downloaded and rendered with higher priority by the browser to provide the user with an instant loading experience.

In general, browsers’ algorithms are pretty good at prioritizing the most critical resources for a page. In fact, when a browser downloads a resource, it assigns it a priority: 

• Highest 
• High
• Medium
• Low
• Lowest

However, as the owner/developer of the website, you have valuable insights into which resources are more critical than others. Hence, by preloading them, you will not only pass the PSI warning but also boost your overall performance and user experience.

Here’s how…

How applying a Preload key requests fix will improve your performance

The truth is:

Fixing the “Preload key requests” warning just to move yet another warning into the “passed” category isn’t worth it. 

However, preloading the most critical resources of your web page will have a significant impact on your site’s:

• Core Web Vitals
• Performance score
• Perceived performance

Let’s see how it's that possible.

Preloading and Largest Contentful Paint (LCP)

Largest Contentful Paint measures how long it takes for the largest above-the-fold element to load on a page.

The types of resources that are most commonly considered an LCP element include:

• Images;
• Image tags;
• Video thumbnails;
• Background images with CSS;
• Text elements.

All of them are great candidates for preloading. 

And delivering them faster will help you improve the Core Web Vitals metric websites struggle with the most. 

Moreover, LCP accounts for 25% of your overall performance score. So boosting it will inevitably lead to moving your score from red to green.

Get your LCP score from red to green with a click of a button. Install NitroPack today →

 

Preloading and First Contentful Paint (FCP)

First Contentful Paint (FCP) measures the time it takes for the browser to visualize the first piece of DOM content (e.g., image, SVG, non-blank canvas element) on a page.

While preloading the loading animation or your page’s logo (it can also trigger FCP) might seem insignificant, it’s crucial for the user experience.

When the browser loads the FCP element immediately, it sends a direct response to the user their input is being processed and the site is loading.

If a page stays blank for a few seconds before it loads, users don’t know whether something is happening. And you can guess what their next step would be:

Bounce! 

In other words, preloading the FCP element is vital to keep your visitors happy and, most importantly – on your website. 

Furthermore, FCP accounts for 10% of your performance score, so you’ll also get a boost in that aspect.

 

Preloading and perceived performance

We’ve mentioned perceived performance several times. If you are wondering what it means, here’s the definition:

“Perceived performance is a subjective measure of website performance, responsiveness, and reliability. In other words, how fast a website seems to the user. It is harder to quantify and measure than the actual speed of operation, but perhaps even more important.”

In some cases, the perception of how quickly and smoothly pages load and respond to user interaction is even more important than the actual time required to fetch the resources.

By preloading key resources, you give your users this perception of a faster-loading page. The content appears to load quickly and smoothly, creating a more seamless browsing experience. Users can interact with the page sooner without waiting for critical resources to be fetched and loaded. 

This improved perceived performance can lead to 

• higher user engagement
• reduced bounce rates
• overall satisfaction with the website

How to identify the most critical requests you should preload

Google’s PageSpeed Insights is the easiest and most efficient way to identify key requests to preload.

When you test the performance of your URL, make sure to check the Opportunities section for recommendations. Look specifically for a suggestion labeled "Preload key request," similar to the example shown:

Alternatively, you can run some tests using Chrome DevTools. To start the process, load the page you want to test and click Inspect > Lighthouse.

Then, choose whether you want to test the mobile or desktop version of your page and click “Analyze” page load:

After the test is completed, scroll down and look for the “Preload key requests” warning.

Note: Since Google PageSpeed Insights uses Lighthouse, testing your page through PSI or Chrome DevTools will yield the same results. It’s up to you which way you prefer. 

To understand how exactly Lighthouse determines which resources are suitable for preloading, let’s look at the following example. 

Your page's critical request chain looks like this:

> index.html

>> app.js

>>> styles_custom.css

>>>> ui_custom.js

In your index.html file, you include a script src="app.js" tag. When the app.js file is executed, it triggers a fetch() call to download styles_custom.css and ui_custom.js. The page will not fully display until these two resources are downloaded, parsed, and executed. Such files are considered render-blocking resources. 

Hence, styles_custom.css and ui_custom.js would be identified by Lighthouse as the relevant resources.

The issue is that the browser becomes aware of the last two files only after downloading, parsing, and executing app.js. However, you know that these resources are included in the above-the-fold part of your page and you should download them as soon as possible.

To give them a higher priority, you can use link rel="preload". 

How to fix the “Preload key request” warning

To fix the warning, apply the link rel=preload attribute to the critical resources flagged by PSI. 

Simply put, the link rel=preload command instructs browsers to fetch a significant resource earlier than they would typically discover.

Preload is declarative, unlike other resource hints, such as prefetch and preconnect that provide suggestions. This means browsers must fetch the specific resource you consider vital for the page experience.

You can preload resources by adding a link rel=preload tag to the head of your HTML document. 

For instance, here’s how the code snippet looks for a preloaded logo:

You might’ve noticed that apart from the preload and resource, there’s a third attribute - as. 

The as attribute indicates the resource’s content type. By not adding a valid “as” when specifying what to preload, you risk fetching the asset twice.

Furthermore, including the as attribute helps the browser set the priority of the prefetched resource according to its type and determine whether it already exists in the cache. 

Here’s a complete list of as values that you can specify:

Important: Modern web browsers are good at prioritizing resources, so the excessive usage of link rel=preload might lead to negative results. Make sure to use it sparingly and only when it’s truly needed. 

 

Preloading key requests automatically with NitroPack

If you’re looking for an easier, automatic way to preload your critical resources and improve your site’s Core Web Vitals, performance score, and perceived performance, you should try NitroPack.

One of the main reasons why NitroPack is the leader in Core Web Vitals results for 180,000+ websites is our proprietary resource loading mechanism.

NitroPack doesn’t rely on built-in browser techniques. Instead, it uses our resource loader, which rearranges how resources are fed to the main thread and preloads many assets. This takes advantage of the modern CPU’s multi-core nature by offloading tasks away from the main thread.

Furthermore, our service automatically optimizes your site’s CSS delivery by creating Critical CSS for every page per layout. This results in better perceived and actual performance.

But the best part is – using NitroPack is risk-free.

How so?

Firstly, you can test NitroPack without spending a single dime getting our free plan. 

Secondly, NitroPack works on copies of your site’s files, keeping the originals 100% safe. 

Simply put:

You can overtake all your competitors by having the fastest loading site in the industry without lifting a finger and risking anything. 

It sounds like a pretty good deal to me!