preconnect hint wrapper.
ES5 (.js) version
ES6 (.mjs) version
preconnect is a very small script that allows you to programmatically invoke a
preconnect hint to any host to mask connection latency. The script is designed so that you can invoke this hint whenever is appropriate for your application.
npm i preconnect --save
If you're not the npm type, grab one (or both) of the minified versions in this repo's
dist folder. There are two minified versions:
preconnect.min.jsis the Babel-fied ES5 build. It assigns a variable named
preconnect.min.mjsis the untransformed minified ES6 build. Its
exportis a function eponymously named
;const preconnecter =// Injects `dns-prefetch` hints in addition to `preconnect` hintsgetDns: true;// Preconnects to a link as the user hovers over itdocument;
In the above example, an early connection is established to the host specified in an
href value. This could potentially speed up navigation to that host for the user, improving the perceived performance of the navigation.
When you instantiate a new instance of preconnect, you can pass in an options object. There are two options:
dns-prefetchhint in addition to a
preconnecthint. Some browsers don't support
preconnect, but some of those browsers do support
dns-prefetch. Enabling this ensures those browsers still receive some kind of benefit.
This script can use
requestIdleCallbackto take advantage of idle browser time. This helps to reduce monopolization of the main thread so that the page is more responsive to user input. This option specifies, in milliseconds, the deadline by which
requestIdleCallbackmust inject the resource hint elements into the document
<head>. A value of
0(the default) disables the use of
If you'd like to contribute, please file an issue first so we can discuss. Because I'd like to keep this script very small and simple, new features aren't likely to be added unless the weight they add can be justified.
My name is Jeremy Wagner. I'm an independent web performance consultant. I write about web stuff, and sometimes I even get to talk about web stuff. I also ramble on Twitter @malchata and make web performance videos on YouTube.