Latest PRO updates breaks "SG Optimizer - Media Lazy Load" feature

[agenzia_gamma]

Dear Support

I know this is a Topic about an external Plugin, but SiteGround Support suggest me to contact Themeco in order to investigate about this pronlem.

After investigating extensively with SiteGround support, we found that one of the latest updates of PRO Theme generates a conflict with Media Lazy Load feature (of SiteGround SG Optimizer plugin).

Please could you help us in order to understand what could cause the “SG Optimizer - Media Lazy Load feature” to be disabled by PRO Theme latest releases?

• PRO 3.0.4 works fine with “SG Optimizer - Media Lazy Load feature”
• PRO 3.2.3 causes “SG Optimizer - Media Lazy Load feature” doesn’t work

SG Optimizer - Media Lazy Load feature add the following class to all <img> TAGs
class="lazyload"

After update PRO to latest releases (3.2.3 for example) class=“lazyload” is NO MORE added to <img> TAGs

Thank You

Daniele

[rad]

Hello Daniele,

Thanks for reaching out.

There are no known changes from the latest Pro version that could alter image rendering. And all images are also stored in v2 structure which no known API that can add the said class="lazyload". I’m not sure how their lazyload library is implemented or how it was integrated to Pro builder as there is no known integration as of yet since older Pro.

But since it’s part of SG optimizer plugin, I’m assuming they are adding class="lazyload" to the cached output of the page. That’s easy than integrating it within the builder v2 structures and should be fixed by regenerating the caches of your site again.

And if regenerating caches doesn’t fix it, it could be a script conflict and for that, may I request your site’s URL and admin login credentials? Please provide them in the secure note I like to gather more information first as this might just be a cache issue, still, I need to confirm it.

Thanks!

[agenzia_gamma]

Dear Rad

Thank You for your precious support.

Here enclosed you will find the following TWO admin login credentials:

1. Production Site (PRO version 3.2.3) WITH lazyload problem
2. Staging Site (PRO version 3.0.4) WITHOUT lazyload problem

in order to investigate cache or script conflict.

Thank You again

Daniele

[rad]

Hi Daniele,

Lazyload is indeed not working, though, I can’t compare it with the staging as the user/password site’s protection are incorrect. Been trying to log-in that and it’s not working, please provide the correct one. The login window always pop, then this

And as another request, would you mind providing the FTP login credentials as well? I can’t find anything wrong from the admin, perhaps I will have to check and test the plugin’s code through FTP. And the plugin only works on SG hosted sites.

Thanks!

[agenzia_gamma]

Ops!
I’m sorry

Here enclosed correct credentials

[rad]

Hi Daniele,

It appears the lazyload is really binded to the cache, what’s not working is the cache that’s why the lazyload is not being applied as well. Though, I’m not yet sure what caused the cache not working properly. I’ll continue the investigation and will let you know, for the meantime, please don’t change the credentials

Thanks!

[agenzia_gamma]

Sure!
I will wait for your investigation.
Thank You very much

[rad]

Hi Daniele,

This seems to be caused by recent Wordpress 5.4 update last March 31st in which your site is currently updated. And this is my finding,

1. Lazyloading is not working even on Pro 3.0.2, sample this is the image taken from staging with 3.0.2 active.

You’ll see that there is no lazyload class in there

2. The lazyload is only present on this one

You’ll notice on point 1, that there is a [cs_content_seo] block, it’s a data block for SEO content and images. And it’s a new feature of Pro 3.2.0+.

This means your content is already edited under Pro 3.2.0+ and the reason [cs_content_seo] is being displayed is because the active theme is Pro 3.0.2 where [cs_content_seo] doesn’t exist. The [cs_content_seo] is supposed to be a hidden content and only use for SEO and searches.

This means if you’re going to non-edited page of 3.0.2 where [cs_content_seo] doesn’t exist yet, then there is still no lazyload in there. The reason there is lazyload in [cs_content_seo] is because it’s visible from 3rd party plugins which intentional for SEO purposes.

3. If I intentionally removed [cs_content_seo] from staging, then there is no lazyload left even if it’s 3.0.2.

In summary, this could be caused by Wordpress 5.4 as well since it’s not really working on both 3.2.0+ and 3.0.2, it just happens that there is [cs_content_seo] block on your staging.

Perhaps you can create another staging where everything is not yet updated and edited? Maybe a copy before March 31st and make sure it’s not yet edited so [cs_content_seo] is not yet implemented. We’ll gather information from that copy as well.

Thanks!

[agenzia_gamma]

Dear Rad

I have TWO more Staging copies without Wordpress 5.4

I send you the addresses into a Secure Note

Thank You

[rad]

Hi Daniele,

Thanks, now Wordpress 5.4 is out of the list

But seems both Staging1 and Staging2 have already updated Pro theme. Hence, the finding is still the same. But I went ahead and installed a 3.0.2 and made sure the home page is compatible with 3.0.2, but still, there is no lazyload as well on Staging1.

Now both WP 5.4 and Pro 3.2.3 are out of the question as it happens on 3.0.2 too, perhaps lazyloading is not really working since 3.0.2? I really like to see a copy of this untouched where it still works. All of those stagings has an updated theme.

In SG plugin, this is the line responsible for adding lazyload,

add_filter( 'the_content', array( $this, 'filter_html' ) );

..
..
..
..

            $orig_image = str_replace( $classes, $classes . ' lazyload', $image );
			} else {
				$orig_image = str_replace( 'src=', 'class="lazyload" src=', $image );
			}

..
..
..

I tried it on even on the older Pro theme and it’s not really working there. And it’s because the lazyload is added through 'the_content' hook. And data including images are stored at _cornerstone_data in which not accessible through 'the_content' ever since the first version of Pro theme. Hence, lazyload shouldn’t really work from the start.

Though, since we have revert it back to 3.0.2 and to older Wordpress on Staging1 and still the same, then we can guess that the problem is with SG Optimizer. Have you turned off something form your hosting’s panel? Because as based on my research, you need to configure something there as the SG plugin is a mere extension of their hosting features.

Thanks!

[agenzia_gamma]

Dear Rad

Thank You for your precious support and patience

Staging 3 has PRO 3.0.4 installed and “SG Optimizer - lazyload function” seems to work fine

In fact:

• If you go to Production Site (with PRO 3.2.3) Home and view-source you will find only 0 “lazyload” occurrences

• If you go to Staging 3 (with PRO 3.0.4) Home and view-source you will find 72 “lazyload” occurrences

If you want to play with SG Optimizer Options, you can play freely on all Staging Sites (as you want), into section “SG Optimizer” into Wordpress Dashboard

Thank You

Daniele

[rad]

Hi Daniele,

Sure, I’ll continue checking but it’s best of we can really test it on a copy perhaps from February.

As I mentioned above, it’s not working on Staging 3, what you’re seeing are lazyload added to the content within [cs_content_seo] where originated from 3.2.0+. Please check the screenshots I provided above on point #2, it’s from Staging 3. There are images with no lazyload, but images that has lazyload is within [cs_content_seo] and it’s a 3.2.0+ not 3.0.2+ feature.

The Staging 1 is basically the same as Staging 3, only on Staging 1, I completely revert the content for 3.0.2+ hence also removing [cs_content_seo] to make sure it’s a copy of 3.0.2+.

You can try this on Staging 3 to confirm it, please make sure the theme version on Staging 3 is 3.0.2 or 3.0.4, then edit its home page in the builder (it’s not going to load probably due to errors but still can be saved), then hit save (this will re-save the content that is applicable for version 3.0.2+, and it’s the content where [cs_content_seo] doesn’t exist yet). Then view your home page source and see if you can find lazyload. That’s what I did on Staging 1 just so I can confirm that lazyload is not really working even on 3.0.2+.

You can also try this, try creating a Staging 4 with theme 3.0.2 or 3.0.4 make sure not to update it to 3.2.3 , that’s to make sure there is no added features such as [cs_content_seo]. Then create a page and add an image, then inspect its source if there is lazyload.

What we are really seeing regardless of staging are lazyload added to the content generated by 3.2.0+ and not 3.0.2+. Remove that feature and there is no lazyload on 3.0.2+ in which version you said it was working, but not based on my testings.

Thanks!

[agenzia_gamma]

Dear Rad

I’m sorry but I don’t have any older version to restore.
The only versions I have are 3 Stagings I’ve suggested to you.

I cannot fully understand all the technological considerations that you have explained to me.
The only thing I can say is that SiteGround support continues to insist that the LazyLoad problem is caused by the theme.

I’m sorry

Thank You

Daniele

[rad]

Hi Daniele,

Sorry for the terms, it’s long and made it more confusing

What I was saying is lazyload is not really working regardless of version, and SiteGround Support is also correct that the issue caused by the theme since there is no way lazyload will work without integration.

I was investigating the version you mentioned to confirm if it’s really working. The one you’re seeing from Staging 3 are from cache data of 3.2.0 which becomes visible when you activate 3.0.2, but it’s not really working since there is no integration for builder data.

I think we would need to discuss and reach out to SiteGround for the integration.

Thanks!

[agenzia_gamma]

This would be fantastic!
I hope to hear from you soon!

Thank You
Daniele

[ruenel]

You are most welcome!

[rad]

Hi Daniele,

The lazyloading were not really working and it’s something that can’t be fixed through theme since the issue is the hook priority.

The file that is needed to be edited is the wp-content/plugins/sg-cachepress/core/Lazy_Load/Lazy_Load_Images.php then change this line

add_filter( 'the_content', array( $this, 'filter_html' ) );

to this line

add_filter( 'the_content', array( $this, 'filter_html' ), 9999999999999999 );

I haven’t contacted the developer, but they should make their features work that way so it could filter any content that needs lazyload. You can see this working on Staging1, I made the modification on the said file, you can do the same on the live site.

The explanation for that is, the lazyloading is executed even before the theme’s could render. Hence, it’s not working. Any hooks(eg. the_content) can be use by any plugin or theme, so the lazyload plugin should also consider using a lowest priority ( lower number has higher priority, and higher number has the lowest priority ). Plugins are always loaded and executed before the theme, so it’s only normal for them to add priorities to prevent issues like this. The loading sequence is available here https://www.mikeinmonospace.com/wordpress-internals-loading-sequence/ as reference in case they check this thread (plugin’s developer).

Thanks!