Speed Up Your WordPress Site by Adding a fetchpriority Hint for the Primary Content Image

As a WordPress user, you probably know that page loading speed is an essential factor in the overall user experience of your site. A slow-loading site can lead to frustrated visitors and a higher bounce rate.

One way to improve the loading speed of your WordPress site is by adding a fetchpriority hint for the primary content image. This tells the browser to prioritize the loading of the primary content image, which can help speed up the page’s overall rendering.

In this post, we’ll show you how to add a fetchpriority hint for the primary content image in WordPress.

Step 1: Add the PHP code

First, you’ll need to add the following PHP code to your WordPress site:

add_filter( 'wp_resource_hints', 'wpdocs_filter_primary_image_resource_hints', 10, 2 );
function wpdocs_filter_primary_image_resource_hints( $urls, $relation_type ) {
    if ( 'dns-prefetch' === $relation_type ) {
        $primary_image_url = wpdocs_get_primary_image_url();
        if ( $primary_image_url ) {
            $urls[] = $primary_image_url;
        }
    }
    return $urls;
}
function wpdocs_get_primary_image_url() {
    global $post;
    $primary_image_url = '';
    if ( has_post_thumbnail( $post->ID ) ) {
        $thumb_id = get_post_thumbnail_id( $post->ID );
        $thumb_url_array = wp_get_attachment_image_src( $thumb_id, 'full', true );
        $primary_image_url = $thumb_url_array[0];
    } elseif ( preg_match_all( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches ) ) {
        $primary_image_url = $matches[1][0];
    }
    return $primary_image_url;
}

This code first defines a wp_resource_hints filter that adds the primary image URL to the array of dns-prefetch URLs. The primary image URL is then retrieved using the wpdocs_get_primary_image_url Function, which first checks if the post has a thumbnail image and, if so, uses that as the primary image. If the command does not have a thumbnail image, the function searches the post content for the first image and uses that as the primary image.

Step 2: Add the hint to your page header

Next, you’ll need to add the fetchpriority advice to the title of your page. To do this, you can use the wp_head action hook in your theme’s header.php file. Add the following code to the header.php file:

<?php
$primary_image_url = wpdocs_get_primary_image_url();
if ( $primary_image_url ) {
    echo '<link rel="fetchpriority" href="' . $primary_image_url . '">';
}
?>

This code calls the wpdocs_get_primary_image_url function to get the URL of the primary image and then adds a fetchpriority hint for that URL using the link tag.

Step 3: Test and verify

After adding the PHP code and the fetchpriority Hint to your theme; you’ll want to test and verify that everything is working correctly. One way to do this is to use a tool like Google PageSpeed Insights to test the loading speed of your site.

If everything is working as expected, you should see an improvement in the loading speed of your site, particularly for pages with a large primary content image.

Benefits of adding a fetch priority hint for the primary content image

There are several benefits to adding an advice for the primary content image in WordPress:

• Improved loading speed: By telling the browser to prioritize the loading of the primary content image, you can speed up the overall rendering of the page and enhance the user experience.
• Better search engine rankings: Page loading speed is a ranking factor for search engines like Google, so a faster-loading site is more likely to rank higher in search results.
• Increased traffic: A faster-loading site is more likely to retain visitors and attract new ones, which can lead to increased traffic and potentially more revenue.

In summary, adding a fetchpriority hint for the primary content image in WordPress is a simple but effective way to improve the loading speed of your site and provide a better user experience for your visitors.

I hope this post has helped you understand the process and benefits of adding a fetchpriority hint for the primary content image in WordPress. If you have any questions or comments, feel free to leave them in the comments section below.