Table of Contents
I’ve built a better version of Quicklink, you can read more about it here:
What is 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.
How Quicklink works?
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 the cache.
Here is a short video on Quicklink prefetching:
Install Quicklink in WordPress
Instaling Quicklink in WordPress is pretty easy. Download and install Quicklink for WordPress plugin and you’re good to go. No configurations are needed!
QuickLinks vs Instant.page
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 an efficient method.
Quicklink, on the other hand, loads all the links in the ‘viewport’ and continuously monitor viewport changes. The result is even before the user hovers 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.
Will Quicklink slow down my website?
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 to each of them within 8 hours!
Comments are closed.