Blazor Performance Optimizing Your Blazor Website

  • Peter Himschoot

Your browser needs to be JavaScript capable to view this video

Try reloading this page, or reviewing your browser settings

You're watching a preview of subscription content. Log in to check access

This video presents patterns and practices for making Blazor WebAssembly applications run fast at their optimal speeds. You’ll learn patterns and best practices for performance that broadly cover two aspects of Blazor development: Firstly, you’ll learn about optimizing application download size so your applications load and execute without undue lag. Secondly, you’ll learn techniques for reducing the number of updates that Blazor needs to apply to user interface elements in the browser’s DOM.

While Blazor WebAssembly is already designed to provide strong performance, the techniques in this video provide you additional tools and techniques that you can employ in order to delight your users and gain a competitive edge against your competition. Techniques taught in this video such as assembly trimming, lazy loading, and reducing unnecessary user interface updates can put your applications a step ahead of your competition when it comes to creating fast applications that users will want to return to again and again.

What You Will Learn

  • Work with lazy-load assemblies to incrementally download your application’s code

  • Use virtualization to avoid rendering UI elements not currently visible

  • Create lightweight components that reduce unnecessary UI updates

  • Reduce unnecessary rendering of component subtrees

  • Optimize JavaScript interop speeds

  • Limit the number of components and reduce frequent events

Who This Video Is For

Blazor developers who have experience building WebAssembly applications. Especially for those developers who want to gain an edge on their competition through faster application performance.

This video presents patterns and practices for Blazor performance so your applications can run at their optimal speeds.

About The Author

Peter Himschoot

Peter Himschoot works as a lead trainer, architect, and strategist at U2U. Peter has a wide interest in software development that includes applications for the web, Windows, and mobile devices. Peter has trained thousands of developers, is a regular speaker at international conferences and has been involved in many web and mobile development projects as a software architect.

 

Supporting material

View source code at GitHub.

About this video

Author(s)
Peter Himschoot
DOI
https://doi.org/10.1007/978-1-4842-6977-0
Online ISBN
978-1-4842-6977-0
Total duration
1 hr 12 min
Publisher
Apress
Copyright information
© Peter Himschoot 2021

Related content

Video Transcript

[MUSIC PLAYING]

Hi, everyone. In this video, I want to talk about how we can create fast websites in C#, Blazor, and .NET. I am Peter Himschoot. I work as a trainer and consultant at U2U, which is a Belgium-based training company, but we deliver training all over the world. I am also the author of Microsoft Blazor, where I teach you the first steps on building your own Blazor application.

So what are we going to talk about in this video? So we’re going to look at a whole bunch of techniques of making your Blazor website go faster. A lot of the things we’re going to start with is lazy loading. With lazy loading, you can make part of your website load dynamically when the need arises. And if you’re going to use that technique and if your components use dependency injection, you will have to make some changes to some of your code.

We will also look at limiting rerendering of components. When an event occurs on a component, that component will be rerender, and it will also try to rerender its child components. Now, in many cases, that is not necessary, so we can give it a couple of hints. One thing we can use is use the @key attribute on your element, and we can also implement the method called ShouldRender. We’ll also look at virtualization. This is something new that Microsoft added if you have a large list of items to show. We’re also going to then look at optimizing your components themselves. Some components use features which are slow, so how can we then avoid using those features?

We’re also going to look at how we can avoid large number of component instances on a certain page. Each component has a certain amount of overhead, so the more components you have, the more overhead. So how can we avoid that? And finally, we’re going to look at limiting the frequency of certain events. Certain events trigger tens or a hundred times per second, and we don’t generally need all those events, so how can we limit the frequency of our events?