This library analyzes all the links on your website that appear in the browser's viewport and therefore can be clicked by the user, once analyzed, it makes a preload of the content to which these links point, so that when the user clicks on any of them the content will load almost instantly, thus giving the user a feeling of immediate loading.
How it works
Quicklink attempts to make navigations to subsequent pages load faster. It:
- Detects links within the viewport (using Intersection Observer)
- 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 or XHR). Provides some control over the request priority (can switch to fetch() if supported).
Weight
Around (<1 KB minified / gzipped)
Usage
We add Quicklink to our project:
<!-- Include quicklink from dist -->
<script src="dist/quicklink.umd.js"></script>
<!-- Initialize (you can do this whenever you want) -->
<script>
quicklink.listen();
</script>
It is recommended to add it once the DOM load is finished:
<script>
window.addEventListener('load', () =>{
quicklink.listen();
});
</script>
ES Module import:
import { listen, prefetch } from "quicklink";
```
The above options are best for multi-page sites. Single-page apps have a few options available for using quicklink with a router:
- Call quicklink.listen() once a navigation to a new route has completed.
- Call quicklink.listen() against a specific DOM element / component.
- Call quicklink.prefetch() with a custom set of URLs to prefetch.
Once configured Quicklink will perform the operation automatically.
## Documentation
For more information consult the official documentation [Quicklink](
https://github.com/GoogleChromeLabs/quicklink)
It also has a package for the Angular framework [ngx-quicklink](https://github.com/mgechev/ngx-quicklink)
Thanks for reading me. 😊
Top comments (6)
I did not know Quicklink has a website
getquick.link/
Thanks
Ohh good, thanks for you comment!! 👌😜
Just noticed, you have built a really beautiful website:
susomejias.es/inicio
Congrats :)
thanks!! 🙈
Is this just for static sites?
No, check the documentation. ☺️