Drupal 8 has dozens of useful performance optimization modules. Our Drupal developers have already reviewed the core BigPipe module and the contributed Subrequests module. Today, we are pleased to discuss a new tool to speed up Drupal sites — the Quicklink module in Drupal 8. Using the example of its work, we will see that a fast website is always a step ahead of the users’ intentions. Let’s go.
The essence of the Quicklink module in Drupal 8
The Quicklink module is meant to speed up Drupal 8 sites through the mechanism of link prefetching.
First, links in the user’s viewport are detected. These are links that the user might want to visit next. When the browser goes idle, the content from the links begins to be saved in the cache. If then the user navigates to one of these links, the content is there already.
The Quicklink module is based on GoogleChromeLabs Quicklink library. This lightweight JavaScript library weights less than 1 KB when compressed.
To detect the links, the module uses the Intersection Observer API. The requestIdleCallback method is responsible for waiting until the browser goes idle. Quicklink also discovers slow connections, for which it does no prefetching.
The module follows good Drupal performance improvement practices. More details are coming below.
How the Quicklink module in Drupal 8 works
Installing the Quicklink module
The Quicklink library will be loaded from a CDN by default, or you can choose to store it locally. The module can be installed manually or via Composer. Its creators recommend installation with Composer, for which you will also need to check the Composer.json file.
Configuring the Quicklink module
When the module is installed and enabled, its settings are available in the site admin dashboard at Configuration — Development — Quicklink Configuration.
The Quicklink module’s default settings are suitable for most websites. Let’s take a closer look at its options, which are presented in 5 tabs.
1) In the “Prefetch Ignore Settings” tab, we can choose which links to ignore (not prefetch). To follow Drupal performance practices, the module ignores these links by default:
- admin links (that have /admin, edit/, or are otherwise known to be admin links)
- AJAX-enabled links (the ones that have a use-ajax class or end in /ajax)
- links that have hashes (#)
- links that have file extensions (so we don’t prefetch PDFs, MP3s etc.)
It is also possible to add particular URL patterns to ignore.
2) In the “Optional Overrides” tab, we can:
- override the CSS selector where the module looks for hyperlinks (the default is the whole document)
- override the domains allowed for prefetching
- provide the specific paths allowed for prefetching
3) In the “When to Load Library” tab, we can control in which context the Quicklink library will load. The recommended Drupal defaults are:
- to load the library for anonymous users only
- disable prefetching during sessions (for example, in Drupal Commerce cart)
We can select the content types for which the library will not load.
4) In the “Extended Browser Support” tab, we can choose to use or not Intersection Observer polyfill from polyfill.io. This will allow the Quicklink to work with such browsers as Safari or Microsoft Edge.
5) In the “Debug” tab, we can turn debug mode on. This will save Quicklink logs for further display on the Developer Tools console. This will give us detailed information when we want to analyze the performance and see why prefetching was ignored for some links.
We can see the prefetching process on the Network tab of Chrome Developers Tools. The “Initiator” column will list the request initiator as “Quicklink.”
Performance improvement for your Drupal 8 website
Quicklink module in Drupal 8 expands developers’ arsenal of speed optimization options. Our Drupal web development firm is ready to help you use the Quicklink module, as well as examine your website from different angles and improve its speed.