Question 300446 in ASP.NET Question posted in
The official documentation can be found here.

Asp.net – Improve Performance of initial page load time with Blazor Webassembly

.Net Blazor WebAssembly sounds really great. It can run fully client-side, meaning there is no need for a dynamic server and one can even host it on a CDN. Even better, it is possible to turn it into an installable PWA. So I looked at some demos and was horrified to find out, that loading an example page on synfusion.com approximately took me 15 seconds with a decent internet connection.
Here is the example: https://blazor.syncfusion.com/showcase/wasm/health-tracker/

I do absolutely understand, that the entire .Net Runtime for Webassembly needs to be downloaded and that this naturally takes some time, and I have already measured, that the time on subsequent loads, when the runtime for the page is already cached, is "only" about 3 to 5 seconds.
This however is still a lot, and in my opinion unusable in a real life secnario. Which user is going to wait for a website that takes 15 seconds to load?

So my question is, there surely must be a built-in way to improve startup time. Maybe one could only load the parts of the .Net Runtime, that are necessary for the Home Page, or whichever page the user requested, to work. I understand thoguh, that this is probably difficult, as the .Net Runtime is most likely very interconnected, and most parts will rely on other parts. I could imagine having a traditional Html/Js/CSS Page served first, until the Webassembly runtime is downloaded. Maybe one can at least display the not yet interactive UI, to give the user a sense of speed? Also, why are subsequent loads taking more than 3 seconds? The runtime should be cached, does it really take that long, to retrieve it from the cache?

If anyone knows how to improve startup time in a .Net Blazor WASM Application, I would be glad to hear a solution, because the default startup time is unbearably long, and at least for me not applicable in any real world scenario, what really is a huge shame.

PS:
I of course have also tried to built my own page and measured the initial startup time and the cached one, which both are faster than the syncfusion ones, but of course the application is also way smaller in size, when compiled and built.

Ah, yeah, and for anyone asking for a minimal reproducible example, take the Web App template in Visual Studio, configured for Interactive render mode = WebAssembly and tick "Include sample pages".

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured it out, .Net 8 solved the problem by introducing a new rendermode called Auto. By just adding the @rendermode Auto directive. This essentially means, that on the initial page load @rendermode InteractiveServer and on every susbequent load @rendermode InteractiveClient is used. On the initial load the server serves the request, and the required wasm is downloaded in the background, and on every forthfollowing request the cached webassembly is used and therefore a connection to the server is not even established. This gives the best of both worlds, the only downside being, that two projects are needed - on for the server and one for the client.


  2. 0

    Here are some techniques you can employ to make things better.

    1. put plenty of static content on the index page to distract the user (or prerender if you have a server)
    2. make sure you do not enable AOT compilation – it will increase the size
    3. lazy load as much of the compiled app as possible (improve initial startup)
    4. don’t use loads of third party libraries that add additional size
    5. Make sure you use dotnet 8
    6. compress everything* (within reason)
    7. manually start Blazor after the site has loaded (while the user is reading all your lovely static content)

    Take a look at the QuickGrid demo site – loads for me in ~400ms https://aspnet.github.io/quickgridsamples/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search