Faster subsequent page-loads by prefetching in-viewport links during idle time
Faster subsequent page-loads by prefetching in-viewport links during idle time
Quicklink attempts to make navigations to subsequent pages load faster. It:
navigator.connection.effectiveType) or has data-saver enabled (using navigator.connection.saveData)<link rel=prefetch> or XHR). Provides some control over the request priority (can switch to fetch() if supported).This project aims to be a drop-in solution for sites to prefetch links based on what is in the user's viewport. It also aims to be small (< 1KB minified/gzipped).
npm install --save quicklink
You can also grab quicklink from unpkg.com/quicklink.
Once initialized, quicklink will automatically prefetch URLs for links that are in-viewport during idle time.
Quickstart:
<!-- Include quicklink from dist -->
<script src="dist/quicklink.js"></script>
<!-- Initialize (you can do this whenever you want) -->
<script>
quicklink();
</script>
For example, you can initialize after the load event fires:
<script>
window.addEventListener('load', () =>{
quicklink();
});
</script>
ES Module import:
import quicklink from "dist/quicklink.mjs";
quicklink();
The above options are best for multi-page sites. Single-page apps have a few options available for using quicklink with a router:
quicklink() once a navigation to a new route has completedquicklink() against a specific DOM element / componentquicklink({urls:[...]}) with a custom set of URLs to prefetchquicklink accepts an optional options object with the following parameters:
el: DOM element to observe for in-viewport links to prefetchurls: Static array of URLs to prefetch (instead of observing document or a DOM element links in the viewport)timeout: Integer for the requestIdleCallback timeout. A time in milliseconds by which the browser must execute prefetching. Defaults to 2 seconds.timeoutFn: Function for specifying a timeout. Defaults to requestIdleCallback. Can also be swapped out for a custom function like networkIdleCallback (see demos)priority: Boolean specifying preferred priority for fetches. Defaults to false. true will attempt to use the fetch() API where supported (rather than rel=prefetch)origins: Static array of URL hostname strings that are allowed to be prefetched. Defaults to the same domain origin, which prevents any cross-origin requests.ignores: A RegExp, Function, or Array that further determines if a URL should be prefetched. These execute after origin matching.TODO:
quicklink:
IntersectionObserver to be supported (see CanIUse). We recommend conditionally polyfilling this feature with a service like Polyfill.io:<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
Alternatively, see the Intersection Observer polyfill.
Set a custom timeout for prefetching resources
Defaults to 2 seconds (via requestIdleCallback). Here we override it to 4 seconds:
quicklink({
timeout: 4000
});
Set the DOM element to observe for in-viewport links
Defaults to document otherwise.
const elem = document.getElementById('carousel');
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','3.html', '4.js']
});
Set the request priority for prefetches
Defaults to low-priority (rel=prefetch or XHR). For high-priority (priority: true), attempts to use fetch() or falls back to XHR.
quicklink({ priority: true });
Specify a custom list of allowed origins
Provide a list of hostnames that should be prefetch-able. Only the same origin is allowed by default.
Important: You must also include your own hostname!
quicklink({
origins: [
// add mine
'my-website.com',
'api.my-website.com',
// add third-parties
'other-website.com',
'example.com',
// ...
]
});
Allow all origins
Enables all cross-origin requests to be made.
quicklink({
origins: true,
// or
origins: []
});
Custom Ignore Patterns
These filters run after the origins matching has run. Ignores can be useful for avoiding large file downloads or for responding to DOM attributes dynamically.
// Same-origin restraint is enabled by default.
//
// This example will ignore all requests to:
// - all "/api/*" pathnames
// - all ".zip" extensions
// - all <a> tags with "noprefetch" attribute
//
quicklink({
ignores: [
/\/api\/?/,
uri => uri.includes('.zip'),
(uri, elem) => elem.hasAttribute('noprefetch')
]
});
The prefetching provided by quicklink can be viewed as a progressive enhancement. Cross-browser support is as follows:
Certain features have layered support:
navigator.connection.effectiveType) is only available in Chrome 61+ and Opera 57+{priority: true} and the Fetch API isn't available, XHR will be used instead.quicklink includes a prefetcher that can be individually imported for use in other projects. After installing quicklink as a dependency, you can use it as follows:
<script type="module">
import prefetch from '../src/prefetch.mjs';
const urls = ['1.html', '2.html'];
const promises = urls.map(url => prefetch(url));
Promise.all(promises);
</script>
Here's a WebPageTest run for our demo improving page-load performance by up to 4 seconds via quicklink's prefetching. A video comparison of the before/after prefetching is on YouTube.
For demo purposes, we deployed a version of the Google Blog on Firebase hosting. We then deployed another version of it, adding quicklink to the homepage and benchmarked navigating from the homepage to an article that was automatically prefetched. The prefetched version loaded faster.
Please note: this is by no means an exhaustive benchmark of the pros and cons of in-viewport link prefetching. Just a demo of the potential improvements the approach can offer. Your own mileage may heavily vary.
Intersection Observer to prefetch all of the links that are in view and provided heavy inspiration for this project.Licensed under the Apache-2.0 license.
1.0.0 (2018-12-14)
sameOrigin but move to same origin default; (11af301)typeof document check; (c578c32)options inlining; (194881f)filter option; (4e64ca1)support helper; (9df00ff)options.priority default; (36cc199)options defaults; (fe5f735)withCredentials assignment; (1c94262)document.head for append; (189984a)navigator.connection to var; (5f95309)FAQs
Faster subsequent page-loads by prefetching in-viewport links during idle time
The npm package quicklink receives a total of 10,213 weekly downloads. As such, quicklink popularity was classified as popular.
We found that quicklink demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.