luehrsenheinrich / wp-quicklink Goto Github PK

Should we do our own functions and hook into the settings API, or just use redux?

https://reduxframework.com/

What happened?

It's not preloading subdomains.

How can we reproduce this behavior?

Can you provide a link to a page which shows this issue?
If you go to this page and hover over the "Property" menu option, it won't preload the subdomain URL options.

Technical info

• WordPress version: 5.1.1
• quicklink version: 0.5.0

The Quicklink project has a logo:

This should be used instead of the current banner and icon found in https://github.com/luehrsenheinrich/wp-quicklink/tree/master/assets

It is difficult to hack on this plugin on an existing WordPress development environment. For example, Gutenberg, AMP, and PWA plugins all can just be cloned into wp-content/plugins of any existing WordPress install and then with npm install and npm run build they can be activated in-place.

Can that be implemented for Quicklink as well? Part of this would include making setup-local-env.sh optional.

Is this plugin no longer being developed, or is there a reason why it was removed from the directory?

Would I be better off removing the plugin and just using Google's script instead?

While reading through a lot of support requests I noticed, that 95% of them happen with preloaded links that have get requests.

Maybe we should follow what WP Super Cache does and ignore links with get parameters by default?

What do you think, @westonruter?

It's easy to confuse this Quicklink plugin repo with the actual Quicklink library repo. Renaming quicklink to wp-quicklink would help with reducing this confusion.

I want to just confirm that this is actually working as expected.

1. The options and URL array is empty on my site but maybe that's normal?
2. Watching the network tab in Chrome nothing is fetched during idle time or any activity as far as I can tell.

I'm testing this on Shifter (getshifter.io) which is a static site generator for WordPress. I'm curious how I can bring more performance to static sites and this sounds like a winner.

Here's the output I see. Maybe it's related to the URL pattern we use?

var quicklinkOptions = {"el":"","urls":[],"timeout":2000,"timeoutFn":"requestIdleCallback","priority":false,"origins":["50947aa2-a50a-11e8-b072-36d63035d715.app.getshifter.io"],"ignores":["feed\\=","\\\/feed\\\/","^https?:\\\/\\\/[^\\\/]+\\\/(#.*)?$","^https\\:\\\/\\\/50947aa2\\-a50a\\-11e8\\-b072\\-36d63035d715\\.app\\.getshifter\\.io\\:50824\\\/wp\\-admin\\\/","^https\\:\\\/\\\/50947aa2\\-a50a\\-11e8\\-b072\\-36d63035d715\\.app\\.getshifter\\.io\\:50824[^?#]+\\.php","\\\/wp\\-content"]};

This would perhaps compliment #1. It would be great if there was a PHP filter for the various Quicklink configuration: https://github.com/GoogleChromeLabs/quicklink#api

quicklink accepts an optional options object with the following parameters:

• el: DOM element to observe for in-viewport links to prefetch
• urls: Static array of URLs to prefetch (instead of observing document or a DOM element links in the viewport)
• timeout: Integer for the requestIdleCallback timeout. A time in milliseconds by which the browser must execute prefetching. Defaults to 2 seconds.
• timeoutFn: Function for specifying a timeout. Defaults to requestIdleCallback. Can also be swapped out for a custom function like networkIdleCallback (see demos)
• priority: Boolean specifying preferred priority for fetches. Defaults to false. true will attempt to use the fetch() API where supported (rather than rel=prefetch)
• origins: Static array of URL hostname strings that are allowed to be prefetched. Defaults to the same domain origin, which prevents any cross-origin requests.
• ignores: A RegExp, Function, or Array that further determines if a URL should be prefetched. These execute after origin matching.

Instead, the configuration options are currently hard-coded in the source file which is built:

https://github.com/luehrsenheinrich/quicklink/blob/c639b1da935f94b2750047be2dd6a9b52fb250a3/build/js/quicklink.js#L3-L15

So consider that quicklink_enqueue_scripts() could be changed to include the following:

<?php

$options = array(
	// CSS selector for the DOM element to observe for in-viewport links to prefetch.
	'el' => '',

	// Static array of URLs to prefetch (instead of observing `document` or a DOM element links in the viewport).
	'urls' => array(),

	// Integer for the `requestIdleCallback` timeout. A time in milliseconds by which the browser must execute prefetching. Defaults to 2 seconds.
	'timeout' => 2000,

	// Function for specifying a timeout. Defaults to `requestIdleCallback`. Can also be swapped out for a custom function like [networkIdleCallback](https://github.com/pastelsky/network-idle-callback) (see demos).
	'timeoutFn' => 'requestIdleCallback',

	// Boolean specifying preferred priority for fetches. Defaults to `false`. `true` will attempt to use the `fetch()` API where supported (rather than rel=prefetch).
	'priority' => false,

	// Static array of URL hostname strings that are allowed to be prefetched. Defaults to the same domain origin, which prevents _any_ cross-origin requests.
	'origins' => array(
		wp_parse_url( home_url(), PHP_URL_HOST ),
	),

	// Array of regex strings that further determines if a URL should be prefetched. These execute _after_ origin matching.
	'ignores' => array(
		// Do not preload feed links.
		preg_quote( 'feed=', '/' ),
		preg_quote( '/feed/', '/' ),

		// Do not preload self.
		preg_quote( wp_unslash( $_SERVER['REQUEST_URI'] ), '/' ) . '#',

		// Ignore self with hash.
		preg_quote( wp_unslash( $_SERVER['REQUEST_URI'] ), '/' ) . '#',

		// Do not preload wp-content items (like downloads).
		preg_quote( wp_parse_url( content_url(), PHP_URL_PATH ), '/' ),
	),
);

/**
 * Filters Quicklink options.
 *
 * @param array {
 *     Configuration options for quicklink.
 *
 *     @param string[] $urls      Array of URLs to prefetch (override)
 *     @param string   $el        CSS selector for the DOM element to prefetch in-viewport links for.
 *     @param bool     $priority  Attempt higher priority fetch (low or high). Default false.
 *     @param string[] $origins   Allowed origins to prefetch (empty allows all). Defaults to host for current home URL.
 *     @param string[] $ignores   Regular expression patterns to determine whether a URL is ignored. Runs after origin checks.
 *     @param int      $timeout   Timeout after which prefetching will occur.
 *     @param string   $timeoutFn Custom timeout function.
 * }
 */
$options = apply_filters( 'quicklink_options', $options );

Then, instead of using Webpack to build quicklink.mjs into quicklink.min.js it could just copy the existing dist/quicklink.js to distribute.

Lastly, quicklink_enqueue_scripts() can do wp_add_inline_script( 'quicklink', $code, 'after' ) where $code takes the above $options and adapts the exported JSON data into the JS object for passing to a call to a quicklink() call.

I can open a PR if you are keen.

When opening a pull request, the code quality checks including phpcs and eslint should be run via Travis CI. This will ensure that only code that passes the checks will be merged.

Hi team!

I'm one of the maintainers of the quicklink library. We wanted to reach out to know what the plans for the plugin would be.
First of all, we've recently noticed that the plugin is no longer available. We were wondering if there any plans to make it available again?

We've also noticed that the plugin was using an older version of library. We recently launched Quicklink 2.0 and were wondering if you would be interested to migrate to the new one?

Me and my colleague @westonruter, who has been working on the AMP Wordpress plugin and other CMS efforts so far, would be happy to help on any of these efforts.

cc // @addyosmani, @gilbertococchi, @amedina