ryanve / speculative

prerender, preconnect, preload, prefetch, dns-prefetch

speculative

npm install speculative --save

var speculative = require('speculative')

speculative({
  href: 'http://google.com',
  rel: 'prerender'
})

API

speculative(attributes)

attributes

• href: URI
• rel: relation
• pr: probability number between 0 and 1
• as: content type
• crossorigin: CORS setting
• media: media query

rel

rel value	Nature	Browser action
prerender	speculative	DNS lookup, TCP/TLS handshake, fetch data, execute scripts
preload	mandatory	DNS lookup, TCP/TLS handshake, fetch data
prefetch	speculative	DNS lookup, TCP/TLS handshake, fetch data
preconnect	speculative	DNS lookup, TCP/TLS handshake
dns-prefetch	speculative	DNS lookup

Examples

Speculating navigation

speculative({
  href: '/page/2',
  rel: 'prerender next',
  as: 'html',
  pr: .5
})

speculative({
  href: '/page/3',
  rel: 'prefetch',
  as: 'html',
  pr: .2
})

Prefetching playlist tracks

speculative({
  href: './track-2.mp3',
  rel: 'prefetch',
  as: 'media',
  pr: .8
})

speculative({
  href: './track-3.mp3',
  rel: 'prefetch',
  as: 'media',
  pr: .3
})

Prefetching an image

speculative({
  href: './hi-res.jpg',
  rel: 'prefetch',
  media: '(min-width: 60rem)',
  as: 'image'
})

Prefetching JavaScript

speculative({
  href: 'https://code.jquery.com/jquery-3.1.0.slim.min.js',
  rel: 'prefetch',
  crossorigin: 'anonymous',
  as: 'script',
  pr: 1
})

Prefetching CSS

speculative({
  href: '/animations.css',
  rel: 'prefetch',
  media: 'screen',
  as: 'style'
})

Prefetch with care. Test for metered data usage

var cxn = require('cxn')
var speculative = cxn.metered() ? function() {} : require('speculative')

License

MIT

speculative's Issues

Ability To Use Without NPM

Thanks For this Lib!

I was wondering if there is a way to use it without a bundler.
Currently, I get an error when trying link script in an HTML page.
Cannot set property 'speculative' of undefined