X3Photo Gallery Forums

Martin wrote:16 seconds:
http://erikfotografie.nl/bedrijfsfotogr ... otografie/

6 seconds:
https://demo.photo.gallery/examples/gallery/vertical/

These tests are from accessing the links above directly? Would be cool to have them tested when accessing them from WITHIN the application itself (from another page). If you access the links directly, the duration includes loading and initiating the entire X3 application and CSS, and rendering the first page. It would be good to get a timing from when clicking the link within the gallery, until the first image loads.

Also, was your timing based on when the first image loaded?

mjau-mjau wrote:These tests are from accessing the links above directly?

Yes

mjau-mjau wrote:Would be cool to have them tested when accessing them from WITHIN the application itself (from another page).

I also did the other test... See my previous post

mjau-mjau wrote:Also, was your timing based on when the first image loaded?

Well, the images almost come together at once, so yes..

I did some more research into this issue, and I have found the culprit after experiencing some slowness myself when viewing from an iPad. The issue is related to the justified layout plugin, and the heavy element sizing calculations it needs to make in javascript, directly proportional with the amount of items in the justified layout, proportional with the CPU speed of the device the page is being viewed from. On my Ipad mini (generation 3), it took 7-8 seconds for the layout to render, before the first image starts loading.

This issue was a bit hard to discover initially from reports, because it is neither related to "page load" speed, or "image load speed" in pure technical terms. It is in fact the item layout rendering process that occurs AFTER the page has loaded, but BEFORE the layout displays. Furthermore, this issue is entirely unrelated to your server speed, and the size of the images you are using. Instead, it is 100% related to the CPU of the device that is trying to render your "justified" layout. Technically, this is not a "load" issue at all, but a "render" issue.

TEST
Just to confirm this, try to remove the "justified:x" tag in your gallery setting for this page, and then try to load the gallery from mobile. Although the layout is simply 'vertical', I think you will find that the page starts rendering images much faster?

Solution?
We are using a plugin for the "justified" layout (http://collageplus.edlea.com/ / https://github.com/ed-lea/jquery-collagePlus), and unfortunately, creating a justified layout will always be a javascript CPU-intensive task, especially noticeable on mobile devices. I will be amending this plugin shortly, because I need to fix the "orphan" bug, and at the same time I will see if there are any optimizations that can be included. It is however unlikely that we can make a huge impact on the render-speed of the justified layout for slower devices, but I will try.

There are some workaround solutions: 1) Somehow render the justified layout in groups, separating sections with for example 10 images in each section. 2) Reverting to a different layout for mobile devices. 3) Somehow add images in chunks on scroll

Unfortunately this is not an issue we can simply shake the magic wand at, but thanks for bringing this to attention nevertheless.

mjau-mjau wrote:TEST
Just to confirm this, try to remove the "justified:x" tag in your gallery setting for this page, and then try to load the gallery from mobile.

Why then is my site performing faster (than Erik's) on my iPad(3)?
My site has The difference I (think I) notice with Erik's site and mine is that the images in his gallery come up all together at once..
So.. there's nothing, white space... then after a while you see them all shining through and then 'plop' ... there they are... all at once.
On my site I mostly see waiting cursors per image and they come one after another...

Martin wrote:Why then is my site performing faster (than Erik's) on my iPad(3)?

That is the whole point, that the delay is proportionally related to the amount of images in the justfied layout, and also why Erik specifically notes the reclamefotografie, which seems to have more than 100 images. How many images are in the gallery you are comparing it to?

This "slowness" issue, basically occurs with the justified layout when there are a lot images, and primarily from mobile devices with slower processors.

Martin wrote:My site has

Code Select all

gallery		: wide hover seperator justified:300,50 frame shuffle

As mentioned, the justified layout will render slowly on mobile devices, but only if there are a lot of images ...

Martin wrote:The difference I (think I) notice with Erik's site and mine is that the images in his gallery come up all together at once..

This is unrelated. Technically speaking, while the justified layout is "being rendered" taking several seconds in Erik's reclamefotografie folder, images may still be loaded in the background. This means that once the justified layout is "ready" after the "long delay", many of the images may already be loaded once the layout does render. In your case, with less images, the justified layout would likely render earlier, thus less images are loaded once the layout becomes visible. This is just an approximation.

Martin wrote:So.. there's nothing, white space... then after a while you see them all shining through and then 'plop' ... there they are... all at once.
On my site I mostly see waiting cursors per image and they come one after another...

Yep, well what can I say? I have studied it, and the "delay" is definitely the slowness of rendering 100s of images in a justified layout ... Its not anything else, and as you have read my previous posts also, there is not really any logical reason for it to be anything else either. Once the justified layout is rendered, it doesnt mean the first image starts loading then ... First image could have started to load from the render calculation begins ...

Doesn't it make somewhat sense to you?

mjau-mjau wrote:Doesn't it make somewhat sense to you?

Yes, it makes sense.
I compared it to a gallery with some 60 images.
Bottom line: justified with 100s of images needs a lot of processor strength and mobile devices mostly don't have that.

elpd wrote:I really like the justified layout so I hope at some point you can make some improvements to make it faster.

I believe we should be able to make it much faster ... We will be looking into this in next release v0.10. Enjoy your holidays!

elpd wrote:Thanks Karl / Bedankt Martin!

Hi Erik. I just wanted to note that we have fixed the Justify layout to render many times faster than before. In my tests from a fast macbook, I was reviewing render times going down from 100 ms to 20 ms (5x times faster). I am looking forwards to test it with more images and from other devices after launch of version v0.13 ...

We have also fixed the orphan bug in the Justified layout.

elpd wrote:That sounds very promising... I'm looking forward to implement the update and test it! When do you think it's available?

We are attempting to launch "release candidate", so it may not be available until the end of July. Many fixes and new features cascade each other, so it is a bit impractical with an intermediate release before.

I just wanted to note that the slowness in the justified layout is likely fixed. In fact, I found some stuff in the justified plugin which was creating unnecessary processing.

mjau-mjau wrote:... I was reviewing render times going down from 100 ms to 20 ms (5x times faster)
....We have also fixed the orphan bug in the Justified layout.

...GREAT!
...GREAT!