quicklink

quicklink

Faster subsequent page-loads by prefetching in-viewport links during idle time

How it works

Quicklink makes subsequent navigations to pages load faster. It:

• Detects links within the viewport (using IntersectionObsever)
• Waits until the browser is idle (using requestIdleCallback)
• Checks if the user isn't on a slow connection (using navigator.connection.effectiveType) or has data-saver enabled (using navigator.connection.saveData)
• Prefetches URLs to the links (using <link rel=prefetch> or XHR). Provides some control over the request priority (can switch to fetch() if supported).

Usage

Quickstart:

<!-- Include quicklink from dist -->
<script src="dist/quicklink.js"></script>
<!-- Initialize (you can do this to whenever you want) -->
<script>
quicklink();
</script>

ES Module import:

import quicklink from "dist/quicklink.mjs";
quicklink();

Recipes

Set the DOM element to obseve for in-viewport links

Defaults to document otherwise.

let elem = document.getElementById('stuff');
quicklink({
  el: elem
});

Set a custom array of URLs to be prefetched

If you would prefer to provide a static list of URLs to be prefetched, instead of detecting those in-viewport, customizing URLs is supported.

quicklink({
   urls: ['2.html','4.html']
});

Set the request priority for prefetches

Defaults to low-priority (rel=prefetch or XHR). For high-priority, attempts to use fetch() or falls back to XHR.

quicklink({ priority: 'high' });

License

Licensed under the Apache-2.0 license.

Changelog

0.0.1 (2018-11-24)

• (tidy) clean-up demo directory (dc6bc58)
• (tidy) index.mjs: JSDoc comments (e0d0afe)
• 0.0.1 (9ad703b)
• Add babelrc and travis configuration (d417c9c)
• Add demo directory (67784f7)
• Add dist to gitignore (3eb7f8c)
• Add handling for effectiveconnectiontype (47dbaf5)
• Add microbundle and configuration to package (6571ff0)
• Add package.json (fd6149b)
• Add saveData handling (32902a7)
• Adds index: initial implementation (ce0aa40)
• Clean-up source (ecbd70f)
• clean(index, prefetch): move connection logic to prefetcher (a7cafa4)
• clean(index.mjs, prefetch.mjs) move prefetching logic to one place (6e5d9fb)
• clean(src/index.mjs, src/prefetch.mjs): further reshuffling (9fe6036)
• docs(pkg, README): more tweaks. (c1e66c5)
• feat(index, prefetch) Add support for higher prio fetches (c4fb77a)
• fix(demo/index.html): Reference UMD build (6e7a838)
• Initial commit (869ce69)
• Lots of ESLint fixes (5d0af3d)
• minor(index, prefetch): renaming (2c03bba)
• tidy(demo/index.html): drop unused script reference (4aecc0f)
• docs(package.json): get consistent with description (c2f00ed)
• docs(README): add how it works, usage and recipes. (0a26a65)
• fix(src): Add license headers (adf645e)