Preload LCP Image

What is LCP? #

Largest Contentful Paint (LCP) is one of the Core Web Vitals metrics. It measures how long it takes for the largest visible element (image, text block, or video) on a page to appear.

A fast LCP provides a good first impression and improves user experience. A slow LCP can lead to higher bounce rates and lower performance scores.

---

Why Preload the LCP Image? #

Sometimes, the browser doesn’t prioritize loading the LCP element, especially if it’s loaded via CSS or delayed by animations.

By preloading the LCP image, you tell the browser to download it as a top priority. This ensures the most important element appears faster, improving your LCP score and overall page speed.

---

How to Enable Preload LCP Image #

Go to:
Theme Settings → Performance → LCP → Preload LCP Image

You can choose Automatic or Manual mode:

1. Automatic Mode (Recommended) #

• The theme detects the largest image on each page and applies the preload automatically.
• Steps:
  1. Open your page in the admin area.
  2. Click Find LCP Image in the admin bar.
  3. Follow the instructions in the dropdown to apply the detected image.

2. Manual Mode #

• Use this if the automatic detection fails or you want to set a specific image.
• Steps:
  1. Open the page editor.
  2. Scroll to Page Settings → Preload Image (custom metabox).
  3. Upload the image and set its size and type (see “Image Type” section below).

---

What to Do if the Image Isn’t Found Automatically #

Automatic detection may fail if the image:

• Has an animation with opacity: 0
• Is inside a closed tab section
• Is on the second slide of a carousel
• Is in a hidden off-canvas sidebar

Solutions:

• Temporarily disable animations or make the image visible, then try detection again.
• If detection still fails, set the image manually via the page metabox.

---

Why is the “Find LCP Image” Button Missing? #

• This feature is available only on WordPress Pages (post type: Page).
• For other post types (Single Post, Single Product, Shop), the theme automatically selects the LCP image:
  • Single Post: page title background or post thumbnail
  • Single Product: first product gallery image
  • Shop page: page title background or first product in the grid

---

Setting LCP Image for Mobile Devices #

• The largest visible element may differ on desktop vs. mobile.
• To set a mobile-specific LCP image:
  1. Resize your browser to a mobile width (Chrome DevTools recommended).
  2. Use Find LCP Image or set manually in the Mobile tab of the page metabox.
• Desktop images often work for mobile, but setting a mobile-specific image ensures the correct element is prioritized.

---

Image Type Option #

Choose how the image is displayed:

• <img> tag: for essential content images
• Background-image (CSS): for decorative elements
• Automatic mode: the theme detects and sets the type automatically.
• Manual mode: select based on how the image appears on your page to maximize performance.