Explanation of Preload LCP Image option

Preload LCP Image

The Largest Contentful Paint (LCP) is one of the three Core Web Vitals metrics, which are a set of performance metrics that measure a website’s user experience. LCP measures the time it takes for the largest image, text block, or video on a webpage to become visible to a user. A fast LCP score is crucial for a good user experience because it shows a user that the page is loading quickly and provides a good first impression. A slow LCP can lead to users leaving your site.

Why is it important to Preload the LCP Image?

Sometimes, the browser doesn’t immediately prioritize loading the LCP element, especially if it’s an image that’s not in the initial HTML code (e.g., loaded via CSS). This can delay the LCP and hurt your site’s performance score.

By preloading the LCP image, you’re telling the browser to download this specific image as a top priority. This ensures the most important image on the page loads as fast as possible, which can significantly improve your LCP score and overall page speed.

How to use this feature

First, you’ll need to go to Theme Settings → Performance → LCP and enable the Preload LCP Image option. This option allows you to automatically or manually specify the LCP Image for your pages:

Automatic Mode (Recommended): By default, the theme will try to automatically detect the largest image on each page and apply the preload attribute. This is the simplest way to improve your LCP without any manual work. To automatically detect the image, navigate to your site’s page and click the “Find LCP Image” button in the admin bar. Once the image is found, follow the instructions that will appear in the corresponding dropdown.

Manual Mode: If your image isn’t detected automatically, or if you want to change it, you can set it manually using the page metaboxes. You can find these in the page editor, at the bottom of the screen, in a section called Page Settings (custom metabox from theme) → Preload image. This section consists of the image upload option, its size, and its type.

What to do if the image was not found automatically?

Sometimes, when you use automatic detection, the LCP image might not be found. This often happens if the largest image on the page is not visible in the first seconds of the site loading. This can occur for several reasons, such as:

The image has an animation with an initial value of opacity: 0.
It’s located in an unopened tab of a tabbed section.
It’s on the second slide of a carousel.
It’s hidden in a closed off-canvas sidebar.

If this happens, try making the image visible — for example, by temporarily disabling its animation — and then run the detection again. If that doesn’t work, the most reliable method is to manually set the image using the page’s metaboxes, as described above.

Why is the “Find LCP Image” button missing on my page?

By default, you can only set the LCP image on “Pages.” The “Find LCP Image” button and the corresponding metaboxes will be absent on all other post types. The term “Pages” here doesn’t refer to all pages on your site; it specifically means the unique WordPress post type named “Pages,” which can have its own unique custom layout and content.

For post types like Single Product, Single Post, Shop and other pages with predictable layouts, you don’t need to manually set the LCP image. WordPress is designed to correctly identify the right image by default. For example: On a Single Post page, the LCP image will always be the page title background (if present) or the post thumbnail, on a Single Product page, it’s the first and main image from the product gallery. On the Shop page, it will be the page title background (if present) or the first product in the product grid, and so on.

How to set the LCP image for mobile devices?

You may need to set the LCP image separately for desktop and mobile because the largest and most important element on your page can change depending on the device. On a desktop, a large, full-width hero image might be your LCP element. However, on a mobile device, this image might be hidden or scaled down, and a different element — like a prominent heading or a smaller image — could become the largest contentful paint. By specifying a different LCP image for mobile, you ensure that the correct, most important element is prioritized for preloading on each device, which helps to optimize your website’s performance and Core Web Vitals score for all users.

In most cases, a desktop image will also work for mobile devices, but if you want to fine-tune your page, you need to narrow the browser window to the size of a mobile device using built-in browser tools like Chrome DevTools. Then, click the button to search for the LCP image. It’s important to emphasize that resizing the browser screen to a mobile device’s dimensions is a crucial step for the mobile image to be correctly identified. Alternatively, the mobile image can be identified from an actual mobile device after logging into the site, or by manually setting the image in the page’s metabox section by opening the Mobile tab.

What value to choose in the Image type option?

Using an <img> tag and a background-image in CSS are two different ways to display images on a website, each with a specific purpose and impact on performance. The key distinction lies in whether the image is considered content or decoration. For example, an image displayed on a page via the “Single Image” element will be located in the page’s content using the <img> tag, while an image set as a row’s background in the Design Options (WPB) or Style → Background (Elementor) section will be considered a decorative background-image set using CSS.

For the LCP Image option, if you’re using automatic image detection, the image type will be determined for you. However, when you manually set the image, you need to decide its type yourself based on how it appears on the page: as essential content (an <img> tag) or as a decorative background (background-image in CSS). This technical step is crucial for including images from srcsets and maximizing your website’s performance.