[PROBLEM] Library loads very slowly on iPad using Safari

[swinokur]

Hey there,
I'm seeing an issue where the library is loading very slowing in Safari on iPad. 

Here's what I'm working with:
- library is 1728 folders, 24560 files
- thumbnail cache is 3223 files, 1612 are _sm.jpg 

iPad OS 15.2 on iPad Pro (10.5")
Wifi is 802.11ac (speedtest pulls about 400mbit to the internet, so I should be fine on the LAN!)

- Moode is on a rpi4

- Desktop performance (Windows, latest Chrome) is fine

- As I scroll the library downwards, instead of seeing text / thumbnails I see a blank page which will eventually fill in with information if I am patient. As I wait for this to fill I will also see other functions on the page stop (playback countdown timer, etc). It takes about 3-4 seconds before the blank area fills. (just counting out loud to measure)

I connected the iPad to a desktop safari machine to try to see if I could get some more data and saw this as I was scrolling:
   

- I notice that the browser is not loading the _sm.jpg tiles -- although the difference in size is apparently not that much:

Code:

pi@moode:/var/local/www/imagesw/thmcache$ ls -l bdf915803dd3ca11127d8bf4b711f986*
-rw-r--r-- 1 root root 1862 Jan 27 23:13 bdf915803dd3ca11127d8bf4b711f986.jpg
-rw-r--r-- 1 root root 1554 Jan 27 23:13 bdf915803dd3ca11127d8bf4b711f986_sm.jpg
pi@moode:/var/local/www/imagesw/thmcache$ ls -l 93d7d1b22328b7ed8447dd9b193d3ba4*
-rw-r--r-- 1 root root 1862 Jan 27 23:14 93d7d1b22328b7ed8447dd9b193d3ba4.jpg
-rw-r--r-- 1 root root 1554 Jan 27 23:14 93d7d1b22328b7ed8447dd9b193d3ba4_sm.jpg

I have tried regenerating the library and thumbnail caches and tags a couple times, as well as rebooting, etc.
thanks!

[Tim Curtis]

Try purging the Safari browser cache on iPad. There is a option in the Safari settings.

I'm not sure how to test the WiFi connection quality between the iPad and your Router though. I assume iPad is using the 5 GHz WiFi band which should have less interference than the 2.4 GHz band. Maybe in the Router WebUI there is command line screen. You could try ping ip_address_of_ipad and see what the ping stats look like.

[swinokur]

Hey,
in ios: settings -> Safari Clear History and Website data
settings -> safari -> advanced -> website data -> remove all website data

no change in safari behavior.

using iperf3 (installed iperf3 on the rpi, and there's an iperf3 for ios), I see this ipad getting ~486mbit/second (symmetric, 5 streams)
(and yes, the ipad is on 5Ghz)

[swinokur]

Some more data points:

- iPad (was on 15.2, updating now) - also tried other browser "skins" (chrome, edge, opera -- but on iOS they're all using webkit under the hood...) -- all have the same issue as described.
- LG G7, Android 9, Chrome 97. Works fine. I can even "request desktop site" - and after a few extra seconds of loading, functions fine.
- iphone 6, iOS 14.8.1, Safari: same "delay behavior" as described
- iphone 6S, iOS 13.6.1, Safari: performs fine

I'm updating the iPad to 15.3 to see if there's any change.
- iPad now on 15.3: same behavior

This is seeming like there's something that changed in safari that may be causing some issues?

[swinokur]

Another update:
I think I have found a workaround - there is a web development/testing tool on IOS: http://mihtool.com/
(appstore link here: https://apps.apple.com/us/app/mihtool/id584739126?ls=1)

I installed this tool, opened it - which gives a safari type UI with different borders.
(There are a bunch of developer tools there, including the ability to change user-agent - which might be useful).

Moode's interface inside *this* browsing window works fine.

(Sheesh, safari.)

Additionally (and kinda neat!) mihtool will let its browsing window go into full-screen mode - and will let the keyboard keep working (which I think Safari won't allow.). So now I have a nice full-screen Moode interface on ipad, and the keyboard pops up for searching.

[Tim Curtis]

That's interesting. Do you have any Safari plugins or ad blockers running that might be causing the performance issue?

[swinokur]

Hey,
No safari plugins or adblockers on any of the devices I tested. It is very interesting that Safari on iOS 13 works fine.

Does the Moode UI do any user-agent checking & change behaviors based on user-agent?

On the iPad I even went through all of the "experimental features" and tried toggling them all off (made no difference), and toggled them all on (one of which caused the page to not load at *all*).

If there are any sorts of useful debug traces to gather from the RPi side, please let me know what to enable and send over.

[Tim Curtis]

Theres no user-agent checking but there is a test to determine whether the Browser supports native lazy loading for images. The default is GLOBAL.nativeLazyLoad = false which results in a Javascript routine doing the image lazyload instead of the internal Browser code. Maybe the  JS routine is slower???

Code:

   // Check for native lazy load support in Browser
   // @bitkeeper contribution: https://github.com/moode-player/moode/pull/131
   if ('loading' in HTMLImageElement.prototype) {
       GLOBAL.nativeLazyLoad = true;
   }

You could try editing /var/www/js/main.min.js, search for HTMLImageElement and then add a console.log statement after the closing brace of the if block that will print the value of GLOBAL.nativeLazyLoad.

console.log(GLOBAL.nativeLazyLoad);

[swinokur]

Gotchas,
I added that - and while I didn't see any automatic output in the developer console, I did query the value:

Here's Chrome on Windows to start:
   

Here's the ipad connected to a safari remote debugger:
   

The built-in tools in MIHTool weren't super useful themselves - but the fact that the page loads properly inside that Apps Browser is very useful.

I ended up using remotejs to get a console (remotejs.com) - add a line of HTML to indextpl.min.html and the remote
console wakes right up.
   

It seems that nativeLazyLoad is False inside MIHtool.
I changed 
(GLOBAL.nativeLazyLoad=!0) to (GLOBAL.nativeLazyLoad=!1) (that is, globally false)
restarted nginx and php,.

the remotejs console now reports as false:
   

But the poor loading performance in Safari still persists.

I do notice that on the top right of the remoteJS tool that when MIH tool is running the browser is identified as "webkit" versus "mobile safari."

[Tim Curtis]

Are you able to install Chrome Browser on your iPad and does it also exhibit the performance issue?