Add JSDelivr as a prefetch resource provider to speed up page load times in WordPress

functions.php

<?php

add_filter( 'wp_resource_hints', 'your_add_resource_hints', 10, 2 );

/**
 * Try to improve performance with resource hints.
 *
 * WP will output protocol-relative 'dns-prefetch' for all scripts and styles which are enqueued
 * from external hosts.
 * WP will not do 'preconnect', 'prefetch', or 'prerender' automatically.
 *
 * @link https://make.wordpress.org/core/2016/07/06/resource-hints-in-4-6/
 * @link https://www.keycdn.com/blog/resource-hints/
 * @link https://www.machmetrics.com/speed-blog/guide-to-browser-hints-preload-preconnect-prefetch/
 * @link https://caniuse.com/#search=preconnect
 * @link https://www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/
 * @link https://core.trac.wordpress.org/ticket/38121
 * @link https://w3c.github.io/resource-hints/#dfn-preconnect
 * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#Cross-origin_fetches
 * @link https://html.spec.whatwg.org/multipage/urls-and-fetching.html#cors-settings-attributes
 * @link https://wordpress.org/plugins/pre-party-browser-hints/
 *
 * @param $hints
 * @param $relation_type
 *
 * @return array
 */
function your_add_resource_hints( $hints, $relation_type ) {
	if ( 'preconnect' === $relation_type ) {
		$hints[] = [
			'href'        => 'https://cdn.jsdelivr.net/',
			'crossorigin' => 'anonymous',
		];
	}

	return $hints;
}

Will need to make the choice for each implementation example, but here's an example from https://getbootstrap.com/

<!-- CSS only -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity_no="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">

Ah yes. But with a preconnect link it's another story. Sorry my bad.

<link rel="preconnect" href="https://...." crossorigin>

This is another type of crossorigin attribute.

No sweat, thanks for contributing :)