Help with improving load time and how masonry images are loaded in a large feed on a web page

You could use the Masonry from infinite-scroll :

Live working sample

Official documentation in :

https://infinite-scroll.com

Hello

Thanks for your guidance :-) Trying to set it up now and will get back shortly.

Rgds

Hi Zakaria,

have tried to implement it , installed the js, and the js script code linked to classes, but the infinity scroll does not work.  www.einsteinsolutions.xyz/chaminuka/public/

Right now you could check the console and see that there's an error there :

infinite-scroll.pkgd.min.js:12 Bad InfiniteScroll path option. Next link not found: .pagination__next

The logic of Masonry with the infinite loop is based on pages, so you need to create those pages then give the links through the path like :

path: 'mylink/page-{{#}}.html'

Select allOpen in new window

The {{#}} is incremented/decremented automatically when you scroll up/down and the pages accordingly load like :

mylink/page-1.html
mylink/page-2.html
mylink/page-3.html

Select allOpen in new window

Official Documentation for "path"

WebPage Test Report for your site shows a few things to consider.

1) Your site uses HTTP2, so your site is already just about as optimized as it's going to get.

2) Start of images is being deferred till after many Javascript assets serve + run.

There may be tricks you can play with Masonry, to start your images serving sooner.

Likely https://isotope.metafizzy.co can provide tips about this.

3) It appears the actual Masonry project has retired + been replaced by Isotope 2 with a packing layout mode of masonry, so if I understand the docs correctly, first step is to ensure you're actually running Isotope 2 with default packing layout mode of masonry set.

In other words, if you're using the old way (Masonry library), deinstall it + switch over to new way (Isotope 2 + masonry layout).

I can't quite tell, at first glance, how your arranging to setup your Masonry layout, so be sure your up to date on your approach.

4) Based on the WebPageTest report, main problem is this page requires serving 240 assets to render the page, so to fix this reduce the number of images.

5) GTMetrix shows 179 images have no height + width set.

This may be the primary problem.

With HTTP2, all images start serving fast.

And this is meaningless when height + width settings are missing, because this means the entire page (HTML component) must download, then 100% of all images download, with start of render being delayed till all images are downloaded.

If you set height + width on all images, page render begins after HTML component is downloaded, because all box size dimensions are known (height + width set for all boxes) rather than having to be discovered/calculated (height + width settings missing).

Hi, Zachari and David thanks for the feedback.  We have implemented isotope 2 and added thumbnails but it is still loading all the images and taking forever to download.  Any idea why?  We created test gallery and on the home it is not working: einsteinsolutions.xyz/chaminuka/public/test-gallery ///// einsteinsolutions.xyz/chaminuka/public/

when I remove isotope and infinity scroll, the page loads a bit faster but yet again loads everything.

Start with WebPageTest.

https://www.webpagetest.org/result/190614_Y1_3ea9f908e3f4682283dcbd49077c97ed/1/details/#waterfall_view_step1 shows you've now added even more assets required for page rendering.

You've now increased from 179 assets to 361 assets.

Since you're already using HTTP2 + the asset staggering looks like there's some delay starting images serving, this might be due to your machine using a slow connection.

Might be disk contention.

Looks like you have several helpful activities.

1) Reduce number of assets you serve.

2) Compress your jpeg files using mozjpeg.

3) Determine bottleneck serving all images, which requires you login to your machine as root + review log files.

Note: Most hosting fails to enable sufficient logging to do #3 + also most hosting disallows root logins.

This means your first step, if this fixing this problem increases profits, will be to switch over to a dedicated server or root LXD container, so you can actually tune your system.

This tends to be a simple process, if all logging has been correctly configured + you use an OS like Ubuntu Bionic with latest Kernel + latest debug tools built by default.

Hi David

Thanks for the response. For now we have implemented through laravel. We are looking at ways to implement the infinity scroll for a better user experience

We implemented pagination but still hope to improve and optimize. Answers here have helped and believe can close this question