speculative

npm install speculative --save

varspeculative=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

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

License

MIT