Giving Your App a Speed Boost

Software that is fully functional is not always ready enough to ship. The app must open, let the user navigate between the pages, and update the data in the UI quickly enough to satisfy the user’s expectations.

Blazor WebAssembly provides a set of features for optimizing the performance of the app, in addition to some tips that you can follow in the development phase that will increase the speed of your app significantly. This chapter covers some complex and specialized topics that are useful for creating apps where high performance and efficiency are the key. You may not encounter these situations often, but they are important to learn about so you are fully equipped and ready to handle any challenge that comes your way.

We will start this chapter by introducing the Virtualize component, in addition to some guidelines to help increase the efficiency of your Blazor components, especially when working on large-scale and data-intensive applications...

Technical requirements

The Blazor WebAssembly code and the API project used throughout this chapter are available on the book’s GitHub repository in the Chapter 11 folder:

https://github.com/PacktPublishing/Mastering-Blazor-WebAssembly/tree/main/Chapter_11/

Make sure to have the API solution up and running beside the Blazor app.

Increasing components’ efficiency

The first thing to do is to improve the speed of the component rendering process. Because, in Blazor WebAssembly, the rendering process happens fully in the browser, controlling the process of rendering can increase the overall speed of the app, especially in large, rich, and complicated UIs.

We will start this section by learning about the out-of-the-box Virtualize component. Then, we will learn some tips to keep in mind while developing Blazor components to maximize their efficiency.

Virtualize component

If you have a UI that renders a table with a large number of rows or a collection of UI components through a loop, the component will be slow and laggy because of the huge number of UI elements, especially while scrolling. One way to see this problem in action is to look at a chat or social media app. Imagine if the app loaded all 5,000 messages in a chatroom, or displayed all the posts in a newsfeed at once. That would create thousands...

Rendering optimization with ShouldRender

In order to introduce the ShouldRender method and explain how to use it, first, we need to understand how parameters and events can affect the rendering of components in Blazor.

Blazor components exist in a hierarchy, with a root component that has child components, each child component can have its own child components, and so on. The re-render happens in the following scenario:

• When a component receives an event or a parameter changes, it re-renders itself and passes a new set of parameter values to its child components
• Each child component decides whether to re-render or not based on the type and value of the parameter values it receives:
  • If the parameter values are primitive types (such as string, int, DateTime, and bool) and they have not changed, the child component does not re-render
  • If the parameter values are non-primitive types (such as complex models, event callbacks, or RenderFragment values) or they have changed, the...

Decreasing the initial download size with assembly lazy loading

In single-page applications in general and Blazor WebAssembly specifically, the full app packages, scripts, and stylesheets are downloaded for the first time to the browser so the app is fully functional on the client side. The average Blazor WebAssembly app has a size of 2 MB when it is published. That’s not very big, but when the app gets more complicated and more packages and assemblies are involved, the size can increase significantly.

In this section, we will learn about Blazor WebAssembly’s lazy loading feature, which was released in .NET 6.0 to help reduce the initial download size to make first-time loading faster. Additionally, Blazor provides some out-of-the-box features, such as runtime relinking, compression, and trimming, that decrease the app size, but we will cover those features in the Blazor WebAssembly app prerelease final checks section Chapter 14, Publishing Blazor WebAssembly Apps...

Summary

This chapter discussed the importance of optimizing the performance of a software application beyond ensuring that it is fully functional. The focus was on Blazor WebAssembly and the various features it provides to help improve app performance. The chapter covered three main areas: increasing component efficiency, rendering optimization with ShouldRender, and decreasing app size with lazy loading. The Virtualize component was introduced, along with guidelines for improving Blazor components’ efficiency, especially in data-intensive applications. The ShouldRender method was also discussed. We highlighted its importance in controlling and optimizing the rendering process to improve app performance. Finally, the chapter explored Blazor’s lazy loading feature, which reduces the app’s initial size and speeds up the load time.

After completing this chapter, you should be able to do the following:

• Understand the importance of performance in Blazor WebAssembly...

Further reading

• ASP.NET Core Blazor performance best practices: https://learn.microsoft.com/en-us/aspnet/core/blazor/performance?view=aspnetcore-7.0