Preload LCP Image WordPress Plugin

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

Download Preload LCP Image

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 & Setup

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.
4. From version 1.4 onwards you can set the LCP Image to preload on any taxonomy archive 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.

From version 1.4 onwards: On the options page, you can set the taxonomies to show the LCP settings. By default it appears on categories and post tags although you can set it to appear on any custom taxonomy on this page.

From version 1.3 onwards: On the options page, you can set it so that by default it will show the featured image to preload. Tick the box on the options page entitled “Default to Featured Image”, and then on any page without a defined image to preload, it defaults to the featured image of that page or post.

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.

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

Known Issues

WP Rocket for WP Rocket there’s a couple of issues using the “default to featured image” when you are using a CDN. This is just because they filter the CDN URL for the images after the image loads, and after the functions Preload LCP Image uses to get the images run. I’d recommend manually setting for your key pages the LCP image.

Obtaining 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

Share Preload LCP Image on socials

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