Extend lazy-loading exclusion rules to background lazy-loading

[brian-brightfire]

What problem does this address?

We are looking for the ability to activate lazy-loading for background images, but with additional support for EXCLUSION rules, similar to what you have for regular tag lazy-loading. This would help us continue to leverage lazy-loading of backgrounds, while allowing pointed exceptions for LCP images.

What is your proposed solution?

Would like to see an extension to lazy-loading exclusions rules which will apply to background lazy-loading as well as normal tags.

Will this feature require documentation? (Optional)

None

[kushh23]

Hi @brian-brightfire,

Thank you for creating this issue.

Our product team will evaluate the impact of this issue compared to other open bugs and upcoming features and assign a priority level to the bug report.

Our developers prioritize the highest-priority issues first, so we cannot provide a specific timeline for resolution at this time. In the meantime, if you want to exclude some background images from lazy loading process than you can achieve this by using a manual approach. To do so, you must edit the page and add the CSS class "optml-bg-lazyloaded" to the background image.

If you have any additional information that may assist with prioritization or resolution, feel free to reply to this thread.

[selul]

hi @brian-brightfire what kind of exclusions rules are you looking to have? Per filename? Additional classes that the container has?

I'm curious what you are trying to solve with this, too. Are you looking to avoid BG lazyload on hero images in general?

[brian-brightfire]

@selul - the exclusion rules which currently exist for normal image tags would be more than suitable. We would likely leverage filename words (based on what is currently available for normal images). But in general, yes - We are looking for the ability to lazy-load all background images, and exclude the LCP (hero) image in general, as this goes against best practices from a performance standpoint.

We also understand that currently we would need to take a manual approach, but this is not going to be attainable for us as we use Optimole and WP at scale on large multisite installs with over 1000 sites on each install. We do have a development team, but in general our design team uses the build tools, so we would like to provide a method non-developers can easily leverage.

[selul]

An alternative for this now would be adding a class to the container that the hero background image is using add the :not CSS selector in the Background CSS selectors area.

For instance, if all the elements that have BG images have the class .element-with-bg and if you add the class .no-bg-lazyload to the hero one, you can use in the Optimole's BG CSS selectors area just the element .element-with-bg:not(.no-bg-lazyload) to avoid lazyload the hero image.

Let me know if this fixes your issue for now, I will think about how the exclusion can be extended too or how this can be done automatically to avoid BG lazyload on hero images automatically.

[brian-brightfire]

Thanks, @selul - I tried that out. Unfortunately, this didn't seem to work for us, as we are applying this to an Elementor Container Background, and the actual background is applied to the child .elementor-background-overlay div. To be clear, what we have is markup like:

<div class="container hero"><div class="container-background"></div></div>

Exclusion class is added to the div with .container
Background is applied to the .container-background div. We do not have access for our design team to add classes directly to this div.

Then in the Extend CSS Background Lazy Loading we added .container:not(.hero) but this doesn't work. We have also tried adding .container:not(.hero) .container-background but Optimole is still lazyloading.