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.

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.

Support

  • For urgent (paid for) support, please contact me directly.
  • For not so urgent support, please use the WordPress.org forums.

On Github!

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

Latest Posts on Preload LCP Image