DEV Community 👩‍💻👨‍💻

Cover image for Quicklink, loads your links at the speed of light ⚡
Jesús Mejías Leiva
Jesús Mejías Leiva

Posted on

Quicklink, loads your links at the speed of light ⚡

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>

Enter fullscreen mode Exit fullscreen mode

It is recommended to add it once the DOM load is finished:

<script>
window.addEventListener('load', () =>{
  quicklink.listen();
});
</script>
Enter fullscreen mode Exit fullscreen mode

ES Module import:

import { listen, prefetch } from "quicklink";

Enter fullscreen mode Exit fullscreen mode

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

It also has a package for the Angular framework ngx-quicklink

Thanks for reading me. 😊

Top comments (6)

Collapse
 
ajeet profile image
Ajeet Yadav

I did not know Quicklink has a website
getquick.link/

Thanks

Collapse
 
susomejias profile image
Jesús Mejías Leiva Author

Ohh good, thanks for you comment!! 👌😜

Collapse
 
ajeet profile image
Ajeet Yadav

Just noticed, you have built a really beautiful website:

susomejias.es/inicio

Congrats :)

Collapse
 
susomejias profile image
Jesús Mejías Leiva Author

thanks!! 🙈

Collapse
 
techgirl1908 profile image
Angie Jones

Is this just for static sites?

Collapse
 
susomejias profile image
Jesús Mejías Leiva Author • Edited on

No, check the documentation. ☺️

🌚 Life is too short to browse without dark mode