Best practices for optimizing Syncfusion® Blazor App performance

22 Oct 20251 minute to read

Improve rendering performance by applying the following best practices.

Use individual NuGet packages

Use individual Syncfusion^® NuGet packages for specific components. This lets the app include only what it needs and reduces download size. Learn more in Benefits of using individual NuGet packages.

Reduce script reference size

The overall syncfusion-blazor.min.js may include scripts the app doesn’t use. Prefer referencing only the required scripts using one of the following options:

• Individual reference
• Blazor Custom Resource Generator (CRG)

Use optimized CSS themes

To reduce CSS payload and improve rendering speed, use optimized CSS themes that include only the styles required by the components in use. Learn more in Optimized CSS themes.

Lazy loading in Blazor WebAssembly App

If using a Blazor WebAssembly App, implement lazy loading to reduce initial load time. See WebAssembly lazy load assemblies and the Syncfusion blog on lazy loading Syncfusion^® Blazor assemblies.

Use PreventRender in Blazor WebAssembly App

In a Blazor WebAssembly App, use the PreventRender option to avoid unnecessary re-rendering of Syncfusion^® Blazor components and improve performance. For details, see:

• DataGrid: WebAssembly performance
• Pivot Table: WebAssembly performance