Problem with Page load performance : some css is too large!!

Question

User-79977429 posted

Hi

i've used third party controls (devexpress) for my webApp, at runTime it load a big css file (dxr.axd) which makes slow down page loading. To reduce size of dxr.axd devexpress recommand load some specific css style which needed. i found this link which used this syntax :

@Html.DevExpress().GetStyleSheets(  
    new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout, ExtensionType = ExtensionType.NavBar, Theme = "DevEx" },  
    new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout, ExtensionType = ExtensionType.Menu, Theme = "DevEx" },  
    new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout, ExtensionType = ExtensionType.Splitter, Theme = "DevEx" },  
    new StyleSheet { ExtensionSuite = ExtensionSuite.Editors },  
    new StyleSheet { ExtensionSuite = ExtensionSuite.GridView }  
)  
    @Html.DevExpress().GetScripts(  
    new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout, ExtensionType = ExtensionType.NavBar },  
    new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout, ExtensionType = ExtensionType.Menu },  
    new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout, ExtensionType = ExtensionType.Splitter },  
    new Script { ExtensionSuite = ExtensionSuite.GridView },  
    new Script { ExtensionSuite = ExtensionSuite.Editors }  
) 

but i think it works for mvc whereas i'm using webForm.

My question is that how to use it in my webform project to reduce size of dxr.axd ?

Thanks in advance

Answer 1

User415553908 posted

Yes, I don't think you can use Razor HTML heplers in WebForms pages.

Looking at this answer in their forum, however hints that all this helpers do is generate HTTP requests to /DXR.axd?r=1_171,1_131,1_94,1_164,…

So, given I don't know your exact environment one way to move forward () would be to:

1. make an MVC project,
2. use the @Html helpers there to craft correct request strings (you will have two: for javascript and CSS)
3. add <script> tag to your pages: <script src="DXR.axd?r=...." type="text/javascript"></script>
4. add <link> tag to your pages: <link href="DXR.axd?r=...." rel="stylesheet" type="text/css">

You could also have a look through their API reference and make an educated guess which enum values will correspond to your required ExtensionSuites and ExtensionTypes

See the following documentation pages on DevExpress for some more context:
https://supportcenter.devexpress.com/ticket/details/q577855/dxr-axd-size-and-loading-time-are-too-large
https://docs.devexpress.com/AspNet/6913/common-concepts/webconfig-modifications/webconfig-options/resource-compression
https://docs.devexpress.com/AspNet/11878/common-concepts/performance-optimization/how-to-merge-and-compress-custom-css-and-javascript-files

Answer 2

User-79977429 posted

Thanks for reply

I saw your links before, but could not help me, because all of them is MVC.

I'm looking for a way for webforms.

Do you have any idea in webforms?

Thanks in advance

Answer 3

User415553908 posted

My suggestion was to temporarily create a new blank MVC project just so you could grab the full request URLs. Then you would bring these URLs into WebForms project as <script> and <link> tags. 

After you've done that there'd be no need in MVC project and you can delete it. Does it make sense?

I'm not claiming this is a perfect solution - I'm only suggesting it as a way to unblock yourself and move on while waiting for someone else to come around and give you a DevExpress-endorsed one.

Answer 4

User409696431 posted

https://supportcenter.devexpress.com/Ticket/Details/T197668/asp-net-dxr-axd-file-is-too-large-how-to-optimize-devexpress-client-resources

That page discusses both MVC and Webforms options.  Their forum is the place to ask if anything is unclear.

Answer 5

User-79977429 posted

Thanks KathyW

Yes, That link give some solutions, but that one which i'm looking for (Number 3) is just for MVC project, not working in webForms!

Answer 6

User409696431 posted

Read the whole page.  It includes solutions for Webforms.

Answer 7

User-79977429 posted

Thanks KathyW

I've review that page multiple times, but didn't found what i'm looking for! Can u give me more description or example ?

thanks in advance

Answer 8

User1535942433 posted

Hi hamed_1983,

As far as I think,you could use the ASPxScriptManager and ASPxStyleSheetManager controls on webform to manage what resource should be loaded.

More details,you could refer to below article:

https://github.com/DevExpress-Examples/how-to-specify-the-position-of-a-link-to-devexpress-aspnet-controls-style-sheets-e4678/blob/14.2.3%2B/CS/WebSite/Default.aspx

Best regards,

Yijing Sun

Answer 9

User409696431 posted

In the middle of the page:

"In ASP.NET WebForms, only the required (common and control-specific) resources are registered in page markup by default. However, if you wish to manually manage what resource should be loaded, you can use the ASPxScriptManager and ASPxStyleSheetManager controls on a page. The E4678: How to specify the position of a link to DevExpress ASP.NET controls' style sheets example demonstrates how to use these components."

Follow the links for more info.