Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blazor WASM terrible runtime performance from mobile browser #43090

Closed
1 task done
ScottKane opened this issue Aug 4, 2022 · 11 comments
Closed
1 task done

Blazor WASM terrible runtime performance from mobile browser #43090

ScottKane opened this issue Aug 4, 2022 · 11 comments
Labels
area-blazor Includes: Blazor, Razor Components feature-blazor-wasm This issue is related to and / or impacts Blazor WebAssembly Needs: Author Feedback The author of this issue needs to respond in order for us to continue investigating this issue. Status: No Recent Activity

Comments

@ScottKane
Copy link

ScottKane commented Aug 4, 2022

Is there an existing issue for this?

  • I have searched the existing issues

Describe the bug

When deploying my app to Azure app service and accessing via a PC web browser, performance is fine, everything feels responsive and button clicks are immediate. When accessing from a mobile browser it's a completely different story. Clicking any button takes 4-5 seconds to do anything (which would be kind of ok if these buttons were making web requests, but they're not, they are just opening modals), on click events sometimes don't even fire at all so you have to press buttons multiple times for anything to happen. I've AOT'd the app to try and improve things but from what I can see, runtime perf is no better but users have to wait 30 secs to initially load.

Client has the following build configuration:

<RunAOTCompilation>true</RunAOTCompilation>
<InvariantGlobalization>true</InvariantGlobalization>
<BlazorEnableTimeZoneSupport>false</BlazorEnableTimeZoneSupport>
<BlazorWebAssemblyPreserveCollationData>false</BlazorWebAssemblyPreserveCollationData>

The story is the same with the simplest of apps, create an app using the MudBlazor template (https://github.com/MudBlazor/Templates), deploy to the web and access via a mobile browser. See the delay on button presses.

This terrible performance is from a OnePlus 6T so not even a low end device. Something needs to be addressed here as this is unacceptable for a production app.

Expected Behavior

I expect button clicks to be responsive (certainly not taking 4-5 seconds)

Steps To Reproduce

No response

Exceptions (if any)

No response

.NET Version

6.0.302

Anything else?

No response

@javiercn javiercn added area-blazor Includes: Blazor, Razor Components feature-blazor-wasm This issue is related to and / or impacts Blazor WebAssembly labels Aug 4, 2022
@javiercn
Copy link
Member

javiercn commented Aug 4, 2022

@ScottKane thanks for contacting us.

Do you experience the same type of problems with a new app created from the template that does not involve MudBlazor?

@SteveSandersonMS
Copy link
Member

@ScottKane One quick check you could do would be visiting https://aspnet.github.io/quickgridsamples/ from your device. That doesn't involve MudBlazor so it might help to diagnose whether the issue is specific to MudBlazor or not.

@ScottKane
Copy link
Author

@SteveSandersonMS Accessing that site from mobile is better but still has a delay of 2-3 secs on button presses, it doesn't seem to eat on click events though which would be an improvement.

@ScottKane
Copy link
Author

Even if the issues are being caused by MudBlazor, I'm struggling to figure out what they could be doing that's making the perf this bad on mobile but not on desktop browsers. Their components are structured fairly similarly to my own with no glaringly obvious issues.

@ScottKane
Copy link
Author

Actually testing the experience from a PC browser emulating a low/mid end device shows pretty much the same behaviour

@SteveSandersonMS
Copy link
Member

Accessing that site from mobile is better but still has a delay of 2-3 secs on button presses
Actually testing the experience from a PC browser emulating a low/mid end device shows pretty much the same behaviour

I've no doubt you can find devices or set a CPU throttling level such that it becomes slow. And it's good that you're testing to see how things will work on the specific devices you care about.

Nonetheless I am still surprised about the 6T taking multiple seconds to navigate. I tried just now with a fairly low-spec mobile device (iPad Air 2, 8 years old) and it was more or less fine. The first navigation click did take maybe 800ms to complete (which is when it will be caching the interpreter-transformed instructions), but subsequent navigation clicks went down to somewhere between instant and 200-300ms depending on which page. It felt as fast as any other website on this old device. Of course, on a more recent device - a 3-year old iPhone - it was instant from the start.

According to https://browser.geekbench.com/, your OnePlus 6T should be a bit faster than an iPad Air 2, though admittedly only about 1/3 the speed of a recent iPhone. So I guess there must be something more to it than just the CPU benchmarks.

@ScottKane
Copy link
Author

The default MudBlazor sample app is nowhere near as slow as my production app, the only thing I can think is that I have CascadingAuthenticationState and CascadingValue Value="_hubConnection". I imagine these cascading values are what's slowing things down dramatically but I will have to do some testing to figure out if that is the case. I don't know what alternatives there are if this is the problem though.

@MackinnonBuck MackinnonBuck added the Needs: Author Feedback The author of this issue needs to respond in order for us to continue investigating this issue. label Aug 4, 2022
@ghost
Copy link

ghost commented Aug 4, 2022

Hi @ScottKane. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

@MackinnonBuck
Copy link
Member

@ScottKane Please let us know if you end up tracking down the issue and it turns out to be a framework issue.

@timbze
Copy link

timbze commented Aug 4, 2022

visiting https://aspnet.github.io/quickgridsamples/

Very fast on my Pixel 3. Every action is < 500 ms

@ghost
Copy link

ghost commented Aug 9, 2022

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

See our Issue Management Policies for more information.

@ghost ghost closed this as completed Aug 12, 2022
@ghost ghost locked as resolved and limited conversation to collaborators Sep 11, 2022
This issue was closed.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area-blazor Includes: Blazor, Razor Components feature-blazor-wasm This issue is related to and / or impacts Blazor WebAssembly Needs: Author Feedback The author of this issue needs to respond in order for us to continue investigating this issue. Status: No Recent Activity
Projects
None yet
Development

No branches or pull requests

5 participants