Preload LCP Image WordPress Plugin

Direct Google to preload your largest contentful paint image, speeding up loading times of your WordPress websites

This WordPress plugin will add the ability to preload the largest contentful paint (LCP) image on an individual page or post. This plugin designed to fix the “Preload the image used by the LCP element in order to improve your LCP time” warning that Google’s Pagespeed Insights sometimes serves for individual posts or pages.

The largest contentful paint is the largest element on any individual page and Google uses the speed it loads as a factor on how the rest of the site loads. If this element turns out to be an image, then you can preload it to improve the speed in which it loads. This plugin will automatically do that.

Plugin Features

  • Allows you to specify a URL or a source set for the image.
  • Checks to see if WebP images are present.
  • Allows you to use a different preload LCP Image URL/source set on mobile devices.

Installation

  1. Upload the plugin to the /wp-content/plugins/ directory or use the Add New feature
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. Go to any post and page and specify the LCP Image for that page.

Should you wish to use this plugin for custom post types, go to Settings > Preload LCP Image. By default it appears on posts and pages although you can set it to appear on any custom post type on this page.

Determining the LCP image to preload

To determine the largest contentful paint image to preload, add the page you are testing into Google Pagespeed Insights, and you may get a warning encouraging you to preload the largest contentful image on the page.

Determining the largest contentful paint element to preload

If this appears, copy the URL. On individual pages within WordPress, you can either add the URL of the image to the “URL of the Image” box in the “Preload LCP Image” header. Better still, click the “Find Image to Preload” button and select the image to use. Using this approach will allow the plugin to preload the source set, making it work better on mobile devices as only the most relevant image will be preloaded.

From version 1.1 onwards: On some themes, you may have a separate header for mobiles. Should you have a completely different URL, you can add it to the “URL of the Image for Mobile”. Please don’t use it if the image is the same but different dimensions, as the source set for the main image will be used.

From version 1.2 onwards: On some setups, the MIME type for the image is unable to be determined by the image. I’ve introduced the ability to force the image to be preloaded as an image. This helps fix an error of when <link rel=preload> must have a valid `as` value is present on the site.

Support

Get Notified for Future Updates

Subscribe to my newsletter and you will receive updates for whenever the plugin updates. You also receive my WordPress newsletter, which includes tips and tricks for WordPress as well as other stories and curated relevant content.

Please wait

Thank you for signing up! You should have received an email to confirm your subscription. Please click on that and you'll be all set!

You’re free to unsubscribe at any time.

On Github!

This project is on github! You can see the repository here.

Latest Posts on Preload LCP Image

Share Preload LCP Image on socials

If you use this plugin, and find it useful, please consider sharing it on your social media profiles.