Built-in Options for Resource Optimization

• Oct 06, 2023
• 4 minutes to read

This topic summarizes the built-in resource optimization options available in DevExpress ASP.NET Web Forms controls.

Overview

DevExpress ASP.NET Web Forms controls use the DevExpress HTTP Handler/Module (ASPxHttpHandlerModule) to efficiently serve resources. DevExpress resources, such as JavaScript, CSS, and image files, are embedded in control-related assemblies. The ASPxHttpHandlerModule retrieves the required resources from assemblies and uses a specific .axd file – DXR.axd – to inject resources into a client-side web page.

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 Resources

Any response not natively compressed (such as JavaScript, CSS, or HTML) can benefit from response compression. The DevExpress configuration options allow you to set up resource compression and reduce the web page load time.

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.

Compress JavaScript and CSS Resources

Enable the following configuration option to reduce the size of the built-in resource files (JavaScript and CSS):

• 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.

Merge Resources

You can improve web page performance by reducing the number of requests served to the server for resources.

Merge the Embedded JavaScript and CSS 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.

Merge and Compress Custom JavaScript and CSS Files

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:
How to: Merge and Compress Custom CSS and JavaScript Files.

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> 

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.