How to Preload Featured Image in AMP – In 2 Easy Steps

Every time we run a Speed test of my website on Pagespeed Insights comes to many issues like Eliminate render-blocking Resources, reduce initial server Response Time, One of the issues is Preload Featured Image in AMP.

Obviously, we start looking to solve the issue. Because these issues cause slow website. And no one wants to visit a slow website that gives the worst user experience.

Google is also recommending having Fast Loading Website, as they are announced Core Web Vitals Update that all about Website Speed and User experience.

53% of mobile visitors have abandoned a page if it takes more than three seconds to load. And 88% of visitors are less likely to visit a website again after a bad user experience.

Ohhh… Isn’t many losses? Yes.

So in today’s article, we are going to learn how to fix the “Preload Featured Image in AMP” issue.

Which AMP Plugin You are Using?

1. Ampforwp

If you’re using the Ampforwp plugin, probably you are not facing this issue because this plugin has an inbuilt preload in AMP, you no need to add an extra plugin or Code. If you’re still facing issue then you can contact ampforwp plugin developers.

2. Official AMP plugin

If you are facing Preload Featured Image in AMP issue, probably you are using the Official AMP Plugin or other. To fix Preload Featured Image in AMP, follow below mentioned method.

3. Other AMP Plugin

If you are using another AMP Plugin, follow below mentioned method. Most probably below mentioned method will work, if this doesn’t work for you, then please come up with the AMP plugin name you’re using in the comment box, we will help you.

Let’s jump to our method…

How to Preload Featured Image in AMP?

1. Go to WP Admin Dashboard ➔ Appearance ➔ Theme Editor.
2. Then add the following code in functions.php :

add_action('wp_head', 'preload_image');
function preload_image(){
if (has_post_thumbnail()) {
$attachment_image = wp_get_attachment_url( get_post_thumbnail_id() );
echo '<link rel="preload" as="image" href="'.$attachment_image.'">';
} 
}

Conclusion

Check again in Pagespeed Insights, I hope Preload Featured Image in AMP issue is gone.

Is your website’s Pagespeed Insights report full of such errors? It is not much easy for you to tackle these problems. So we can do this hard work for you.

We have a professional developers’ team that will fix all types of CWV (Core Web Vitals) errors significantly for our clients for the maximum Website Speed ​​and Performance. If you want Superior Website Speed then Check Our Affordable Pricing, so we can start Optimising your website.

If you have any question, then don’t hesitate to share thoughts in the comment box. Thanks.