Quicklink, loads your links at the speed of light ⚡

#optimization #webdev

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. 😊

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More