“The probability of bounce increases 32% as page load time goes from 1 second to 3 seconds.” - Google
One of the capabilities of modern browsers is Link Prefetching. Link prefetching allows the browser to prefetch documents that the user might visit. And all this is done when the browser is idle.
Quicklink module provides a Drupal implementation of a lightweight javascript library called Quicklink. Quicklink library is developed by GoogleChromeLabs on the link prefetching capability of browsers which allows faster subsequent page loads.
How Quicklink library work?
Now let's see how the Quicklink library works through the Quicklink module in Drupal.
- Detect links in the viewport: Once the page loads Quicklink library detects links in the viewport with Intersection Observer
- Then it waits for the browser to be ideal using requestIdleCallback. This helps to make sure that other requests are not impacted.
- The last check is to make sure the user is not on a slow or data-saver connection.
- Now Quicklink library prefetches the links within the viewport using <link rel=prefetch>. And once you start scrolling it will start to fetch other links in the viewport.
- Now if the user clicks any of the prefetched pages he/she will experience a fast page load with some drawbacks which we will talk about later.
How to Install and configure the Quicklink module
Once the Qucklink module is downloaded and enabled, it will start working out of the box for the anonymous users with default settings.
Quicklink configuration settings can be found on “/admin/config/development/performance/quicklink”.
Quicklink module configuration is divided into the following sections:
- Prefetch Ignore Settings
- Optimal Overrides
- When to Load Library
- Throttle Options
- Prefetch Paths Only
- Extended Browser Support
- Debug
Let's go through them one by one…
1. Prefetch Ignore Settings
Prefetch Ignore Settings provides options to specify pages that which Quicklink library should not prefetch.
Do not prefetch admin paths: Check this option to make sure the admin page is not prefetched. The default value is checked.
Do not prefetch AJAX links: Check this option to ignore links that trigger ajax behavior.
Ignore paths with hashes (#) in them: Checking this on will help in preventing multiple prefetching of the same page.
Ignore paths with file extensions: This option allows to ignore the prefetching path to files.
URL patterns to ignore (optional): Add URL patterns if you don’t want quicklink to prefetch them.
Ignore these selectors (optional): You can also add selectors like “.footer” or “a” and any URL inside it will be ignored by quicklink.
2. Optimal Overrides
Optional overrides configuration provides options to override the previous ignore settings and intentional prefetch URLs.
Override parent selector (optional): By default Quicklink search for the whole document to prefetch but here you can set the CSS selector for URLs to prefetch.
Override allowed domains (optional): Configure the list of domains from which Quicklink will fetch links.
3. When to Load Library
Under this configuration, you can set when to load the Quicklink library.
You can set the library to load only for anonymous users, not during sessions, or not for the specific content type.
4. Throttle Options
Here you can set how Quicklink loads content. You can set the request number limit, concurrent request limit, the time required for a link to be in the viewport, and the amount of time the browser should be ideal.
5. Prefetch Paths Only
Here you can add paths to prefetch and this will override everything else in the previous settings.
6. Extended Browser Support
This option enables support for IE11 and older versions with polyfill.
7. Debug
Debugging can be enabled to see Quicklink development information HTML and JavaScript console.
Warning
Quicklink might seem like a great solution but it is not for everyone. Quicklink makes your website load faster but it does this by prefetching links which users might never open. And these unwanted page loads can have negative effects on servers with the unnecessary load.
You can find a really good example of why you should not use the quicklink module https://menetray.com/en/blog/improving-performance-drupal-quicklink-20
Conclusion
Quicklink module might not be great for every website because of the negative effect on the server but it can do wonders if configured properly and used to load specific targetted links.
You need to make sure that you have a balance between a faster user experience with a quick page load for important pages and no negative server load because of prefetching links.