Last updated December 6th, 2023 00:13
The snippet in this article has a simple task. It adds the attribute fetchpriority=”high” to every featured image on your website or blog. This attribute ensures that the web browser prioritizes the featured image and tries to display it as quickly as possible. This can significantly help with measuring LCP metrics. So, if you’re looking for a guide, how to add fetchpriority=”high” to featured images using a snippet, you can find it below.
How to add fetchpriority=”high” to featured images using a snippet?
What are featured images?
Thumbnail images on WordPress websites play an important role in attracting users and increasing visual appeal. These images are used to present key elements of content and enhance the user experience.
In general, featured images can have various sizes, and their purpose is to grab the attention of visitors and highlight the content of the pages.
Thanks to featured images, users can easily identify what a post or page is about and decide if it’s of interest to them. Well-selected and attractively displayed featured images can attract more visitors and increase the chances of their interaction with the content.
WordPress offers options for setting featured images for individual posts, pages, or taxonomies. This way, you can customize the visual presentation of your content and enhance its attractiveness.
However, featured images can also affect LCP measurement and its speed. This snippet prioritizes the featured image as high-priority and helps with LCP measurement.
What is LCP metric?
LCP metric stands for Largest Contentful Paint and is used to measure the loading speed of a web page. Specifically, the LCP metric evaluates the time it takes to load the largest content element on the page, such as an image or a text block.
Your goal is to ensure that this main content is displayed to the user as quickly as possible. Consider the LCP metric important for user experience and website optimization. The faster the LCP element loads, the better experience the user will have. It also increases the likelihood that the visitor will stay on the page longer.
How to add fetchpriority=”high” to featured images using a snippet?
/*Set high fetch priority for the featured image*/
function featured_image_fixes($html) {
if ( !is_single() ) {
return $html;
}
$remove = 'decoding="async"';
$add = 'fetchpriority="high"';
$html = str_replace($remove, $add, $html);
return $html;
}
add_filter( 'post_thumbnail_html', 'featured_image_fixes' );
How can I insert a snippet into WordPress?
You can find a complete guide on how to insert snippets into WordPress here: How to Insert Custom Code into WordPress
The website is created with care for the included information. I strive to provide high-quality and useful content that helps or inspires others. If you are satisfied with my work and would like to support me, you can do so through simple options.
Subscribe to the Newsletter
Stay informed! Join our newsletter subscription and be the first to receive the latest information directly to your email inbox. Follow updates, exclusive events, and inspiring content, all delivered straight to your email.
