Understanding and Using Resource Hinting in WordPress46

Most of the changes to WordPress46 were fairly easy to grasp. Among them were Shiny Updates, a more fluid update process with better UI, System fonts, which means not having to load a Google font in the WordPress admin, and the WP_Term Query class. Then there is resource hinting…

For a more thorough explanation of resource hinting, I would encourage anyone to read the W3C spec but for anyone who simply curious I will do my best to outline it as briefly as possible. Basically an html <link>element has a rel attribute that can have one of four values. Here is a quick explanation of each of them :

dns-prefetch

The value of the href attribute is the origin of the link. In simplest terms that means the browser will try to resolve the dns before the link is followed. <link rel="dns-prefetch" href="//example.com">. Note that the links are protocol relative to allow for either http or https. As a side note there are some performance concerns when using dns-prefetch not with page load but rather with bandwidth and CPU usage.

preconnect

Allows for sites to anticipate the sockets required for an eventual connection. It resolves the DNS and performs what is known as a TCP handshake. Ilya Grigorik’s article has a much more thorough explanation. <link rel="preconnect" href="//example.com">

prefetch

The resource loaded in the background (after the browser has finished loading everything). It is then stored in the browser’s cache for later usage.

prerender

A close cousin to prefetch, prerender actually renders (as opposed to loads) the entre page in the background. Needless to say, you don’t want to overuse this one as it is very resource-heavy, especially on mobile.

Now for the WordPress part…

Modifying resource hinting in WordPress

First of all as of WordPress46 all enqueued scripts and styles will have a rel="dns-prefetch" (See changeset: 37920). You don’t have to do anything to reap some performance benefits here. So when you look at the scripts at the head in the document head. you will see something like this:

This works well for most styles and scripts but what if we want to use another link relationship? Well luckily there is a handy filter for us to change. For instance we could do something like this.

function change_to_preconnect_resource_hints( $hints, $relation_type ) {

if ( 'preconnect' === $relation_type ) {
    $hints[] = '//use.typekit.net';
    $hints[] = '//maps.googleapis.com';
}

if ( 'dns-prefetch' === $relation_type ) {
    $url_arr = array( 'maps.googleapis.com', 'use.typekit.net' );

    foreach ( $url_arr as $url ) {
        if ( ( $key = array_search( $url, $hints ) ) !== false ) {
            unset( $hints[ $key ] );
        }
    }
}

return $hints;
}

add_filter( 'wp_resource_hints', 'change_to_preconnect_resource_hints', 10, 2 );
```

This will give us something like this:

![after](http://www.kirstencassidy.com/wp-content/uploads/2016/09/after.jpg)

Now, in truth I don't know if this is the correct resource hint for google maps. So if anyone knows of a better one I would be happy to update the code here. The metrics do seem slightly better for typekit though based on my test case. Please feel free to comment on any tips or experience with resource hinting.