[Resolved] Help with ideas for how to reduce page load time (maybe using Lazy Load option)

[Author]

Posts

[liatG]

Hi Christian,
I'm here to get your opinion on the best way to resolve the problem I documented in https://toolset.com/forums/topic/only-load-images-inside-bootstrap-panel-on-click-to-reduce-page-load-time/. I haven't been able to find a Toolset contractor or outside developer to help me do the AJAX thing Luo recommended, so maybe that's not the best way to go.

I did experiment initially with using Lazy Load as per your suggestions, but it didn't work very well. But I'm back to see if you have more suggestions or what you think is the best approach. Not being able to solve this has slowed down the launch of my site quite a bit.

The problem: I'm displaying many photos in a view, and there are also many instances of that view. It makes the page slow.

You can see the problem if you go to hidden link. You can see the page takes forever to load. Click the "Step-by-Step Instructions" panel below the summary. Each of the techniques on this page has a panel like that, with 5-30 photos showing step-by-step instructions.

I tried applying the lazy load feature to the step-by-step photo view, but the behavior seemed choppy. It wasn't obvious that more images were loading, and it didn't speed up the page load time much. Could you help me tweak the settings so that these images load in a reasonable way?

Nested Views used:
Chapter view for class part archive pages: hidden link
Panels for bind-offs class: hidden link
Step photos for bind-offs class: hidden link

The last view is the one where I tried to apply the Lazy Load settings.

Thank you so much. You're my only hope!

[Luo Yang]

Hi,

Christian isn't available currently.

I assume we are talking about the "Lazy Load" Javascript, download from:
hidden link

You can setup the image HTML tags according to above document, add CSS class name "lazyload" to the image tag, for example:

[types field="my-image" class="lazyload" size="thumbnail"]

Please replace "my-image" with your image field slug

Then setup JS codes to init "Lazy Load", for example:

jQuery(function() {
    lazyload();
});

[liatG]

Hi Luo,
Thank you for your help. However, I know nothing about code and I don't even know what to do with your instructions to "download" Lazy Load from that link. Yes, I can download a .zip file, but then what?

I was talking about the Infinite Scroll options within the Toolset view options.

Is it possible to wait for Christian? He always gives me instructions I can follow.
Thank you,
Liat

[liatG]

I just want to add that I attempted these Infinite Scroll settings and they did not give the desired result. Many of the photos did not load at all, no spinner graphic was visible...
I removed this setting for now.

[Luo Yang]

As your request, I have reassigned this ticket to Christian, you can wait for his answer.

[Christian Cox]

Hi, I'll take a look. The login credentials I have no longer work. Can you check and provide updated login info?

[Christian Cox]

Let's start with the Toolset approach first. I think you'll get a major performance improvement by applying the Infinite Scroll option in this View: hidden link

Edit the View and find the Pagination and Sliders Settings section. If you can't see it, scroll up to the top right corner and click "Screen Options" to activate the panel. Choose Pagination enabled with manual transition and AJAX, then configure pagination to show 1 item per page. Under Advanced options deactivate both preloading options. Infinite Scroll will display one result on the page when the page loads, but then as your visitors scroll down the page more results will begin to load, one at a time. It can be a clunky experience, and it's not as SEO friendly because all content doesn't exist in the page until some User interaction. On the other hand, the page markup will load faster.

The Lazy Load plugin is different from Infinite Scroll. With Lazy Load, all the page markup loads at the beginning so it's more SEO friendly. However, instead of loading the actual images it loads placeholders. As the User scrolls the image into view, it triggers an image update and the real image is loaded in on-demand. The page markup loads a bit slower because there's more of it at the beginning, but fewer images must be loaded at first so the page requires less download time for assets.

So I recommend trying Infinite Scroll first, and adjusting some settings like preloading, pixel tolerance, and spinners. See if it's something you will be satisfied with. If not, we can look at Lazy Load but that isn't a Toolset product so support is limited.