Several problems: consistent, Background CSS images and more

@123nadav This has been an extremely busy week. I’m sure you saw that WordPress 6.9 was released. My time has been limited.

In taking a quick look at https://locksmithunit.com/ I do see there is a preload links being added:

<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://locksmithunit.com/wp-content/uploads/2024/06/locksmith-24-hour.webp" media="screen and (width &lt;= 480px)">
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://locksmithunit.com/wp-content/uploads/2024/06/locksmith-24-hour.webp" media="screen and (782px &lt; width)">

Note that it will add preload links for viewports for which it has collected URL Metrics. So here you can see that it has collected data for mobile and desktop.

Note also that URL Metrics are only collected when there are not enough collected for a given viewport group. By default it will collect 3 URL Metrics for mobile, 3 for desktop, and 3 for both of the intermediary viewport groups. You’ll only see requests for detect.min.js when detection is needed.

Nevertheless, I can see that often the H1 is actually the LCP element on the page, not the DIV with the background image. In this case, Image Prioritizer will not prioritize the image.

I don’t have experience with LiteSpeed, so I cannot advise on how to best configure it.

About the DIV in the subpages:
You are correct that the background is inside a “div,” but this is how most theme builders structure pages (with sections).
I think we need a solution for this because this is normal behavior for any theme builder.

Yes, and it is designed to handle a background-image assigned to any element. However, I’m seeing something that may be blocking it from working on your site. If I look at Vault Locksmith, I can see that the LCP element is this:

<div
  data-od-xpath="/HTML/BODY/DIV[@id='page']/*[1][self::DIV]/*[1][self::DIV]/*[1][self::DIV]"
  class="deferImage"
  data-src="https://locksmithunit.com/wp-content/uploads/2024/06/locksmith-fl.webp"
  data-label="Safe Locksmith"
  data-id="Safe-Locksmith"
  data-export-id="contact-1"
  data-category="contact"
  data-parallax-depth="20"
  id="Safe-Locksmith"
  data-section-ov="1"
  style="
    background-image: url(&quot;https://locksmithunit.com/wp-content/uploads/2024/06/locksmith-fl.webp&quot;);
  "
></div>

I can see this is showing up correctly in fact as a preload link:

<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://locksmithunit.com/wp-content/uploads/2024/06/locksmith-fl.webp" media="screen and (782px &lt; width)">

However, the deferImage class I’m seeing here is concerning. This seems to indicate that JavaScript-based lazy-loading may be getting used. If so, this would be terrible for performance. There is a pending PR to try to fix up JS-based lazy-loading of IMG tags, but not for background images. Nevertheless, I don’t see the image deferral is actually applying at the moment for that DIV. (The HTML I shared above is copied from the page response, not from DevTools.)

About JS exclusions:
Do you recommend excluding JS minify and defer optimization in LiteSpeed?
I noticed you have these two scripts:

Yes, absolutely. Deferring this script modules may cause problems. If deferring means the JS is only loaded once the script enters the viewport, then this can block it from working at all. This is the problem faced by WP Rocket. See issue. If, however, the intention is to defer the scripts so they don’t cause any render blocking, then this isn’t relevant because they are script modules, and thus are already “deferred” (à la defer).

About LiteSpeed:
I’ve already spoken with LiteSpeed, and they performed some updates to make it work better with your plugin.

Thank you very much for doing that.

I don’t use WP Rocket.

I know. I was only mentioning WP Rocket because the feature you described sounds similar to WP Rocket’s Delay JavaScript execution feature. Indeed, the LightSpeed Cache feature docs you linked to say the Load JS Deferred feature has this: “Delayed doesn’t run the JS until it detects user activity (like a key click or mouse pointer movement).” I don’t know how specifically it is implemented, but I would not enable it for the two scripts you’re referring to, given the prior experience with WP Rocket’s implementation.

And the scripts are also already minified, so no need to re-minify.

I need you be more specific, if we need to exclude both from MINIFY and DEFER or just one of them.

As I mentioned previously, these scripts are loaded as JavaScript modules which have a deferred loading behavior already. Therefore, they are irrelevant for defer. So you shouldn’t minify nor defer them, because they are already minified and deferred.

And what about what i told you on the DeferImage CSS? you think we can find a solution for that? as i said its only cosmetic (CSS)

It seems there is quite a bit of leftover cruft that you can remove then, like the data-src attribute. The deferImage class name is also misleading, since it apparently no longer related to lazy-loading. Note that Image Prioritizer also implements lazy-loading of inline background images which are discovered to be outside all initial viewports.

It’s working on the Locks page. I see:

<link data-od-added-tag="" rel="preload" fetchpriority="high" as="image" href="https://locksmithunit.com/wp-content/uploads/2024/06/locksmith-fl.webp" media="screen and (782px &lt; width)">

OI see the same on the Contact page.

Note that optimizations depend on traffic to collect the URL Metrics from actual page views. This is how the pages learn what should be optimized.