Resource Hints is a rather new W3C specification that “defines the dns-prefetch
, preconnect
, prefetch
, and prerender
relationships of the HTML Link Element (<link>
)”. These can be used to assist the browser in the decision process of which origins it should connect to, and which resources it should fetch and preprocess to improve page performance.
Introduced with [37920], WordPress now has a simple API to register and use resource hints. The relevant ticket is #34292
By default, wp_resource_hints()
prints hints for s.w.org
(the WordPress.org CDN) and for all scripts and styles which are enqueued from external hosts.
Developers can use the wp_resource_hints
filter to add custom domains and URLs for dns-prefetch
, preconnect
, prefetch
or prerender
. One needs to be careful to not add too many resource hints as they could quite easily negatively impact performance, especially on mobile, but the filter works like this:
function makewp_example_resource_hints( $hints, $relation_type ) {
if ( 'dns-prefetch' === $relation_type ) {
$hints[] = '//make.wordpress.org';
} else if ( 'prerender' === $relation_type ) {
$hints[] = 'https://make.wordpress.org/great-again';
}
return $hints;
}
add_filter( 'wp_resource_hints', 'makewp_example_resource_hints', 10, 2 );
#4-6, #dev-notes, #script-loader