Search…

X3 Photo Gallery Support Forums

Search…
 
drzylvon
Experienced
Posts: 52
Joined: 11 Feb 2014, 15:01

Re: X3 Release [0.21] :musical_note:

08 Jan 2017, 05:15

Hello Karl, 

Slowling finding time for setting up X3...
A possible bug report : 
-Although I set the sort order on Filename, it happens that all video files of a gallery are put first in the gallery. It displays correctly sorted in the panel view.  
Example in http://catbag.net/sylvain/photos/galleries/Chine2015/  - videos are named just like the picture : somename-[numbering].

Some questions/requests : 
-Also, I noticed the video files start buffering automatically. I personnaly find this unnecessary, could there be an option implemented so that video files aren't buffering automatically? 

-prefetching vs lazy  
On the justified layout, it looks to me you're loading the next row of pictures "out of screen". Is it pure lazy loading within a virtual area or did you implement some sort of prefetch of "one row extra?"
I'd be interestd in having a way to have some more prefetching. I find we see the "loading icon" pretty often even at a decent scrolling pace. Would it be possible to select how many more pictures one wants to prefetch?  e.g. -10 pics & +30 pics ? 
I saw on the carousel option that you allowed for a check box "lazy load", granted it's for a much smaller amount of pictures. 

Thanks ! 
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: X3 Release [0.21] :musical_note:

08 Jan 2017, 05:57

drzylvon wrote:A possible bug report :
-Although I set the sort order on Filename, it happens that all video files of a gallery are put first in the gallery. It displays correctly sorted in the panel view.
Example in http://catbag.net/sylvain/photos/galleries/Chine2015/ - videos are named just like the picture : somename-[numbering].
Currently, this is how it works ... Videos are not really part of the gallery layout, and must display separately, either before all gallery images, or after. Why? Because videos are HTML5 video tags embedded directly into the page, whereas images are clickable links that open in popup. We can't just add the videos into the specific gallery layout you are using, may it be justified, slideshow or grid. These layouts require images with dimensions so we can calculate the layout. Add the limitation that your server is not capable of creating thumbnails for videos, so this is how it is.

In the future, we will look into improving video support in X3. I would recommend separating videos, also because its better for the visitor to have videos and images clearly separated, so they know what they are clicking.
drzylvon wrote:-Also, I noticed the video files start buffering automatically. I personnaly find this unnecessary, could there be an option implemented so that video files aren't buffering automatically?
You are right. I should be able to fix this, as HTML5 video has a preload option. Expect this to be fixed in next release available this month.
drzylvon wrote:On the justified layout, it looks to me you're loading the next row of pictures "out of screen". Is it pure lazy loading within a virtual area or did you implement some sort of prefetch of "one row extra?"
Yes, it does start loading images that are within visible viewport + a certain margin below visible viewport.
drzylvon wrote:I'd be interestd in having a way to have some more prefetching. I find we see the "loading icon" pretty often even at a decent scrolling pace. Would it be possible to select how many more pictures one wants to prefetch?  e.g. -10 pics & +30 pics ? 
This would of course come at the cost that the "first" visible images loading will load and display slower. If the website has to load 10 images at the same time, instead of 5, then the 5 first images (usually the ones in viewport), will take twice as long to load. Add the fact that, unless you are using SSL, your web server normally only allows up to 6 simultaneous TCP connections. Increasing "prefetch" would likely make more of a difference if the visitor is not scrolling (yet), or scrolling very slowly .... but if they are scrolling at "decent" scrolling page (I assume you mean relatively fast?), there is no reason to believe that images will load faster since they are being loaded at max throttle from your server ... It just means the first images may take longer time to load since they are sharing bandwidth with the last images which are not in viewport yet.

Important
I would like to note, that if you are setting up a NEW X3 website, you need to take into consideration that images are being PROCESSED for the first time on server. This means that all images will be especially slow on first view, because they won't even start loading until your server has resized them, and started to ship them towards browser. Thus, if you scroll quickly through a NEW page, and the browser requests for example 10 images, your server needs to process the resized image before output, and loading will be relatively slow.

To get a feeling of how fast images will load after this initial phase, try this: Load a new page, scroll through all images, and wait for them all to load. THEN, refresh the page (in a private browser if you wish, to make sure images are not served from your browser cache), and you should see a substantial difference in the speed of images loaded.

This is a general rule of X3: When creating the website with lots of new pages and images, things will be a bit slow, because pages need to get processed and cached, and images need to get resized. Eventually, everything will speed up nicely.
drzylvon wrote:I saw on the carousel option that you allowed for a check box "lazy load", granted it's for a much smaller amount of pictures.
Yes, this is generally because the carousel is often used for crucial "presentation"-style features, where it's undesirable to have images load only after visitor navigates through the carousel.

We could possibly include two new lazy-load options:

Disable Lazy Load
This means ALL images on page will load into browser on page load. I don't like this feature, because it means the page document itself doesn't complete loading until all images are loaded. This is not good for pages with dozens of images which may be several MB in total ... Also, if a visitor arrives on a page with hundred images, and isn't really interested in viewing all images, they will still load.

Non-scroll Lazy Load
Another option is to still use a "lazy load", but simply load ALL images after page (document) load, regardless of scroll. It still means all images will always load, but it will not block document load ... slightly better.

All-in-all, a well-balanced, scroll-based lazy-load feature is the most "friendly" solution.
 
drzylvon
Experienced
Posts: 52
Joined: 11 Feb 2014, 15:01

Re: X3 Release [0.21] :musical_note:

08 Jan 2017, 10:09

Karl, 

First and foremost, I must apologize for I have overlooked an important thing  : I wish you a happy and successful 2017 year where your hard work is rewarded. 

Now for the answers : 
-A video could have a "default icon" with default dimensions. It's actually the way X2 was doing it. I want to let X2 go, don't worry :-) but I'm just saying that it was quite ok then. X2 was also playing videos in the slideshow/popup and the videos were following sort order. 
[attachment=0]X2vids.png[/attachment]
-As for distinguishing between pictures & videos : it's elegantly made on flickr, I think. A play icon overlay?
As seen on  : https://www.flickr.com/search/?text=videos

-Another way could be to have the user select a "poster" file for video files. Combine the user defined poster file with the play icon à la Flickr?
Just giving some options here... 

-Thanks for the disable auto buffering. 

-Thanks for the heads up on the "first load of a page" but I was aware of that.
Hmm tough topic here. I got to this point because I'm currently in vietnam and my server is hosted in europe. I now have a longer response time and it seems to me that in average, the lazy loading strategy seems less efficient to me now. I do see a lot of loading. Obviously less so when I was on a blazing fast connection.
The reasoning is as follows : the user "hawks over the gallery" for long enough that prefetching could be in use during that time and be more efficient than lazy loading. So it's a case of slow scrolling on a slow bandwidth where it might be beneficial to prefetching. See what I mean? I haven't went deep in proving & measuring this... My intuition is that even a relatively fast scrolling (while still looking, not "fast forward" scrolling) might benefit from it. Hard to quantify. Something to benchmark perhaps? 

Greetings, 
S. 
Attachments
X2vids.png
X2vids.png (631.73 KiB) Viewed 15456 times
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: X3 Release [0.21] :musical_note:

08 Jan 2017, 10:54

First of all, I have noted down your video suggestions, and will look into them in a larger X3 update this spring. I only want to comment on lazy loading:
drzylvon wrote:-Thanks for the heads up on the "first load of a page" but I was aware of that.
Hmm tough topic here. I got to this point because I'm currently in vietnam and my server is hosted in europe. I now have a longer response time and it seems to me that in average, the lazy loading strategy seems less efficient to me now. I do see a lot of loading. Obviously less so when I was on a blazing fast connection.
The reasoning is as follows : the user "hawks over the gallery" for long enough that prefetching could be in use during that time and be more efficient than lazy loading. So it's a case of slow scrolling on a slow bandwidth where it might be beneficial to prefetching. See what I mean? I haven't went deep in proving & measuring this... My intuition is that even a relatively fast scrolling (while still looking, not "fast forward" scrolling) might benefit from it. Hard to quantify. Something to benchmark perhaps? 
Just on a related note: Did you try Cloudflare? It might cache some of your images on a server closer to Vietnam, for example Hong Kong.

How can you be sure things will seem to load faster if "lazy load" was more or less disabled? Sounds to me like its VERY slow if you are waiting around, so if you have a page of 50 images, that would be painstakingly slow also if you try to load all those images up front. Ultimately, we are speaking here of a bandwidth-hungry gallery-website like X3, which simply is not serving high-quality-images fast enough from Europe all the way to the other side of the world, in Vietnam. I think you will never find an ultimate solution for this, as long as you have shared hosting, unless you use a CDN service (which to be honest, would not cost you much).

If you could open network inspector, and check how long time it takes to download an image of X size, we could do some math. To me, it sounds like things are loading really slow for you (Eur->VN), and I can't really see that anything will make a huge impact here either way. If we start loading 50% more images below the fold, the visitor will still scroll to that point, and get to the threshold where visitor is scrolling faster than images are loading, regardless.

I don't disagree with your theories, but I can't see how we can make a compromise that is generally beneficial. These things are already studied in depth by websites like http://www.bbc.com, where it is a super-important feature, tweaked to the max. On BBC, it seems like they preload a similar offset of images (as X3) below visible viewport area. Of course, they have super-fast servers, small highly compressed images, and use Content Delivery Networks.

I will take a look into settings for lazy-loading soon, and maybe make some adjustments. We could perhaps extend the lazy-load amount slightly, but it may have to depend on important factors like retina-screen (loads much larger images), mobile devices, specific gallery layout, and amount of images. Not 100% sure how these factors can be combined to decide how many images are lazy-loaded though.
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: X3 Release [0.21] :musical_note:

10 Jan 2017, 00:18

Just for reference, while I have this post open, we have now changed so that <video> in X3 uses preload="metadata". This generally hints to the browser that the video should only preload it's metadata (including preview image). It varies a bit how browsers interpret this attribute, but generally speaking, it prevents downloading the entire video. Read more:
https://www.stevesouders.com/blog/2013/ ... o-preload/
http://www.w3schools.com/tags/att_video_preload.asp

There will be a small X3 release by the end of the week. 
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: X3 Release [0.21] :musical_note:

21 Feb 2017, 21:44

drzylvon wrote:Also, I noticed the video files start buffering automatically. I personnaly find this unnecessary, could there be an option implemented so that video files aren't buffering automatically?
Should be solved in X3 0.22:
https://forum.photo.gallery/viewtopic.php?f=51&t=9237
drzylvon wrote:prefetching vs lazy
Also the lazy-loader has been updated in the X3 0.22 release. Not much has changed logistically, although we increased the "threshold" slightly in regards to how far below the visible screen area images are preloaded. We also implemented so that at least one invisible image is preloaded.