quicklink

From the official Quicklink project:

Faster subsequent page-loads by prefetching in-viewport links during idle time

Google

Quicklink is a small JavaScript code (<1KB) that will pre-load links in the viewport. So when the user clicks on that link, it will be displayed immediately. Result? Superfast inner pages navigation!

Before diving into Quicklink, we need to understand what is prefetching and viewport

What is Prefetching?

By adding a small code snippet in the <head> of HTML, you can tell the browser to download a resource even if it’s now required right now. So whenever browser actually needs the resource it’s available without any network requests. The code looks like this:

<link rel="prefetch" href="(URL)">

What is Viewport?

The viewport is the portion of the website that the user is currently viewing

Quicklink detects all the links the viewport of browser and injects those links with prefetch API to the <head>. When the browser detects a new URL in prefetch, it will download those URLs and save it in cache

Here is a short video on Quicklink prefetching:

Instaling Quicklink in WordPress is pretty easy. Download and install Quicklink for WordPress plugin and you’re good to go. No configurations are needed!

Instant.page is a similar plugin to Quicklink. But instead of prefetches links in the viewport, it prefetches when the user hovers over a link

An average mouse hovers to click time would be more than 300ms. Most of the pages (without edge caching) will take more than 400ms to load from the server including network latency. So it isn’t the efficient method

Quicklink, on the other hand, loads all the links in the ‘viewport’ and continuously monitor viewport changes. The result is even before user hover a link, it will be cached

 Also found that Instant.page may cause multiple requests to the same URL:

1) If you hover on a link, Instant.page starts fetching the URL. But if the user clicks on the link before getting a response, the browser will send another request

2) Every time you hover on a link Instant.page fetches it even if its already in the cache. This is something Quicklink won’t do. If it’s cached, it will never fetch it again

Quicklink only injects and prefetch data when the browser is idle and if the user is on a fast connection. Also the JavaScript code in less than 1KB. So adding Quicklink to your site will not slow it down

A note on Shared Hosting

Based on the number of links in viewports, Quicklinks send more requests than usual. Some shared hosting providers might not be able to handle it. Try it yourself

I’m not seeing in any improvements in PageSpeed Insights/ Pingdom/ Gtmetrix

The aim of Quicklink is to improve inner pages navigation. It won’t have any effect on improving the speed of the initial page. You’ll feel the difference when clicking through the links

Conclusion

Using a tiny JavaScript code, Quicklink we could load the inner posts/pages almost instantly. Without touching any server configs or complex cache plugins, Quicklink is a great way to boost speed in your WordPress site

Comment below if you’ve any queries or feedback. I read and reply back to each of them within 12 hours!

You May Also Like