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.
fetchpriority
hint?A fetchpriority
the hint is a way to tell the browser to prioritize the loading of a specific resource, such as an image or a stylesheet. By adding a fetchpriority
hint for the primary content image in WordPress, you can improve the loading speed of your site by ensuring that the primary image is loaded first.
fetchpriority
hint to my WordPress site?To add a fetchpriority
hint to your WordPress site, you’ll need to add some PHP code to your theme. First, add the following code to the function.php
file of your theme:
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;
}
Then, add the following code to your theme’s header.php
file:
<?php $primary_image_url = wpdocs_get_primary_image_url(); if ( $primary_image_url ) { echo ‘<link rel=”fetchpriority” href=”‘ . $primary_image_url . ‘”>’; } ?>
fetchpriority
is the hint working correctly?To test and verify that the fetchpriority
the hint is working correctly; you can use a tool like Google PageSpeed Insights. Enter the URL of your site and run the test to see the loading speed of your site and any recommendations for improvement. If the fetchpriority hint is working correctly, you should see an improvement in the loading speed of your site, particularly for pages with a very large primary content image.