https://github.com/deco-cx/prefetch
A Fresh plugin for prefetching pages
https://github.com/deco-cx/prefetch
Last synced: 18 days ago
JSON representation
A Fresh plugin for prefetching pages
- Host: GitHub
- URL: https://github.com/deco-cx/prefetch
- Owner: deco-cx
- Created: 2022-11-09T20:04:57.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-24T17:20:30.000Z (about 2 years ago)
- Last Synced: 2025-04-02T20:50:53.973Z (24 days ago)
- Language: TypeScript
- Size: 11.7 KB
- Stars: 21
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Prefetch for Fresh
Fresh plugin for prefetching pages powered by Google's
[quicklink](https://github.com/GoogleChromeLabs/quicklink).
According to
[Google's web development guidelines](https://web.dev/link-prefetch/),
prefetching leads to faster load times, resulting in higher conversion rates and
better user experiences. Prefetching can be implemented
[using the link](https://web.dev/codelab-two-ways-to-prefetch/) tag.
## Usage
To use this plugin, just add to your fresh config:
```ts
import prefetchPlugin, { Options } from 'https://deno.land/x/prefetch'
const options: Options = {
throttle: 4 // 4 concurrent requests
// ...
}
await start(manifest, {
...
plugins: [
prefetchPlugin(options),
],
});
```
Start your fresh server, access your page. All anchor tags containing a relative
`href` attribute should be prefetched. To make sure it's working, open the
Chrome DevTools `Network` tab and make sure the pages are being prefeetched.
All serializable options accepted by quicklink are also accepted by this plugin.
### Strategies
To allow better control over which links are prefetched, this plugin adds an
option called `strategy`. When set, two different strategies for prefetching are
allowed `opt-in`, `opt-out`.
`opt-in` means only links containing the data-prefetch attribute will be
prefetched. For instance, if you have two links:
only `/foo` will be prefetched once it enters the viewport
`opt-out` does exactly the opposite from the previous strategy. It prefetches
all links but those containing `data-noprefetch`. For instance
will prefetch `/bar`.
Not setting `options.strategy` will make this plugin fallback to the usual
quicklink's behavior, i.e. viewport based prefetching