Preloading assets

Can preloads be generated for assets like fonts?

Person in shorts with blue hair walking left


When building complex applications, it's easy to end up in a situation where critical resources required for rendering a page aren't referenced in the initial HTML document. This creates a "waterfall" effect, where new critical resources are discovered only once other resources have been downloaded, resulting in sequential network requests that take longer than fetching everything in parallel.

Preloading critical assets using techniques like <link rel="preload"> can aleviate this problem without the need to change how resources are loaded. Preloads simply let the browser start downloading required resources earlier so that they're already cached when it comes time to use them.

The Test

This test checks to see if a build tool provides a way to generate HTML preload links for particular assets, like fonts or images. A JavaScript module and CSS stylesheet with font and image subresources are passed through each build tool, with the necessary configuration or plugins to enable the generation of preload links in that HTML document.


import './styles.css';
console.log('Hello World');


@font-face {
  src: url('./font.ttf');
  font-family: 'testfont';
body {
  background: url('./image.png');


<binary data>


<binary data>

The result produced by this test should be five files: an HTML document, the bundled JavaScript and CSS, and the font and image subresources - all with hashed URLs. The generated HTML document should contain <link rel="preload"> tags for the font and image, with the correct as attribute value for each.



Since gulp can chain multipul tasks with multipul source as input, developers have freedom to edit HTML


Parcel uses an HTML file as an entry point. Therefore, developers can add <link rel="preload"> directly in their HTML. Parcel will take care of updating the referenced URLs to include the proper content hash.


Rollup's generateBundle hook gives you full access to build details before files are written. You can use this to create preloads.


The standard plugin for handling HTML in Webpack's ecosystem is html-webpack-plugin, which allows templating of HTML files based on Webpack's output modules and assets. preload-webpack-plugin and resource-hints-webpack-plugin can be used to inject <link rel=preload> for generated assets, and both support customizing the preload as="" value by file extension.