![]() Postscript: Quicklink is not a panacea for your slow website If you have any feedback, I’d love to hear in the comments below or the Quicklink module issue queue. Be sure that Drupal’s caching is enabled (it is by default), and bonus points for using a content delivery network. Quicklink will prefetch many more pages than your server is currently serving. That being said, test your site extensively before deploying this library to production. Note the “Initiator” column (seen below in Chrome Developer Tools) shows you that Quicklink initiated the HTTP request. When you scroll and additional links enter the viewport, you will see them being prefetched. Open up the network tab in your developer tool of choice, and you can see the HTML documents being retrieved while the browser is idle. Watching links get prefetchedĬhecking which linked pages get prefetched is pretty straightforward. Fortunately, we can use your browser’s built-in developer tools, plus the module’s debug mode to figure out exactly what’s going on. This can make figuring out why a link isn’t being prefetched pretty tricky. There’s a lot of logic involved when deciding whether or not to prefetch a link. Troubleshooting prefetches (and lack of prefetches) with debug mode An option to disable the loading of Quicklink on specified content types.If you add domains here, be sure to also include the origin domain. ![]() By default, Quicklink will only prefetch links from the origin domain. This can be used to limit the element in which Quicklink searches for links. This is useful if there are specific paths or links that shouldn’t be prefetched. A “URL patterns to ignore” field to enter custom patterns that Quicklink will ignore if found within the link’s URL.Once installed, you’ll have access to a configuration form at /admin/config/development/performance/quicklink.īesides the default options, the module provides several options: If the module detects this file, it will be used instead of the CDN version. If you install the module with Composer ( see the readme file for instructions), a local copy of the file will automatically be downloaded and installed at /libraries/quicklink/dist/. This is necessary because Quicklink’s license is incompatible with GPLv2 and can’t be hosted on. Once installed, Quicklink will do its magic without any additional configuration!īy default, the module will load the Quicklink library from a CDN. Gives an option to load the Intersection Observer polyfill, which is necessary for Quicklink to work with Safari or Microsoft Edge browsers.We don’t want the browser to waste bandwidth downloading PDFs, MP3s, etc By default, it ignores links that end with a file extension.By default, the Quicklink module ignores admin links, AJAX-enabled links, and the logout link.Option to disable loading the library if sessions are present - this is useful for Drupal Commerce sites.Only loading the library for anonymous users (by default).Integration with the Drupal behaviors system.Integrating these capabilities into Drupal, the Quicklink module enables a number of Drupal-specific tweaks including: If the browser is idle, it will also prefetch these links. It also attempts to detect your connection type, and if it detects a slow connection, it’ll skip prefetching.Īfter links are prefetched, Quicklink uses the Intersection Observer API to detect when hyperlinks enter into the browser’s viewport. Out of the box, it detects links within the viewport and downloads them when the browser is idle. Quicklink is a small (less than 1kb compressed) JavaScript library that “attempts to make navigations to subsequent pages load faster.” Building upon those capabilities, GoogleChromeLabs created a JavaScript library called Quicklink that integrates these features with prefetch and lazy-loading functionality. ![]() This recently changed with the advent of the link prefetching and Intersection Observer API capabilities in modern browsers. ![]() Until recently, there really wasn’t any good way to do the “prefetching” part with traditional server-rendered systems similar to Drupal. This makes subsequent page loads nearly instantaneous. At its core, it’s a strategy to push down and render content within your browser and then “prefetch” links on the page. PRPL stands for Push, Render, Pre-cache and Lazy-load. Recently, Google started evangelizing the PRPL pattern to combat this. According to the HTTP Archive, the median time to first contentful paint is 5.8 seconds - this means that the average person waits almost 6 seconds just to view an average website on their phone.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |