3

For the last couple of days, I've been trying to improve the rendering speed of my Blazor WASM ASP.NET Core Hosted application. I have looked at the following references:

https://github.com/dotnet/runtime/issues/40386

Blazor WebAssembly deserializing is much slower than even the download? What is wrong?

https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-performance-best-practices?view=aspnetcore-5.0#optimize-rendering-speed

There has been very little success in improvements by following the above suggestions and since it's been a while I figured I'd see if anyone had any other answers.

Basically, there is always a "lag" when going to a new page. You click the link, wait a few seconds, and then the page loads. The strange part is even if there are no API calls, there is still a delay. The strangest part though, is when I DO make an API call, the API calls themselves say they take less than a half a second but the actual rendering of the page takes 3-4 seconds. I've been using virtualization and for the most part the pages are fairly trivial (Cards, Grids, etc)... so I'm quite confused at what, if anything, I could be doing wrong to where there is such slow performance. I am new to Web Dev in general so any insight would be much appreciated. For what it's worth, below is a picture of the actual performance where the vast majority of it is "Scripting". Also for what it's worth, I'm using Radzen Components. Ideally, it would be where you click and the page loads right away and the components load as they render but I'm not sure if that's possible with Blazor.

Performance

Dan
  • 746
  • 1
  • 9
  • 14
  • This is hard to answer. How 'heavy' are your pages? Can you esimate the number of controls (including those in hidden tabs etc) Virtualization should solve a lot of issues, are you sure it's working right? – H H Aug 03 '21 at 20:03
  • @HenkHolterman Thanks for the reply! One page is two tabs. The first tab has about fifty fields and the second tab only has a couple of charts. On another page (the biggest culprit), there are 6 cards with about 15 fields in each, and 4 data grids (which only have between 5-10 rows of data in each). – Dan Aug 03 '21 at 20:23
  • That doesn't sound excessive but it's hard to profile from a distance. You could try to make a mock-up of a page w/o Radzen, see if that is a factor. – H H Aug 03 '21 at 20:47
  • But to make this a question for SO, create a [mre] so that others can weigh in. – H H Aug 03 '21 at 20:48
  • Can you please provide an update on whether your issue got solved? I am considering using Blazor for a new product, and learning about your experience can make a big difference on whether to go ahead or not. – zmerr Oct 24 '21 at 15:36
  • 1
    Hey @James - I actually did figure it out. The performance was MUCH improved after figuring out how to use the rendering appropriately. For example, I was having each component inherit from a component initializer which had some shared properties. When you have multiple components loading, it put a really big dent on the rendering speed. After doing that and a few other optimizations, it is lightning fast now (shockingly so!) I'm very happy with Blazor (so are the users) and highly recommend – Dan Oct 26 '21 at 16:32
  • Wow, I greatly appreciate your response. I had seen some underwhelming opinions about Blazor Wasm’s performance online and that had made me stop looking into it. But your positive review is motivating me to reconsider it. May I ask how sophisticated your UI is? I need to implement some sophisticated rich text editing in mine. Would it be suitable? – zmerr Oct 27 '21 at 14:42
  • Would you mind adding a brief note of these magic optimizations you figured out as an answer? – zmerr Oct 27 '21 at 14:44
  • Sure thing James. Basically, I just followed this guide: https://docs.microsoft.com/en-us/aspnet/core/blazor/performance?view=aspnetcore-5.0 The other things were slight "hacks" such as using Task.Delay(1) to unblock the UI thread (https://stackoverflow.com/questions/65131456/blazor-ui-locking). Besides this, I used Radzens free Blazor components for the majority of the site and they have worked wonderfully (https://blazor.radzen.com/). The app is a large claim processing system for a mid sized insurance carrier. It has abt 2 dozen pages and 50ish components. So far it's been great. – Dan Oct 28 '21 at 18:38

1 Answers1

0

I've found that AllowFiltering=true in RadzenGrid makes it much slower so I left AllowFiltering=false by default but showed a button to switch that property by users

Also I found that setting the property FilterPopupRenderMode=PopupRenderMode.OnDemand made it much faster, at least for paging mode, I haven't tested with virtualized mode.

Molem
  • 89
  • 1
  • 3