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 timeGoogle
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?
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.
Comment below if you’ve any queries or feedback. I read and reply to each of them within 8 hours!