Rangerz_Quicklink

A Magento 2 module integrates GoogleChromeLabs/quicklink, ⚡️Faster subsequent page-loads by prefetching in-viewport links during idle time.

How it works

Quicklink attempts to make navigations to subsequent pages load faster. It:

• Detects links within the viewport (using Intersection Observer)
• Waits until the browser is idle (using requestIdleCallback)
• Checks if the user isn't on a slow connection (using navigator.connection.effectiveType) or has data-saver enabled (using navigator.connection.saveData)
• Prefetches (using <link rel=prefetch> or XHR) or prerenders (using Speculation Rules API) URLs to the links. Provides some control over the request priority (can switch to fetch() if supported).

Installation

composer require rangerz/magento2-module-quicklink
bin/magento module:enable Rangerz_Quicklink
bin/magento setup:upgrade

Usage

After installation, it will be enabled by default. You can find the configuration into Stores > Configuration > Rangerz Extensions > Google Quicklink.

Google Quicklink

• Enable Google Quicklink

• Enable in Backend

• Enable in Developer Mode

Quicklink Listen Options

• Prerender Mode

  • Default: No (Boolean)

  Whether to switch from the default prefetching mode to the prerendering mode for the links inside the viewport.Prerender and Prefetch

  Note: The prerendering mode (when this option is set to true) will fallback to the prefetching mode if the browser does not support prerender.

• Prerender and Prefetch

  • Default: No (Boolean)

  Whether to activate both the prefetching and prerendering mode at the same time.

• Delay (MS)

  • Default: 0 (Number)

  The amount of time each link needs to stay inside the viewport before being prefetched, in milliseconds.

• Element

  • Default: document.body (HTMLElement|NodeList)

  The DOM element to observe for in-viewport links to prefetch or the NodeList of Anchor Elements.

• Request Limit

  • Default: Infinity (Number)

  The total requests that can be prefetched or prerendered while observing the Element container.

• Threshold

  • Default: 0 (Number)

  The area percentage of each link that must have entered the viewport to be fetched, in its decimal form (e.g. 0.25 = 25%).

• Concurrency Limit

  • Default: Infinity (Number)

  The* concurrency limit *for simultaneous requests while observing the Element container.

• Timeout (MS)

  • Default: 2000 (Number)

  The requestIdleCallback timeout, in milliseconds.

  Note: The browser must be idle for the configured duration before prefetching.

• Priority

  • Default: No (Boolean)

  Whether or not the URLs within the Element container should be treated as high priority.

  When Yes, quicklink will attempt to use the fetch() API if supported (rather than link[rel=prefetch]).

• Origins

  • Default: [location.hostname] (Array)

  A static array of URL hostnames that are allowed to be prefetched.

  Defaults to the same domain origin, which prevents any cross-origin requests.

  Important: An empty array ([]) allows all origins to be prefetched.

• Ignore List

  • Default: [] (RegExp or Function or Array)

  Determine if a URL should be prefetched.

  When a RegExp tests positive, a Function returns true, or an Array contains the string, then the URL is not prefetched.

  Note: An Array may contain String, RegExp, or Function values.

  Important: This logic is executed after origin matching!

Option not supported for setting

• timeoutFn

• onError

• hrefFn

Credits

Inspired by rafaelstz/magento2-quicklink

License

MIT