PWA Compatibility & UABB Flip Boxes & Exclude Files?

[Pairfum-London]

Dear Clay,

Thank you for creating and maintaining a fantastic plugin!

We have been looking for a solution to lazy load BB background / row / column images and your plugin works very, very well.

We recently found a few issues with your plugin:

1. PWA Incompatible

We are trying to add a PWA to our website and found that PWAs and your plugin are incompatible.

Would you know why? Is this something that you can fix?

These are the PWA plugins that we tried:

• Instantify: https://codecanyon.net/item/instantify-progressive-web-apps-google-amp-facebook-instant-articles-for-wordpress/25757693
• PWA: https://wordpress.org/plugins/pwa/

2. UABB Flip Boxes

We notice that your lazy load plugin doesn't work for the images at the front (or back) of flip boxes created using "Ultimate Addons Lite for Beaver Builder" (UABB).

Here is a link to the plugin:

• UABB Lite: https://wordpress.org/plugins/ultimate-addons-for-beaver-builder-lite/

This is our website where you can see your plugin working on the BB background images but not on the flip boxes:

• live site: https://www.pairfum.com
• test site: https://staging.pairfum.com

3. Exclude Files

We noticed that when we 'check' the option 'Enable lazy load for all Beaver Builder img tags' that also non-Beaver Builder images are lazy loaded by your plugin.

This affects our 'Pairfum London' logo at the top of the page (a PNG or SVG file) and leads to very noticeable layout shifts.

For this reason we have left this option 'unchecked' and installed the A3 Lazy Load plugin on our site:

• A3 Lazy Load: https://wordpress.org/plugins/a3-lazy-load/

This seems to work well but we believe it is unnecessary.

Is there a way to exclude some files from being lazy loaded by your plugin, e.g. the logo?

4. Row Background Image

We noticed recently an anomaly: some row background images are not being lazy loaded by your plugin whereas other are, both on the same page.

Have a look at this page:

• Niche Perfume: https://www.pairfum.com/niche-perfume-natural-eau-de-parfum/

You will notice the following:

• the following images are lazy loaded: -- the 'liquid gold' background image in the row with the 'olfactive triangles & fragrance descriptions' -- the back of the perfume bottle in the row with the heading 'rise above the mere ...'

• these images are NOT lazy loaded: -- the gold sparkle background image in the row with the title 'Gold Collection', and -- the black tissue paper background image in the row the title 'Fragrance Library & Accessories'

We would very much appreciate it, if you had a solution or suggestion how we can fix these issues.

It would lift the usability of your plugin to another level for us.

Many thanks for your help.

Pairfum London

[Pairfum-London]

Dear Clay,

We have found further incompatibilities:

1. Unfortunately, your plugin is not compatible with the Litespeed Cache Plugin: https://wordpress.org/plugins/litespeed-cache/

When your plugin is active, none of the 'LiteSpeed Cache Page Optimization' are working any longer: CSS, JS, HTML, ...

Of all the incompatibilities mentioned, this is the most significant for us.

2. We also noticed that the 'WP Real Media Library' plugin does not work any longer when your plugin is active: https://codecanyon.net/item/wordpress-real-physical-media-physical-media-library-folders-seo-rewrites/23104206

Your support with these issues is very much appreciated.

With kind regards,

Pairfum London

[clayharmon]

@Pairfum-London Thank you for identifying these problem. I will look into them and get back shortly.

[clayharmon]

@Pairfum-London with the latest release I've removed lazy loading for img tags as WordPress 5.5 and modern browsers handle that now. This has also increased compatibility with other plugins.

The bugs with background-images not loading has now been addressed and all background images even for modules should be lazy loaded - let me know if you find any inconsistencies. There is a new checkbox in settings that will need to be set.

[Pairfum-London]

@clayharmon Many thanks for looking into these issues.

We have now had a chance to try the new version but we find that a large proportion of images in rows & modules of the BeaverBuilder plugin disappear when we activate the new version of the plugin.

Would you know why this might happen?

The only images that still show are the ones from the BB WooCommerce module and the blog post module.

[clayharmon]

@Pairfum-London would it be possible for you to put it on your staging site for me to investigate?

[Pairfum-London]

@clayharmon Hi Clay, many thanks for looking into this.

Yes, no problem. I have now activated your plugin on our staging site.

Under your plugin's settings only the following is active: 'Enable lazy load for all Beaver Builder background images?'

This is our staging site: https://staging.pairfum.com

Let me know, if there is anything else I can assist you with.

Kind regards,

Pairfum London

[clayharmon]

@Pairfum-London could you please update the plugin to the latest version and confirm the issue is not resolved?

[Pairfum-London]

@clayharmon

Hi Clay,

Many thanks for looking into this issue and I can see the images are now back!

The lazy loading is working really well and it makes a huge difference to MB of downloaded images on the initial load.

Everything continues to work when we activate the ShortPixel AI plugin.

The only issue we have found is that the responsive background images within BeaverBuilder rows are no longer working.

We use the following plugin to switch from a landscape image (16:9) to a portrait image (16:9, ...) on Mobile & Tablet devices: https://sitespot.dev/resource/beaver-builder-responsive-background-images/

You can see the effect on this page where we are trying various portrait images with different aspect ratios on Mobile & Tablet: https://staging.pairfum.com/niche-perfume-natural-eau-de-parfum/

On our live site, you can see the BB Responsive Images plugin working: https://www.pairfum.com/niche-perfume-natural-eau-de-parfum/

Looking at all of the other issues we initially mentioned when we raised the query and they are all fixed:

• PWA Incompatible: according to Lighthouse the PWA is working on our site with your plugin active.
• UABB Flip Boxes: your plugin is now also lazy loading the images in the flip boxes.
• Exclude Files: no longer an available option.
• A3 Lazy Load: your plugin works well together with the A3 lazy load plugin.
• Row Background Image: all of the background images are all lazy loading.
• WP Real Media Library: working flawlessly.
• Litespeed Cache Plugin: it is a bit too early to know whether all is working correctly but all seems ok. Previously, it was the 'Page Optimizations' within the Litespeed Cache Plugin that were not working: CSS, JS, HTML, ... - minify/defer/async/... - You can see the Litespeed documentation for these settings here: https://docs.litespeedtech.com/lscache/lscwp/pageopt/

Your plugin is a real gem for anybody using BeaverBuilder.

Many thanks for all your help & determination to get your plugin to work for us.

With kind regards,

Pairfum London

[Pairfum-London]

@clayharmon

Dear Clay,

After our last comment above, we switched the background images to BeaverBuilder's inbuilt responsive editing, i.e. a different image each for desktop, tablet and mobile: https://docs.wpbeaverbuilder.com/beaver-builder/layouts/responsive-design/responsive-editing-with-beaver-builder/

You can see a page using BB built-in responsive background images here: https://staging.pairfum.com/niche-perfume-natural-eau-de-parfum/

We made this change to ensure that it is not the BB responsive background images plugin that we mentioned above which prevents the background images from appearing.

Currently, your BB lazy load background images plugin is switched off, as now ALL background images disappear after we switched to BeaverBuilder's inbuilt responsive background images.

Let me know when you are ready to have another look and we will activate your plugin again.

Kind regards,

Pairfum London

[clayharmon]

@Pairfum-London the latest update now works with responsive images for the inbuilt responsive editing. I am unable to get it working with the other plugin since I get a javascript error with it on the latest version of beaver builder.

[Pairfum-London]

Dear @clayharmon We installed the latest version when you published it and have been running it on our staging site since then. It works really well and cuts down significantly on the page weight, i.e. the images that need to be downloaded on the initial load! What we find, however, is that the images 'disappear'. Only when we clear the cache in BB (WP Settings > BB > Tools) do they reappear. Clearing the Litespeed cache on its own is not sufficient. Do you think this is something you may be able to fix? Kind regards, Pairfum London