Drupal 8 Quicklink Module

By shane
Sat, 2019-08-31 12:31
comments
Daily Dose of Drupal Episode #227

Share with Others

The Drupal 8 Quicklink module enabled faster subsequent page loads on your Drupal site. It does this by prefetching links during idle time. This means as you browse your Drupal site, this module will be pulling down the html for any links that are in the current view port. This makes the next page load much faster.

The module adds additional features and configuration options so you can fine tune the experience to fit your Drupal 8 site.

Make sure to download the Quicklink module using composer.

composer require drupal/quicklink

Enable the module just like you enable any other module.

Head on over to the configuration page at Admin > Configuration > Development > Performance > Quicklink.

In the Prefetch Ignore Settings section, you can configure what Quicklink should not prefetch. You can specify URL patterns on this page that should be ignored.

Quicklink Settings

In the Optional Overrides section, you can configure some various override options such as the parent CSS selector for the prefetch links, the allowed domains, and prefetch paths.

Quicklink Settings

In the When to Load Library section, you can control when QuickLink will be loaded on the page. You can even specify for it not to load on specific content type pages.

Quicklink Settings

The Extended Browser Support section allows you to load the Intersection Observer polyfill which allows quicklink to work in IE11 and some older browsers.

Quicklink Settings

The last section allows you to enable debug mode. For the most part, the defaults work well so leave everything at the default.

Quicklink Settings

To test this out, you will want to make sure you have a webpage with multiple links on it. A blog listing page works well. In my example, I used the Devel Generate module to generate a bunch of Article content to fill up my homepage.

Next make sure you are logged out. I recommend using an incognito or private browsing window. Open up your developer tools and go to the Network tab. Now refresh the page, wait for everything to load and start scrolling. You will notice that the network tab shows additional activity as the links are pre-fetched.