LCP Optimization for WoodMart Slider Background Image

Hello WoodMart Support,

we have already reviewed your performance optimization guide, but our question is specifically about the WoodMart slider LCP behavior.

On our homepage, Google PageSpeed identifies the LCP element as:

div.wd-carousel > div.swiper-wrapper > div#slide-1086 > div.wd-slide-bg

The LCP image is loaded as a CSS background image inside the WoodMart slider. Because of that, fetchpriority="high" cannot be applied like with a normal <img> tag.

We have enabled “Preload LCP Image” in WoodMart Performance settings, but PageSpeed still shows the warning that fetchpriority="high" should be used.

Could you please answer specifically:

1. Does the “Preload LCP Image” option work for WoodMart slider background images?
2. If yes, where exactly should we select/set the slider LCP image?
3. If no, what is the recommended WoodMart method to preload the first slider background image?
4. Do you recommend replacing the mobile slider with a static image/banner for better LCP?

We are not asking for general performance advice, but specifically for the correct WoodMart implementation for slider background LCP images.

Thank you.
Elias
Best regards

Hi Elias,

Thanks for the clear details.

Right now I don’t see a preload link for the first slide’s background image on your page. This usually means the LCP image hasn’t been assigned for that page yet, even if the global option is enabled.

For best LCP, we recommend using a real image instead of a CSS background for the first hero/slide as shown on the screenshot https://monosnap.ai/file/whm2ENNIOOCY4SOrmZ0ImoX2CNWZjX

Kind Regards

Hello,

thank you for your reply.

We selected the image exactly as shown in your screenshot:
https://monosnap.ai/file/S0x4Df4yzzXbivEny2YfNMurhlw6DZ
Slide Settings → Image → Image
Resolution: Full size
Object-fit: Cover
Object position: Center Center

However, the image is not displayed in the slider/frontend. It only works when we set it as Background, but then PageSpeed detects it as div.wd-slide-bg.

Could you please tell us what setting is missing so that the Image field is displayed correctly?

Best regards
Elias

It seems this was some kind of cache issue or temporary glitch. After reloading/clearing cache, the image loaded correctly and is now displayed.

Thank you for your help.

Best regards
Elias

Great, we are glad that you sorted it out. Feel free to contact us if you have any further questions.

[Author]

Posts