Performance DataGrid slow loading/large download data #1030

New Issue

claunia · 2026-01-29T17:48:01Z

claunia commented

2026-01-29 17:48:01 +00:00

Originally created by @k-Sacr on GitHub (Oct 31, 2023).

On the project, we decided to replace the old table with Radzen DataGrid connected through the render server. To our surprise, the Radzen DataGrid was loading 7-10 times slower! It was discovered that the old table only loaded 300KB, while the Radzen table loaded 3MB. That's a 10-fold difference for the same visible data.

I conducted several experiments with RadzenBlazorDemos.Server.

1 - Loading the /datagrid-dynamic page with 100 records, without passing data to , meaning an empty table:

So, to display an empty table, it loads 7.9MB! I think this needs to be optimized.

2 - Regular loading of the /datagrid-dynamic page with 100 records:

8.6MB, but in reality, the HTML markup weighs 1.78MB.

I removed the use of RadzenDataGridCell in RadzenDataGridRow, changing it to similar (for this table) HTML code:

As can be seen from the screenshot, the table now weighs 3.5MB, which is 2.45 times smaller! Using RadzenDataGridCell costs 5.1MB
This is a huge difference and savings, without any visible changes in the table.

Unfortunately, I don't have enough knowledge of the Radzen code to perform optimization.
I want to raise this obvious issue and hope that you can dedicate some time to it.

Originally created by @k-Sacr on GitHub (Oct 31, 2023). _On the project, we decided to replace the old table with Radzen DataGrid connected through the render server. To our surprise, the Radzen DataGrid was loading 7-10 times slower! It was discovered that the old table only loaded 300KB, while the Radzen table loaded 3MB. That's a 10-fold difference for the same visible data._ I conducted several experiments with RadzenBlazorDemos.Server. 1 - Loading the /datagrid-dynamic page with 100 records, without passing data to <Template>, meaning an empty table: ![chrome_2023-10-31_12-23-34](https://github.com/radzenhq/radzen-blazor/assets/18440948/67d8638e-3791-4ec5-836b-ba3a11caec63) So, to display an **empty table, it loads 7.9MB!** I think this needs to be optimized. 2 - Regular loading of the /datagrid-dynamic page with 100 records: ![devenv_2023-10-30_21-00-00](https://github.com/radzenhq/radzen-blazor/assets/18440948/bd008816-1b43-4268-82a0-f7fb122cc1af) 8.6MB, but in reality, the HTML markup weighs 1.78MB. I removed the use of RadzenDataGridCell in RadzenDataGridRow, changing it to similar (for this table) HTML code: ![chrome_2023-10-30_20-56-54](https://github.com/radzenhq/radzen-blazor/assets/18440948/229e3976-2bd1-4b68-b19e-19942cbf4784) As can be seen from the screenshot, the table now weighs 3.5MB, which **is 2.45 times smaller**! Using RadzenDataGridCell costs 5.1MB This is a huge difference and savings, without any visible changes in the table. Unfortunately, I don't have enough knowledge of the Radzen code to perform optimization. I want to raise this obvious issue and hope that you can dedicate some time to it.

claunia closed this issue

2026-01-29 17:48:01 +00:00

claunia commented

2026-01-29 17:48:02 +00:00

@enchev commented on GitHub (Oct 31, 2023):

Here is what I see on the same demo even without paging when sorting the DataGrid by FirstName:

@enchev commented on GitHub (Oct 31, 2023): Here is what I see on the same demo even without paging when sorting the DataGrid by FirstName: ![image](https://github.com/radzenhq/radzen-blazor/assets/5804953/e3414c8f-4c0a-4208-8a1a-641b4f92ae9f)

claunia commented

2026-01-29 17:48:02 +00:00

@k-Sacr commented on GitHub (Oct 31, 2023):

Here is what I see on the same demo even without paging

Set PageSize="100" in RadzenDataGrid. With this value the problem is more obvious.

With RadzenDataGridCell , with PageSize="100":

https://github.com/radzenhq/radzen-blazor/assets/18440948/15cba15f-9acc-4430-89e1-f9e04eab7fec

Without RadzenDataGridCell , PageSize="100" :

Code changes in RadzenDataGrid Row.razor:

Result:

https://github.com/radzenhq/radzen-blazor/assets/18440948/bb8e8ec5-3cb6-4dad-a546-a3e00fdc6881

@k-Sacr commented on GitHub (Oct 31, 2023): > Here is what I see on the same demo even without paging Set PageSize="100" in RadzenDataGrid. With this value the problem is more obvious. With RadzenDataGridCell , with PageSize="100": https://github.com/radzenhq/radzen-blazor/assets/18440948/15cba15f-9acc-4430-89e1-f9e04eab7fec __________________________________________________________________________________________ Without RadzenDataGridCell , PageSize="100" : Code changes in RadzenDataGrid Row.razor: ![devenv_2023-10-31_18-20-54](https://github.com/radzenhq/radzen-blazor/assets/18440948/55754325-b5a8-495a-a73a-35db7602158f) Result: https://github.com/radzenhq/radzen-blazor/assets/18440948/bb8e8ec5-3cb6-4dad-a546-a3e00fdc6881

claunia commented

2026-01-29 17:48:03 +00:00

@DennyFiguerres commented on GitHub (Nov 1, 2023):

question: page size of 100, is this just to stress test ?
do you every give users a grid with 100 rows ?

i work with tables with millions of rows and i never put gids with more than 50 rows on a page. default is 10 or 20.

@DennyFiguerres commented on GitHub (Nov 1, 2023): question: page size of 100, is this just to stress test ? do you every give users a grid with 100 rows ? i work with tables with millions of rows and i never put gids with more than 50 rows on a page. default is 10 or 20.

claunia commented

2026-01-29 17:48:03 +00:00

@k-Sacr commented on GitHub (Nov 1, 2023):

question: page size of 100, is this just to stress test ? do you every give users a grid with 100 rows ?

Previously, this table was displayed as 100 rows, now they have made 50. But “just load and show less data” is does not solve the optimization problem.
Even with 50 rows the table weighs 4-5MB...

@k-Sacr commented on GitHub (Nov 1, 2023): > question: page size of 100, is this just to stress test ? do you every give users a grid with 100 rows ? Previously, this table was displayed as 100 rows, now they have made 50. But “just load and show less data” is does not solve the optimization problem. Even with 50 rows the table weighs 4-5MB...

claunia commented

2026-01-29 17:48:04 +00:00

@k-Sacr commented on GitHub (Nov 1, 2023):

i work with tables with millions of rows and i never put gids with more than 50 rows on a page

50 rows - 4.1MB

50 empty rows - 4MB:

@k-Sacr commented on GitHub (Nov 1, 2023): > i work with tables with millions of rows and i never put gids with more than 50 rows on a page 50 rows - 4.1MB ![chrome_2023-11-02_02-21-35](https://github.com/radzenhq/radzen-blazor/assets/18440948/50db6e61-a017-467d-87b0-55d6b159a433) 50 empty rows - 4MB: ![chrome_2023-11-02_02-22-46](https://github.com/radzenhq/radzen-blazor/assets/18440948/c1f12690-54f0-4eeb-b9ed-a795f7aac437)

claunia commented

2026-01-29 17:48:04 +00:00

@enchev commented on GitHub (Nov 2, 2023):

Hey @k-Sacr,

We have something in mind on how to optimize this however we will need more time. The idea is to not use Blazor components like RadzenDataGridRow/Cell and replace them with methods that will render rows/cells - we will just need more time to rework the current state and test and verify that nothing will be broken.

@enchev commented on GitHub (Nov 2, 2023): Hey @k-Sacr, We have something in mind on how to optimize this however we will need more time. The idea is to not use Blazor components like RadzenDataGridRow/Cell and replace them with methods that will render rows/cells - we will just need more time to rework the current state and test and verify that nothing will be broken.

claunia commented

2026-01-29 17:48:04 +00:00

@k-Sacr commented on GitHub (Nov 2, 2023):

We have something in mind on how to optimize this however we will need more time. The idea is to not use Blazor components like RadzenDataGridRow/Cell and replace them with methods that will render rows/cells - we will just need more time to rework the current state and test and verify that nothing will be broken.

I understand it.
Thank you for bringing this issue to attention.

@k-Sacr commented on GitHub (Nov 2, 2023): > We have something in mind on how to optimize this however we will need more time. The idea is to not use Blazor components like RadzenDataGridRow/Cell and replace them with methods that will render rows/cells - we will just need more time to rework the current state and test and verify that nothing will be broken. I understand it. Thank you for bringing this issue to attention.

claunia commented

2026-01-29 17:48:04 +00:00

@enchev commented on GitHub (Nov 3, 2023):

Hi @k-Sacr,

We've managed to optimize this case and to lower the message size around 2-3 times. I'm afraid that this is the maximum we can do.

@enchev commented on GitHub (Nov 3, 2023): Hi @k-Sacr, We've managed to optimize this case and to lower the message size around 2-3 times. I'm afraid that this is the maximum we can do.

claunia commented

2026-01-29 17:48:04 +00:00

@k-Sacr commented on GitHub (Nov 7, 2023):

Hi @k-Sacr,

We've managed to optimize this case and to lower the message size around 2-3 times. I'm afraid that this is the maximum we can do.

Hi. @enchev
Thanks for solving this problem.

I thought a little more about optimization, this is what I managed to achieve with dirty code

PageSize 100:

Test change code:
Remove @on.. events from the tag code, adding them only when they are really needed

Result PageSize 100:

Message size lower around 10-15%.

@k-Sacr commented on GitHub (Nov 7, 2023): > Hi @k-Sacr, > > We've managed to optimize this case and to lower the message size around 2-3 times. I'm afraid that this is the maximum we can do. Hi. @enchev Thanks for solving this problem. I thought a little more about optimization, this is what I managed to achieve with dirty code PageSize 100: ![chrome_2023-11-04_14-50-33](https://github.com/radzenhq/radzen-blazor/assets/18440948/33ae1eb8-3dee-4d7b-b5eb-6ea2b5f39218) Test change code: Remove @on.. events from the tag code, adding them only when they are really needed ![devenv_2023-11-04_14-25-46](https://github.com/radzenhq/radzen-blazor/assets/18440948/9f9f46b7-2a97-4e38-978a-294a53ea6648) Result PageSize 100: ![chrome_2023-11-04_14-22-59](https://github.com/radzenhq/radzen-blazor/assets/18440948/97d204ba-74ee-4b6a-a8a2-20db6616a806) Message size lower around 10-15%.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1030