Improve Lazy Load function on image sliders

Resolved deewinc
(@deewinc)

1 year, 5 months ago

Hello,

I’m trying to use Autoptimize in lazy loading slides. It works perfect but the problem is it downloads image slides even before a visitor scrolls through a page and reaches the slider section.

That can harm SEO and page loading time, especially when you have multiple image sliders on a page.

W3TC works that way. It only downloads the images when the visitor reaches to a section of a page where the slider is visible. Unfortunately, it has a bug that fails to swap the placeholder with the correct image slider. So, when scrolling through the images on the slider, a blank slide shows up.

I have covered this here and there was a time you also contributed to it when someone raised issue about it.

It would be nice if you can contribute to the topic as well.

https://wordpress.org/support/topic/w3tc-creating-a-blank-image-slide-in-image-slider-lazy-loading

The good thing is autoptimize loads a similar placeholder, but it immediately swaps it with the correct image on the slide.

The only thing that needs improvement is in preventing image slides from being downloaded until the visitor reaches the slide.

Here’s the slider just incase you want to check out the issue first before heading over to add your contributions on W3TC

http://bit.ly/METABUGSLIDER

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

Plugin Author Optimizing Matters
(@optimizingmatters)

1 year, 5 months ago

Autoptimize uses LazySizes which indeed does not wait to load images until they coma into view deewinc. From the lazysizes documentation:

lazySizesConfig.loadMode (default: 2): The loadMode can be used to constrain the allowed loading mode. Possible values are 0 = don’t load anything, 1 = only load visible elements, 2 = load also very near view elements (expand option) and 3 = load also not so near view elements (expand * expFactor option). This value is automatically set to 3 after onload. Change this value to 1 if you (also) optimize for the onload event or change it to 3 if your onload event is already heavily delayed.

AO uses loadmode 1 by default.

hope this clarifies,
frank
Thread Starter deewinc
(@deewinc)

1 year, 5 months ago
Hello,

Thanks for your fast response.

We’ll, from the settings, it’s set to zero and not 1. Not sure if I’m the one that changed it or not. But it’s zero.

The issue is not in loading but in downloading. It downloads it the images even before the user reaches the slider. From there, it will display them in a lazy loading manner.

So, I want it NOT to download any slide image until the user reaches the slider. Hope that’s being understood.

The issue shows up when using page speed testing tools like GTMetrix.

When using the browser I can see that it only downloads the images when I reach the slider. But with GTmetrix it shows the images are downloaded even when the slider isn’t visible.

With W3TC lazy load, GTMetrix doesn’t download the images. Meaning it’s pretty aggressive on that.

Not sure if there’s anything you can do to adjust that for boosting speed tests.
- This reply was modified 1 year, 5 months ago by deewinc.
- This reply was modified 1 year, 5 months ago by deewinc.
Plugin Author Optimizing Matters
(@optimizingmatters)

1 year, 5 months ago

With W3TC lazy load, GTMetrix doesn’t download the images. Meaning it’s pretty aggressive on that.

Not sure if there’s anything you can do to adjust that for boosting speed tests.

afraid not; lazysizes simply works differently.

Thread Starter deewinc
(@deewinc)

1 year, 5 months ago

Hello,

That’s okay. W3TC have taken up the issue. Hopefully, they’ll fix it. For now I’ll use Autoptimize as it is.

Regards

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

The topic ‘Improve Lazy Load function on image sliders’ is closed to new replies.

Views