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
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.
|Consumer HTML Tag||Preload directive|
For more information you can find the W3C spec here
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
<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.