The preload attribute is essential for improving the loading speed of a site.
Considering the Core Web Vitals, its use has a positive impact on the LCP (largest content paintful) indicator. It is not recommended to make an abusive use of this attribute, however, it is recommended especially for the preloading of large images that will be displayed in the viewport at the beginning of each page.
But what images are always displayed at the top of a page? Well, generally one of the images that meets this is the featured image. The code below can be included in the functions.php of your site.
/* Preload (preload) the featured image in each post */
add_action('wp_head', 'preload_post_attachment_image');
function preload_post_attachment_image(){
if (has_post_thumbnail()) {
$attachment_image = wp_get_attachment_url( get_post_thumbnail_id() );
echo '';
}
}Another way we recommend for images that will only load on one page is to add custom code to your site and load it inside the head tag.
link rel="preload" as="image" href="https://cdn.example.com/wp-content/uploads/example-img.jpg"The previous example was used on a website designed with elementor, which gives you the possibility that the custom code is displayed only for the page or pages that interest you.
