Jump to Categories

Resource Hints

Resource hints

Developers can provide hints to the browser to improve performamnnce for the user

Summary

  • preload – when you’ll need a resource very soon
  • prefetch – when you know you will need resource on next page
  • preconnect – when you know you’ll need a resource soon, but you don’t know its full url yet
  • dns-prefetch – as above but performs less actions for less-definite cases

Preload

Tells the browser to download and cache a resource (like a script or a stylesheet) as soon as possible. They're not actually parsed or executed until requested.

To be used on things that are essential. The browser sees this as mandatory and will follow it, unlike other tags where the browser can make a descision. For example load a font that will be called within a stylesheet, or load a non-critical cssfile before it's loaded with loadCSS.

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

Prefetch

Tells a page to get a page in the background so that it's ready to load. This goes further than the DNS lookup and server connection and actually requests and downloads the files. Again, it isn't parsed or executed until requested.

It should be used for resources from other pages, comes secondary to preload andshouldn;t be used for essential resources.

<link rel="prefetch" href="https://example.com/news/?page=2" as="document">

Preconnecting

Creates connection between servers - DNS lookup, Transport Layer Security (TLS) negotiation, and the Transmission Control Protocol (TCP) handshake - will also validate HTTPS certificate if applicable.

Useful for things like Ajax requests, orany other assets, that you know you're going to make request. If you're not sure if they're definitely going to be used DNS-Prefetch would be a better choice to avoid TCP overhead.

<link rel="preconnect" href="https://scripts.example.com">

DNS-Prefetch

Very similar to preconnect but only does the DNS lookup and has better browser support.

To minimise lookups you should reduce number of domains on a webpage. However the DNS-prefetch will tell the browser to start the DNS lookup domain as soon as possible.

Use it to speed up third party scripts or styles.

<link rel="dns-prefetch" href="https://example.com">

As attribute

Optional attribute that tells browser what we're fetching. This allows browser to set same sort of request headers and security policies as if we’d just followed a link to a new page.

  • audio - Sound and music files
  • video - Video
  • Track - Video or audio WebVTT tracks
  • script - JavaScript files
  • style - CSS style sheets
  • font - Web fonts
  • image - Images
  • fetch - XHR and Fetch API requests
  • worker - Web workers
  • embed - Multimedia <embed> requests
  • object - Multimedia <object> requests
  • document - Web pages

Refs