Boost your Website Speed with 2 Lines of Code

#react #vue #angular #javascript

Consider you're reading a blog post. While reaching the bottom you can see related posts. What if your browser will preload those pages even before you click?

Super fast inner pages, right?

Introducing Quicklink

QuickLink is a tiny JavaScript code that will detect links within the viewport and prefetches URLs to the links.

Installation

npm install --save quicklink

import quicklink from "quicklink/dist/quicklink.mjs";
quicklink();

Full api docs

But it will load unnecessary data, will it slow down my user?

Quicklink waits until the browser is idle, checks if the user isn't on a slow connection or has data-saver enabled.

Result? Those URLs will load instantly!

Will it slows down my website?

It's only < 1KB minified/gzipped

Did it help?

Follow me on Twitter, I share a lot of cool stuff there

Top comments (9)

Itachi Uchiha • Jan 27 '19

Thanks. You can also use like this;

quicklink({
   urls: ['2.html','3.html', '4.js']
});

also, you can use ignore option

// Same-origin restraint is enabled by default.
//
// This example will ignore all requests to:
//  - all "/api/*" pathnames
//  - all ".zip" extensions
//  - all <a> tags with "noprefetch" attribute
//
quicklink({
  ignores: [
    /\/api\/?/,
    uri => uri.includes('.zip'),
    (uri, elem) => elem.hasAttribute('noprefetch')
  ]
});