Preload: which resources should you preload for web performance?

When a web page is loaded, the browser downloads an HTML file from a server, processes its content, and submits various requests for the resources referenced in the code. As a developer, you know which resources are important. The browser, on the other hand, needs help identifying priority resources in order to display the page as quickly and efficiently as possible to the user. To do this, you can guide it using preload.

How does preloading work?

Preloading is a modern mechanism useful for resources that are typically discovered late by the browser.

In this example, font files are only discovered after the CSS file is loaded, where they are called using the @font-face method. The browser starts downloading them once the CSS file has been downloaded and parsed.By intelligently preloading certain resources, you tell the browser that you want it to load these files well before it would normally discover them, because you are certain they will be needed for the current page to load.

In this example, the font files have been preloaded, and are now downloaded at the same time as the CSS.This type of dependency between multiple files is called a critical request chain: since one file calls another, the browser has no way of determining which files to load in advance without having parsed the previous one.

To address this kind of issue, it is often useful to preload a resource using a preload tag:

<link rel="preload" href="style.css" as="style" />
<link rel="preload" href="main.js" as="script" />

This tag must be adapted according to the resource type (via the as attribute) and with the resource URL (via the href attribute). Be careful, the href value is sensitive: if a slash or a query string differs, the file will be loaded twice.

⚠️ If the as attribute is not specified, the request will be treated as an XHR call and will therefore be made twice, cancelling the effect of preloading.

When this preload directive is discovered, the browser will download the file into the user's cache so that it is available when needed. JavaScript files will not be executed, and CSS will not be applied until the file is actually called in the page.

💡 If a file is defined as preload but is not called within 3 seconds after the load event, Chrome will raise a warning in the developer console.

Preloading a web font: a specific case

Are you trying to preload a font as mentioned above? This case is a little particular. For complex technical reasons, web fonts are loaded with crossorigin.

Therefore, to correctly preload a woff2 file (or any other font format), you need to add the crossorigin attribute to your HTML tag as follows:

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin />

The effect of preloading on Core Web Vitals

Using preload is a powerful asset in web performance optimization — preloading can noticeably speed up a website. Such optimizations can lead to significant changes in Core Web Vitals. That is why it is highly worthwhile to test and learn how preload works.

Largest Contentful Paint (LCP)

Preloading has a significant impact on the Largest Contentful Paint for fonts and images, since both fonts and images can be LCP candidates. Hero section images or large text blocks that depend on additional font files can benefit greatly from thoughtful preloading. The opportunity to save hundreds of milliseconds on page load time with a single line of code is not to be missed!

On the other hand, you need to be careful about overusing preload tags. If you preload too many resources, it amounts to the same as not preloading any of them. Preloading too many resources risks causing bandwidth contention issues between resources.

To truly improve the web performance of a page, I recommend preloading only modern resource formats (WOFF2 for fonts, WebP or AVIF for images).

Cumulative Layout Shift (CLS)

The Cumulative Layout Shift (CLS) is an important Core Web Vital that can be negatively impacted by fonts, particularly when using the CSS font-display property to customize the font loading behavior.

It is important to experiment with the different possible values for loading your web fonts. In the case where you preload your font file, I would recommend using the block value to eliminate any Layout Shift.

If you are more technical, it is possible to use fallback fonts, calculated from metrics ratios to allow text to be displayed using a system font installed on all your users' computers while your custom fonts are loading.

Preloading: a must-have solution for web performance in 2026

To improve site speed, it is essential to preload the important resources of your pages that are discovered late by the browser. Preloading all resources on a page would be counterproductive, so use preloading sparingly and measure its real-world impact.