Best Practices for Improving Syncfusion® Blazor App Performance
20 Aug 20251 minute to read
Enhancing the rendering performance of Syncfusion® Blazor apps involves implementing the following best practices.
Use Individual NuGet Packages
Opt for individual Syncfusion® NuGet packages for specific components. This approach allows you to selectively include only the necessary components, minimizing overhead. For detailed information, refer to Benefits of Using Individual NuGet Packages.
Reduce Script Reference Size
The overall syncfusion-blazor.min.js
script reference may be redundant. Instead, consider employing the following solutions to include only the required scripts for rendering Syncfusion® components.
Use Optimized CSS Themes
To reduce CSS payload and improve rendering speed, use optimized CSS themes provided by Syncfusion. These themes are tailored to include only the styles required for the components you use. Learn more at Optimized CSS Themes
https://blazor.syncfusion.com/documentation/appearance/themes#optimized-css-themes
Lazy Loading in Blazor WebAssembly App
If you’re using a Blazor WebAssembly app, consider implementing lazy loading to reduce the initial loading time. For guidance, refer to Microsoft’s documentation on WebAssembly lazy load assemblies and Syncfusion’s blog on lazy loading Syncfusion® Blazor assemblies.
Utilize PreventRender Option in Blazor WebAssembly App
In a Blazor WebAssembly app, leverage the PreventRender option to avoid unnecessary re-rendering of Syncfusion® Blazor components. This ensures optimal performance. For reference, we have provided links for the DataGrid and PivotTable:
- DataGrid: Link to WebAssembly performance documentation
- PivotTable: Link to WebAssembly performance documentation