Utilizing DNS Prefetching in WordPress

To ensure that elements calling external resources are put first, consider using negative numbers as priority. One solution is to utilize the resource hints API in WordPress 4.6.0, which automatically adds all unique enqueued domains. However, if you are using a version older than 4.6.0, you can only use the following answer. To prioritize your hook, you can increase its priority. This will ensure that it outputs before any other function attached to ‘i.e. other’s, most stylesheets, plugin scripts, etc.

Question:

I’m uncertain if my inquiry sounds encouraging, but it is pertinent. Therefore, I request that you kindly read the complete question before marking it negatively or raising a flag.

As I work on implementing DNS Pre-fetching on my WordPress MU, I plan to take a site by site approach. While using a child theme on my primary site, I intend to achieve my goal by placing the relevant code within the designated section,

function.php

.

function dns_prefetch() {
    echo '';
    echo ''
}
add_action('wp_head', 'dns_prefetch');

The code is inserted into the

<head>

section of the HTML generated by WordPress when the

wp_head()

is called in the theme, whether it’s the parent or child theme.

According to Google’s recommended coding practice, it is advisable to place the DNS Prefetching code at the highest possible position for optimal results. Google suggests utilizing it in this manner.







I am unsure about how to proceed as all themes first place their code in

header.php

before invoking

wp-head

.

Is it possible to insert the DNS prefetching code directly after the

<head>

tag? I would greatly appreciate any assistance with this.


Solution 1:

The resource hints API in WordPress 4.6.0 automatically includes all unique enqueued domains, but if you have a version prior to that, you can override it using

wp_resource_hints

. This solution should only be used if you are unable to upgrade to version 4.6.0 or higher.


The only option available is to increase the priority of your hook.

add_action( 'wp_head', 'dns_prefetch', 0 /* Highest priority */ );

Does this place my code immediately following the opening tag?

The function linked to

wp_head

will be prioritized over other functions such as

<link />

, stylesheets, and plugin scripts, resulting in its output being displayed first.

Editing your theme’s

header.php

directly is likely necessary to place it immediately after

<head>

.

Is there truly no alternative solution?

With the use of output buffering, it can be hacked.

function wpse_177395_start_buffering( $template ) {
    ob_start();
    return $template;
}
add_filter( 'template_include', 'wpse_177395_start_buffering' );
function wpse_177395_flush() {
    $content = ob_get_clean();
    $content = preg_replace( '/]*>/', '$0
    
    ',
        $content
    );
    echo $content;
}
add_action( 'wp_head', 'wpse_177395_flush', 0 );


Solution 2:


Tiny bits of knowledge that could come in handy for basic configurations, particularly those that do not involve plugins utilizing ob_start.

To optimize your website’s performance, it’s important to prioritize dns-prefetch calls. Rather than placing them at the very beginning of the page, aim to include them as early as possible to ensure they are executed before any other element that calls external resources.

It is feasible to assign negative values as priority on the

add_action

platform.

Hence, utilizing

add_action( 'wp_head', 'dns_prefetch', -1 );

is highly likely to be effective on uncomplicated configurations.

We have been practicing this technique on our jobs at https://clinicawp.2aces.com.br and we are optimistic that it will be beneficial for you.


Solution 3:


Is it possible for child themes to have their own header.php file? If so, instead of adding the code to the parent theme’s header.php file, we can just drop a child header.php file into the child theme’s folder and add the code there.

As far as I can tell, this appears to be the easiest answer, unless there is something I am overlooking.

Frequently Asked Questions