Several problems: consistent, Background CSS images and more

Resolved Nadav Levi
(@123nadav)

3 months, 1 week ago
Hi @westonruter

We open 2 days ago ticket on the official Performance Lab support but yo RESOLVE it so i was thinking it be smarter to open separate ticket here (you told me to update you after i finish to install and test):

https://wordpress.org/support/topic/plugin-options-reversibility-and-litespeed-cache-compatibility/#post-18734870

So first, plugin is amazing, (Image Prioritizer).
It has a lot of potential, but I’ve run into several issues and I’ll explain them from my tests and experience.

Summary:
The plugin should add the fetch-priority header to important images, but it’s not consistent. Sometimes the header appears, and sometimes it doesn’t. You can see this in PageSpeed and by checking response headers. Images use stable URLs, so this inconsistency isn’t due to dynamic generation (like CSS/JS cache) and
couple of more problems related to GDPR and CSS background images.
Details and test results below.

———-
1. Background CSS images not getting fetch-priority.
  One problem I noticed: the plugin does not appear to add fetch-priority for elements that use CSS background-image (e.g. style=”background-image: …”).
  From my tests, the plugin injects code inside the div, but it does not set fetch-priority for the background image request.
  Example PageSpeed report showing LCP and the background image discovery:
  https://pagespeed.web.dev/analysis/https-locksmithunit-cat-serraller-navas/j9kg0lm0oe?form_factor=mobile
On the front page it works for the header background image (the header is generated by the THEME builder), but that header uses a different markup for background images. Even then, it’s not reliable, sometimes it works and sometimes it doesn’t.

———-
1. Consistency (fetch-priority not applied on every visit / test).
  This is the most important issue: fetch-priority is not applied consistently.
  Sometimes the plugin does what it should and the fetch-priority header is present, other times the header is absent and PageSpeed shows erros:
  LCP request discovery error
  LCP breakdown error
I’m still testing whether this is cache-related, for example:
I cleared caches between tests and it didn’t look like a cache issue so far.

For reference, I see these scripts loaded:
https://locksmithunit.com/wp-content/plugins/optimization-detective/detect.min.js?ver=1.0.0-beta3
https://locksmithunit.com/wp-content/plugins/image-prioritizer/detect.min.js?ver=1.0.0-beta2

Important Note:
LiteSpeed does JS optimizations (minify and defer), and I’m checking whether that affects the plugin. If you recommend excluding either of the above scripts (or others) from LiteSpeed’s minify/defer options, tell me which one to exclude. In LiteSpeed I can exclude minify and defer separately, so we could minify without deferring if that helps.

Another thing, i see your plugin ” Optimization Detective” is REST API, and litespeed cache REST API requast, if need to be exlude something you must tell me.

LiteSpeed control object cache as well, so if something need to exluded, tell me.

This doc’s of litespeed about the REST API Excludes Tab:
https://docs.litespeedtech.com/lscache/lscwp/cache/#excludes-tab

Please advise.

———-
1. Possible GDPR-related problem behavior (still testing, not sure 100%).
  I have three identical sites that differ only by language / jurisdiction:
  https://locksmithunit.com (Locksmith Orlando) — USA — NO GDPR
  https://locksmithunit.es (Cerrajero Barcelona) — EU — GDPR
  https://locksmithunit.cat (Serraller Barcelona) — EU — GDPR
On the GDPR sites I don’t see the fetch-priority header and PageSpeed shows LCP request discovery errors consistently.
Pagespeed test EU website (WITH GDPR):
https://pagespeed.web.dev/analysis/https-locksmithunit-cat/swyno8jy9w?form_factor=mobile

On the U.S site (no GDPR) results look much better and the LCP errors disappear, (but not 100% consistently as i said before)
Pagespeed test USA website (NO GDPR):
https://pagespeed.web.dev/analysis/https-locksmithunit-com/279d4dvjmt?form_factor=mobile

I suspect there may be some GDPR-related block or consent flow that prevents the plugin from fetching or adding the priority header. I’m not certain, I’m still testing, but there’s a noticeable difference between EU and US sites.

———-
1. LiteSpeed Cache plugin (Lazy Load) — compatibility / side-by-side behavior.
  I ran tests with LiteSpeed Cache’s Lazy-Load and Image Prioritizer (both enabled).
  In the html code himself, and google search console, it appears your plugin and LiteSpeed lazy load can operate side-by-side (screenshot):
  https://ibb.co/kgwddhTQ
But if we look on PageSpeed, its not look so well.
PageSpeed scores are lower when LiteSpeed lazy load is active long side “Image Prioritizer plugin”.
I sometimes still see fetch-priority, but overall the score isn’t as good as when Image Prioritizer runs alone.
It might be that LiteSpeed Lazy load is overriding something in the output, and i dont see it.

This is not a critical problem, its more a compatibility improvement request.
LiteSpeed Cache is widely used (7+ million users):
https://wordpress.org/plugins/litespeed-cache/

As i said before, litespeed cache plugin is the best plugin in the market. not only that, they also offer a full Google Cloud solution (this is what I use):
https://docs.litespeedtech.com/cloud/images/wordpress/#__tabbed_1_4

LiteSpeed is not just a plugin, its a full ECO system (server, plugin GCP machine, etc).
Even a simple option like Lazy Load, matching with the OpenLiteSpeed server.
So matching your plugin with the litespeed lazyload option and make it work side by side can be much more than a simple optimazation.

If you will improve compatibility of your plugin with LiteSpeed Cache’s Lazy Load and JS optimization (minify / defer) so both solutions work together reliably, that would be a very valuable enhancement.

For testing, I have one website I can sacrifice, haha (this website is less important, so I can run tests on it).
On this website, the Image Prioritizer plugin is active together with the LiteSpeed Lazy Load option (both running at the same time).
You can check it and see the code or any other behavior yourself:
https://locksmithunit.cat/

———-

I know it’s was very long, sorry about that.
Maybe I repeated myself a few times, haha, but it’s all with good intentions.
I hope this explanation was clear.
I tried my best to explain each problem.

Regards,
Levi

The page I need help with: [log in to see the link]

Viewing 13 replies - 1 through 13 (of 13 total)

Thread Starter Nadav Levi
(@123nadav)

2 months, 4 weeks ago

Someone? it took me a lot of time all this testing, i be happy if someone will respond me,

@westonruter are you here?
Plugin Author Weston Ruter
(@westonruter)

2 months, 4 weeks ago
@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.
Thread Starter Nadav Levi
(@123nadav)

2 months, 3 weeks ago
Hey @westonruter

Thanks for your response.

Let’s go over a few more points.

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.

About JS exclusions:
Do you recommend excluding JS minify and defer optimization in LiteSpeed?
I noticed you have these two scripts:
- https://locksmithunit.com/wp-content/plugins/optimization-detective/detect.min.js?ver=1.0.0-beta3
- https://locksmithunit.com/wp-content/plugins/image-prioritizer/detect.min.js?ver=1.0.0-beta2
I’d appreciate your advice on this.

About LiteSpeed:
I’ve already spoken with LiteSpeed, and they performed some updates to make it work better with your plugin.
As I mentioned before, this could be a significant WordPress enhancement and a big optimization improvement.
Plugin Author Weston Ruter
(@westonruter)

2 months, 3 weeks ago
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.
Thread Starter Nadav Levi
(@123nadav)

2 months, 3 weeks ago
Hey @westonruter how are you?

About the deferImage class:

A long time ago (about 4–5 years), there was no native lazy-load feature, so I created my own solution.
However, I removed that JavaScript a long time ago. Today, the deferImage class is only used visually to stretch the background to 100%. It’s purely cosmetic.

So don’t worry, there is no script currently performing any defer functionality. I know the class name is confusing, but I created it manually, and there is no JavaScript associated with it anymore.

For example, this what the deferImage class actually do (i created this):
```
.deferImage {
  background-repeat: repeat;
  background-size: 100%;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.deferImage2 {
  background-repeat: repeat;
  background-size: contain;
  height: 100%;
  padding: 30px;
}

@media only screen and (max-width: 540px) {
  .deferImage2 {
    background-size: cover;
    background-position: center;
    height: 90px;
  }
}
```
No JavaScript, no DEFER for this, i know its confusing but as i said before, i created that long time ago and i can promise you 100% its just visual and cosmetic (CSS ONLY).

For a proof, as you said, the page: Vault Locksmith using the same background inside a div with the deferImage class… and its working for this page. this because deferImage is used only for cosmetic (CSS) no JavaScript or Defer trick.

About the JS cache:

I don’t use WP Rocket.

I use LiteSpeed Cache together with an OpenLiteSpeed server.
LiteSpeed is the one that minifies and defers the scripts, including your two scripts:
- https://locksmithunit.com/wp-content/plugins/optimization-detective/detect.min.js?ver=1.0.0-beta3
- https://locksmithunit.com/wp-content/plugins/image-prioritizer/detect.min.js?ver=1.0.0-beta2
This from LiteSpeed about the DEFER:

https://docs.litespeedtech.com/lscache/lscwp/pageopt/#load-js-deferred

This about the Minify:

https://docs.litespeedtech.com/lscache/lscwp/pageopt/#js-minify

On my website both of the option is turn ON. but i can exclude each one of them separately.

So if we can Minify but not DEFER, i can control it:

https://ibb.co/MDDcSk7v

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

As i said its look like working fine. but i prefer to get your recommendation about this issue and again, we don’t have WP-ROCKET, we have LITESPEED CACHE plugin.

@westonruter

Thanks a lot for all your responses. I really appreciate it, and you’ve been very, very helpful.

Regards,

Levi
Plugin Author Weston Ruter
(@westonruter)

2 months, 3 weeks ago

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.

Thread Starter Nadav Levi
(@123nadav)

2 months, 3 weeks ago

We don’t use the Delayed option, only DEFER:

https://ibb.co/6c5FqQyN

Please @westonruter

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

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)

Plugin Author Weston Ruter
(@westonruter)

2 months, 3 weeks ago

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.
Thread Starter Nadav Levi
(@123nadav)

2 months, 3 weeks ago
OK, I will exclude your scripts from LiteSpeed.

About the deferImage:

I can’t remove it. I’m using CSS to position the background as i showed in my previos message:
```
.deferImage {
  background-repeat: repeat;
  background-size: 100%;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.deferImage2 {
  background-repeat: repeat;
  background-size: contain;
  height: 100%;
  padding: 30px;
}

@media only screen and (max-width: 540px) {
  .deferImage2 {
    background-size: cover;
    background-position: center;
    height: 90px;
  }
}
```
And the data-src attribute doesn’t work anymore. Removing it now from 110 pages would be a nightmare. I came to the conclusion that it’s better to leave it as a leftover, since it doesn’t do anything and there’s no point wasting time on it.

but as you said, the page: Vault Locksmith is working, and it has both deferImage and data-src… I just don’t understand why it’s not working on the rest of the pages.
Plugin Author Weston Ruter
(@westonruter)

2 months, 3 weeks ago
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.
Thread Starter Nadav Levi
(@123nadav)

2 months, 3 weeks ago

@westonruter its work on pages without Contact Form or Google Maps…

I did several tests on 3 identical different websites i have:

https://pagespeed.web.dev/analysis/https-locksmithunit-es-cerrajero-santa-coloma/3mq73og8i0?form_factor=mobile

https://pagespeed.web.dev/analysis/https-locksmithunit-com-locksmith-altamonte-springs-fl/yozi3btl54?form_factor=mobile

https://pagespeed.web.dev/analysis/https-locksmithunit-com-toyota-locksmith/qaqwz8pn2f?form_factor=mobile

https://pagespeed.web.dev/analysis/https-locksmithunit-cat-serraller-badalona/qulgzsbe5b?form_factor=mobile

look on my pagespeed links you will see.

All of them have LCP errors… on the other hand, This pages have contact form 7 and WP-GOOGLE MAPS (a map from Google API) the priority fetch not working on the background, but more than that, even when i run the Lock-Change page several times on pagespeed and the page get LCP error (no fetch priority):

https://pagespeed.web.dev/analysis/https-locksmithunit-com-lock-change/wdr66h8yuc?form_factor=mobile

From what i see, your plugin fetch only the front page background header but not the other pages background (the other pages dont have headers like the front page)

For the record, all the URLs i provide here with the test, they are getting a lot of page views. i personally get inside and use pagespeed on them. so your detective plugin got the data 100%.

Another thing, i have Crawler from litespeed. any 2 hours a crawler send a bot and scan all the pages on all my websites! this warming the cache for visitors… so i pretty sure the “detective plugin” got this data already (we use your plugin more than 3 weeks)

Its little disappointing, the pages is important too, and i was thinking your plugin can make a lot of difference if he will work on all the pages and fetch all the backgrounds. as i said, any THEME build background this way inside the div. and deferImage and data-src is only cosmetic (CSS). no JavaScript… You sure don’t have a way to overcome this problem?
Plugin Author Weston Ruter
(@westonruter)

2 months, 2 weeks ago
I’m looking at the first example: https://locksmithunit.es/cerrajero-santa-coloma/

I can see there are quite a few IMG tags that have the data-od-unknown-tag attribute. This indicates that there haven’t been URL Metrics collected for that URL. In looking at the HTML source, it seems there is corruption. For example, look at this malformed HTML:
```
<div class="modal-dialog" style="max-width: 450px;" "="">
```
It seems you have some HTML minification that is corrupting the markup, or you have some malformed markup to begin with. This seems to be preventing Optimization Detective from being able to collect URL Metrics.
Thread Starter Nadav Levi
(@123nadav)

2 months, 2 weeks ago
I fix it, all the malformed and empty attributes inside the body html, its took me 2 days because i have 3 websites and they very big. but i clean it now @westonruter .

still i don’t see any improvement on inner pages with LCP, only front page:

https://pagespeed.web.dev/analysis/https-locksmithunit-es-cerrajero-badalona/4nx7twaui4?form_factor=mobile

https://pagespeed.web.dev/analysis/https-locksmithunit-cat-serraller-navas/vqpfbma3lo?form_factor=mobile

But i do see improvement on desktop. need to check deeper. (on locksmithunit.cat)

one thing i forgot, litespeed cache plugin has option to mobile cache, separate cache from desktop run with crawler to warm up the cache. but is works on the front page with mobile and desktop (lcp errors go down on page speed) i tried to turn it off but i dont believe this is the reason the inner pages not get fetched properly and the LCP error stay…
- This reply was modified 2 months, 2 weeks ago by Nadav Levi.

Viewing 13 replies - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.