Slow response on mobile device when clicking menu, notifications, reactions during initial page load

[Clover13]

I know some of this is the nature of mobile vs desktop related hardware and network, but are there any other areas I can look to tune for getting more responsiveness out of the hamburger menu, notifications, and reactions popups?  Seems like on mobile, these are really slow to popup when clicked.  I can't tell if it's a server resource issue, a config issue, or simply a device/network issue.

Any suggestions on where to look would be great!

[Jim M]

Keep in mind that anything that you load on your page on a mobile device is going to delay interaction. You have quite a few advertisements which can cause slowness waiting for them to load and/or as they are interactive advertisements going to be heavier too for mobile users' devices

 

[Clover13]

24 minutes ago, Jim M said:

Keep in mind that anything that you load on your page on a mobile device is going to delay interaction. You have quite a few advertisements which can cause slowness waiting for them to load and/or as they are interactive advertisements going to be heavier too for mobile users' devices

 

Understood.  I did push the primary ads from async to deferred loading.  I also eliminated some ad JS from other networks where maybe the cost (performance degradation to members) to benefit (revenue) wasn't worthwhile.  That definitely knocked down blocking time.  There is something else that is holding up interactions that I'm tracking down, I see it on mobile where the page has not fully loaded and the menus, link clicks, etc don't respond as result OR they respond very laggy (likely due to resource/bandwidth contention).  

 

[Joel R]

You may want to ping providers like @ASTRAPI or @Driven 2 Services who specialize in hosting.  

Is your mobile site slower than, say, IPS or another Invision site like Cruise critic? 

[Clover13]

17 minutes ago, Joel R said:

You may want to ping providers like @ASTRAPI or @Driven 2 Services who specialize in hosting.  

Is your mobile site slower than, say, IPS or another Invision site like Cruise critic? 

I occasionally see similar menu lag here on the IPS site but not as bad or frequent as on mine. But IPS isn't running ads or much third party JS.  I'll try to locate some other IPS sites to compare 👍

[Driven 2 Services]

There are so many different reasons a mobile version might be slower.

Try this on desktop Chrome:

Menu -> More Tools -> Developer Tools -> Network tab

Change the throttle to Fast 3G.  Put the view into a phone view.  Now load your site.  Is the menuing slow?  Turn off throttling, reload and try the menu again.  Is it fast?

[Clover13]

1 hour ago, Driven 2 Services said:

There are so many different reasons a mobile version might be slower.

Try this on desktop Chrome:

Menu -> More Tools -> Developer Tools -> Network tab

Change the throttle to Fast 3G.  Put the view into a phone view.  Now load your site.  Is the menuing slow?  Turn off throttling, reload and try the menu again.  Is it fast?

In Fast 3G, the longer running server-sided assets are taking anywhere from 2 seconds to almost 6 seconds:

root_front.js: 2.74 seconds
root_framework.js: 5.32 seconds
root_library.js: 5.33 seconds
/uploads/themes/set_resources_2/6124cbf62e7d0ac97bcb319cb54179a7_fa-solid-900.woff2:  5.85 seconds

With no throttle, they're all under 100ms.

The timings above for the Slow 3G do align with the relative time it takes for the menu to become responsive.  There are a lot of clicks that are taken in that time period that just don't register, I'd imagine because the page hasn't completed loading all of it's assets.  The painting of even the small icons and avatar images is also gradual top down fill-in.

[Driven 2 Services]

Based on this, I'm inclined to think that even if you have fast transfer rates for your wireless connection with 4G or 5G speeds, there's probably a lot of latency on the connection.  Sometimes this is from many people sharing the same local tower.

One thing that can help is making sure your web server supports HTTP/2 connections.  One of the goals with HTTP/2 was reducing latency with wireless connections.  Brotli compression will help somewhat as well.  If these settings are not available to you (generally you need a dedicated server or VPS), then if you're not using Cloudflare I highly recommend considering it.

The free tier is more than sufficient for most forums, and includes HTTP/2 as well as Brotli.

[Clover13]

1 hour ago, Driven 2 Services said:

Based on this, I'm inclined to think that even if you have fast transfer rates for your wireless connection with 4G or 5G speeds, there's probably a lot of latency on the connection.  Sometimes this is from many people sharing the same local tower.

One thing that can help is making sure your web server supports HTTP/2 connections.  One of the goals with HTTP/2 was reducing latency with wireless connections.  Brotli compression will help somewhat as well.  If these settings are not available to you (generally you need a dedicated server or VPS), then if you're not using Cloudflare I highly recommend considering it.

The free tier is more than sufficient for most forums, and includes HTTP/2 as well as Brotli.

Thank you.  Yeah this is a high traffic area of the Northeast US, so large numbers of people sharing the same local tower is very common.

I do use Cloudflare for both of my sites, one is on the Pro plan and the other on the Free.  All of these are enabled for them.

• HTTP/2    
• HTTP/3    
• HTTP/2 to Origin    
• Enhanced HTTP/2 Prioritization  (Pro plan only)
• Brotli    
• 0-RTT Connection Resumption    
• Always use HTTPs    
• TLS 1.3    

The main one I make sure I disable is Rocket Loader.

 

I think the main thing I'm troubleshooting right now are the ads JS own third party calls.  Regardless of using defer or async on the parent ads JS, I see a commonality of some third party calls (to other JS, gifs, etc) made by the ads JS at runtime that take long periods of time before they complete or fail.  I'll note the browser status bar is still waiting to complete until these finish and during that time the menus, link clicks, reactions, etc are impacted and either unresponsive or slow to respond (and not very snappy when they do appear).  For the PWA since there is no status bar, it just hangs there like maybe you didn't click or maybe you tried to click but misclicked but in reality it's all just lagging but you have no way of knowing that.

 

[Adlago]

On 9/11/2023 at 5:44 PM, Clover13 said:

Any suggestions on where to look would be great!

Please share a link to your site (perhaps on PM) - so I can research in my own way.