Built-in Options for Resource Optimization
- 5 minutes to read
This topic summarizes the built-in resource optimization options available in DevExpress ASP.NET Web Forms controls.
You can use a set of DevExpress Web.config options to affect how the ASPxHttpHandlerModule forms responses, optimizes resources, and improves the page load. It is recommended to combine all available optimization options to achieve better performance.
Compress Web Page Content
To minimize the size of response data, use the following options in Web.config:
- Page Html Compression: enableHtmlCompression
Compresses the requested web page’s HTML output before sending it to the client browser.
- Callback Compression: enableCallbackCompression
Compresses the processed callback request’s response output before sending it to the client browser.
- Resource Compression: enableResourceCompression
Compresses script and stylesheet files before sending them to the client browser.
The reduced size is about 20% of the original size.
IIS Compression - Use as Alternative
If you enable IIS compression on the web server, it is recommended that you disable the DevExpress compression-related configuration options (mentioned above) to avoid incorrect behavior.
Minifying Tools - Do Not Use
Note that the DevExpress ASP.NET Web Forms controls do not support the use of external minification tools to optimize the built-in resources. A DevExpress client-side API cannot be minified or obfuscated, because minification usually shortens API names and might make the client API work incorrectly.
To minify DevExpress resources, use the DevExpress built-in optimization mechanism described in this topic.
You can improve web page performance by reducing the number of requests served to the server for resources.
Use the following configuration option to minimize the number of requests to the server for the resource files embedded into DevExpress assemblies:
- Resource Merging: enableResourceMerging
Serves the resources (script and CSS files) from different assemblies in the following manner: combines all scripts that are required by the requested page in one file and merges all required stylesheets into another file.
If your application contains custom script and stylesheet files, you can merge these resources in a similar manner with the help of the DevExpress built-in mechanism.
Refer to the following topic to learn more:
Limit References to Resources
DevExpress ASP.NET Web Forms controls contain specific resource management components and a configuration option to specify embedded or external resources to load.
Reference Only Necessary Embedded Resources
You can use the ASPxScriptManager and ASPxStyleSheetManager components to reference control-specific or suite-specific script and stylesheet resources. This allows you to manually manage what resources to load and specify their position and required order within a web page.
The following code snippet demonstrates how to reference scripts and stylesheets for the required suite (NavigationAndLayout). The page contains two web controls from this suite (ASPxMenu and ASPxNavBar).
<html ...> <head runat="server"> ... <dx:ASPxStyleSheetManager ID="ASPxStyleSheetManager1" runat="server"> <Items> <dx:StyleSheet Suite="NavigationAndLayout" /> </Items> </dx:ASPxStyleSheetManager> <dx:ASPxScriptManager ID="ASPxScriptManager1" runat="server"> <Items> <dx:Script Suite="NavigationAndLayout" /> </Items> </dx:ASPxScriptManager> </head> <body> <form id="form1" runat="server"> <div> <dx:ASPxMenu ...> </dx:ASPxMenu> </div> <div> <dx:ASPxNavBar ...> </dx:ASPxNavBar> </div> </form> </body> </html>
The code below references script and stylesheet files for an individual web control (ASPxMenu).
<html ...> <head runat="server"> ... <dx:ASPxStyleSheetManager ID="ASPxStyleSheetManager1" runat="server"> <Items> <dx:StyleSheet Control="ASPxMenu" /> </Items> </dx:ASPxStyleSheetManager> <dx:ASPxScriptManager ID="ASPxScriptManager1" runat="server"> <Items> <dx:Script Control="ASPxMenu" /> </Items> </dx:ASPxScriptManager> </head> <body> <form id="form1" runat="server"> <div> <dx:ASPxMenu ...> </dx:ASPxMenu> </div> </form> </body> </html>
Refer to the following examples for more information:
Reference Required Third-Party Resources
With the following configuration option, you can control which external client-side script library to reference and automatically load to the browser:
- External Client Libraries: resources
Registers external third-party client libraries (such as DevExtreme or jQuery), if required.
To avoid the automatic load of any libraries, declare an empty
resources section and manually attach DevExtreme resources and the necessary third-party libraries (such as jQuery) to the web pages in which they are required.