Edit

Share via

ASP.NET Core Blazor performance best practices

Note

This isn't the latest version of this article. For the current release, see the .NET 9 version of this article.

Warning

This version of ASP.NET Core is no longer supported. For more information, see the .NET and .NET Core Support Policy. For the current release, see the .NET 9 version of this article.

Important

This information relates to a pre-release product that may be substantially modified before it's commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here.

For the current release, see the .NET 9 version of this article.

Blazor is optimized for high performance in most realistic application UI scenarios. However, the best performance depends on developers adopting the correct patterns and features.

Note

The code examples in this node of articles adopt nullable reference types (NRTs) and .NET compiler null-state static analysis, which are supported in ASP.NET Core in .NET 6 or later.

Ahead-of-time (AOT) compilation

Ahead-of-time (AOT) compilation compiles a Blazor app's .NET code directly into native WebAssembly for direct execution by the browser. AOT-compiled apps result in larger apps that take longer to download, but AOT-compiled apps usually provide better runtime performance, especially for apps that execute CPU-intensive tasks. For more information, see ASP.NET Core Blazor WebAssembly build tools and ahead-of-time (AOT) compilation.

Metrics and tracing

Metrics and tracing capabilities help you monitor and diagnose app performance, track user interactions, and understand component behavior in production environments.

Configuration

To enable Blazor metrics and tracing in your app, configure OpenTelemetry with the following meters and activity sources in the app's Program file where services are registered:

builder.Services.ConfigureOpenTelemetryMeterProvider(meterProvider =>
{
    meterProvider.AddMeter("Microsoft.AspNetCore.Components");
    meterProvider.AddMeter("Microsoft.AspNetCore.Components.Lifecycle");
    meterProvider.AddMeter("Microsoft.AspNetCore.Components.Server.Circuits");
});

builder.Services.ConfigureOpenTelemetryTracerProvider(tracerProvider =>
{
    tracerProvider.AddSource("Microsoft.AspNetCore.Components");
});

Performance meters

For more information on the following performance meters, see ASP.NET Core built-in metrics.

Microsoft.AspNetCore.Components meter:

  • aspnetcore.components.navigation: Tracks the total number of route changes in the app.
  • aspnetcore.components.event_handler: Measures the duration of processing browser events, including business logic.

Microsoft.AspNetCore.Components.Lifecycle meter:

  • aspnetcore.components.update_parameters: Measures the duration of processing component parameters, including business logic.
  • aspnetcore.components.render_diff: Tracks the duration of rendering batches.

Microsoft.AspNetCore.Components.Server.Circuits meter:

In server-side Blazor apps, additional circuit-specific metrics include:

  • aspnetcore.components.circuit.active: Shows the number of active circuits currently in memory.
  • aspnetcore.components.circuit.connected: Tracks the number of circuits connected to clients.
  • aspnetcore.components.circuit.duration: Measures circuit lifetime duration and provides total circuit count.

Blazor tracing

For more information on the following tracing activities, see ASP.NET Core built-in metrics.

The new activity tracing capabilities use the Microsoft.AspNetCore.Components activity source and provide three main types of tracing activities: circuit lifecycle, navigation, and event handling.

Circuit lifecycle tracing:

Microsoft.AspNetCore.Components.CircuitStart: Traces circuit initialization with the format Circuit {circuitId}.

  • Tag: aspnetcore.components.circuit.id
  • Link: HTTP activity

Navigation tracing:

Microsoft.AspNetCore.Components.RouteChange: Tracks route changes with the format Route {route} -> {componentType}.

  • Tags
    • aspnetcore.components.circuit.id
    • aspnetcore.components.route
    • aspnetcore.components.type
  • Links
    • HTTP trace
    • Circuit trace

Event handling tracing:

Microsoft.AspNetCore.Components.HandleEvent: Traces event handling with the format Event {attributeName} -> {componentType}.{methodName}.

  • Tags
    • aspnetcore.components.attribute.name
    • aspnetcore.components.circuit.id
    • aspnetcore.components.method
    • aspnetcore.components.type
    • error.type
  • Links
    • HTTP trace
    • Circuit trace
    • Router trace