All about prefetching

  • Network Information APIs allow you to use different strategies for different connection types to improve prefetching performance.
  • Four common prefetching strategies are as follows. Many websites use a combination of these.

1. Interaction-driven - uses mouse and scroll activities as signals

2. State-driven - uses current page or URL to prefetch next logical step

3. User-driven - matches each specific user’s patterns of past usage, account information, etc

4. Download everything - so all the links in a page or all the bundles for an app.

  • The prefetch resource hint can be used to prefetch on all major browsers except Safari. You can either manually add prefetch resource hints with no dependencies or build tools based on developer configurations or use dedicated prefetch tools such as quicklink, Guess.js or Gatsby.

Full post here, 7 mins read