You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+34-4Lines changed: 34 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -35,7 +35,7 @@ You can also grab `quicklink` from [unpkg.com/quicklink](https://unpkg.com/quick
35
35
36
36
## Usage
37
37
38
-
Once initialized, `quicklink` will automatically prefetch URLs for links that are in-viewport during idle time.
38
+
Once initialized, `quicklink` will automatically prefetch URLs for links that are in-viewport during idle time.
39
39
40
40
Quickstart:
41
41
@@ -80,6 +80,8 @@ The above options are best for multi-page sites. Single-page apps have a few opt
80
80
*`timeout`: Integer for the `requestIdleCallback` timeout. A time in milliseconds by which the browser must execute prefetching. Defaults to 2 seconds.
81
81
*`timeoutFn`: Function for specifying a timeout. Defaults to `requestIdleCallback`. Can also be swapped out for a custom function like [networkIdleCallback](https://github.com/pastelsky/network-idle-callback) (see demos)
82
82
*`priority`: Boolean specifying preferred priority for fetches. Defaults to `false`. `true` will attempt to use the `fetch()` API where supported (rather than rel=prefetch)
83
+
*`sameOrigin`: Restricts prefetching to URLs of the same origin. Defaults to `false`. Any truthy value will ensure no cross-domain requests are sent & will override/ignore any `options.origins` value.
84
+
*`origins`: Static array of URL hostname strings that are allowed to be prefetched. Defaults to an empty array, which _allows all_ URLs to be prefetched.
83
85
84
86
TODO:
85
87
* Explore detecting file-extension of resources and using [rel=preload](https://w3c.github.io/preload/) for high priority fetches
@@ -139,6 +141,34 @@ Defaults to low-priority (`rel=prefetch` or XHR). For high-priority (`priority:
139
141
quicklink({ priority:true });
140
142
```
141
143
144
+
**Allow same-origin requests only**
145
+
146
+
Forcibly disables all cross-domain requests. All domains are allowed by default.
147
+
148
+
```js
149
+
quicklink({ sameOrigin:true });
150
+
```
151
+
152
+
**Specify a custom list of allowed origins**
153
+
154
+
Provide a list of hostnames that should be prefetch-able. All domains are allowed by default.
155
+
156
+
> **Important:** You must also include your own hostname!
157
+
158
+
```js
159
+
quicklink({
160
+
origins: [
161
+
// add mine
162
+
'my-website.com',
163
+
'api.my-website.com',
164
+
// add third-parties
165
+
'other-website.com',
166
+
'example.com',
167
+
// ...
168
+
]
169
+
});
170
+
```
171
+
142
172
## Browser support
143
173
144
174
The prefetching provided by `quicklink` can be viewed as a [progressive enhancement](https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/). Cross-browser support is as follows:
@@ -149,7 +179,7 @@ The prefetching provided by `quicklink` can be viewed as a [progressive enhancem
149
179
Certain features have layered support:
150
180
151
181
* The [Network Information API](https://wicg.github.io/netinfo/), which is used to check if the user has a slow effective connection type (via `navigator.connection.effectiveType`) is only available in [Chrome 61+ and Opera 57+](https://caniuse.com/#feat=netinfo)
152
-
* If opting for `{priority: true}` and the [Fetch API](https://fetch.spec.whatwg.org/) isn't available, XHR will be used instead.
182
+
* If opting for `{priority: true}` and the [Fetch API](https://fetch.spec.whatwg.org/) isn't available, XHR will be used instead.
153
183
154
184
## Using the prefetcher directly
155
185
@@ -170,14 +200,14 @@ Promise.all(promises);
170
200
Here's a [WebPageTest run](https://www.webpagetest.org/video/view.php?id=181212_4c294265117680f2636676721cc886613fe2eede&data=1) for our [demo](https://keyword-2-ecd7b.firebaseapp.com/) improving page-load performance by up to 4 seconds via quicklink's prefetching. A [video](https://youtu.be/rQ75YEbJicw) comparison of the before/after prefetching is on YouTube.
171
201
172
202
For demo purposes, we deployed a version of the [Google Blog](https://blog.google) on
173
-
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
203
+
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
174
204
automatically prefetched. The prefetched version loaded faster.
175
205
176
206
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.
177
207
178
208
## Related projects
179
209
180
-
* Using [Gatsby](https://gatsbyjs.org)? You already get most of this for free baked in. It uses `Intersection Observer` to prefetch all of the links that are in view and provided heavy inspiration for this project.
210
+
* Using [Gatsby](https://gatsbyjs.org)? You already get most of this for free baked in. It uses `Intersection Observer` to prefetch all of the links that are in view and provided heavy inspiration for this project.
181
211
* Want a more data-driven approach? See [Guess.js](https://guess-js.github.io). It uses analytics and machine-learning to prefetch resources based on how users navigate your site. It also has plugins for [Webpack](https://www.npmjs.com/package/guess-webpack) and [Gatsby](https://www.gatsbyjs.org/docs/optimize-prefetching-with-guessjs/).
0 commit comments