pixel
User Probe Logo
FAQPricingSign InGet Started

Preload Key Requests

Twillo saw a 300ms improvement on render time just by adding rel="preload" on thier fonts

You can unblock vital requests by hinting to a browser an asset is required later. In our example request chain we have a data.json file that is loaded by our app.js

How To preload assets in HTML head

To achieve preloading, we can use the knowledge of our website, that the browser only has after the load. We make the browser aware of assets earlier in the request chain, by adding a link in the HTML head.

<link rel="preload" href="data.json" as="fetch">

Using preloading the data.json is requested at the same time as the app.js file when the `app.js` comes to request the data we have a head start.

Prefetch assets are preserved in the global net-stack cache for a minimum of 300 seconds (5 minutes) regardless of the cachability of the resource. In Chrome & Firefox, even when the user navigates away from a page, the request is fulfilled, Safari aborts the request.

By using the AS attribute, the browser can further prioritise the download, perform request matching, Content Security Policy checks, and set the correct `Accept` header on the request.

Don't try to preload every resource, instead focus on late discovery critical resources. In our testing, we have found a good rule of thumb is to limit each page to six preloads.

What HTML tags can you preload?

Consumer HTML TagPreload directive
<audio><link rel=preload as=audio href=...>
<video><link rel=preload as=video href=...>
<track><link rel=preload as=track href=...>
<script><link rel=preload as=script href=...>
<link rel=stylesheet>, CSS<link rel=preload as=style href=...>
CSS @font-face<link rel=preload as=font href=...>
<img>, <picture>, srcset, imageset, SVG's <image><link rel=preload as=image href=...>
XHR, fetch<link rel=preload as=fetch crossorigin href=...>
Worker, SharedWorker<link rel=preload as=worker href=...>
<embed><link rel=preload as=embed href=...>
<object><link rel=preload as=object href=...>
<iframe>, <frame><link rel=preload as=documenthref=...>

For more information you can find the W3C spec here

For highest performance place the link tag directly after the resource that consumes the preloaded asset

HTTP2 Push

By adding preload tags to your initial HTML, you are not just hinting to the browser but also hTTP/2 compatible server

You can opt an asset out of a prefetching push by using the nopush attribute

<link rel="preload" href="app.css" as="style" nopush>

Some HTTTP/2 implementations do not push preload content, and others only push on specific conditions such as when the server believes the client does not have the resource available in the client cache.

Sources