How To: Improve Page Rendering Speed
- 4 minutes to read
Enable Compression
Refer to the following topic for more details on how to enable compression in your application: Built-in Options for Resource Optimization.
See also:
- Mehul Harry’s DevExpress Blog - 4 Settings To Improve DevExpress ASP.NET Performance
- Web.Config Options
Optimize Caching
ASPxGridView, ASPxCardView, ASPxVerticalGrid, and ASPxTreeList store information about visible data items in the internal cache. This technique allows the controls to restore data from the cache without sending repeated calls to the database when data operations do not require a data reload. Refer to the following topic for more details: Built-in Row Cache.
To generate the XtraReport document in a Web application, refer to the following demo application that illustrates the report caching functionality: How to use the caching functionality of the Document Viewer.
See Also:
- Bind Grid View to Data at Runtime
- Webinar: Improving Web Site Performance and Scalability with Robert Boedigheimer
Optimize CSS
Do the following to optimize CSS in your application:
- Merge and compress custom CSS and JavaScript files.
- Use Theme files instead of AutoFormats.
- Remove unused CSS.
- Minify CSS.
- Combine external CSS.
- Use efficient CSS selectors.
See also: Appearance Customization - Theming
Optimize HTML
Do the following to optimize HTML in your application:
- Disable the ViewState of a control and its child objects (except for ASPxComboBox). An application stores the ViewState of the controls on a page and passes it to/from the server in a hidden field. If the page contains many controls, the ViewState has a large file size and may affect application performance.
- Simplify a page layout and use callbacks. When the page layout is complex, a browser takes additional time to render all controls even if these controls work in server mode.
- Try to render controls in native mode.
- Disable the client-side functionality for controls that do not use JavaScript code.
- If a page contains two or more ASPxDateEdit controls, use the PopupCalendarOwnerID property to specify the date editor that the popup calendar should invoke.
See Also: How to optimize the ASPxMenu control
Optimize Images
Do the following to optimize images in the application:
- Split images into sprites.
- Choose an appropriate file format for an image.
- Specify image dimensions.
See Also: Binary Storage Configuration
Optimize Callback Management
Callbacks allow you to call server code asynchronously and obtain the callback result without a postback. The callback result contains only the updated part of a page. This reduces the network traffic and response time.
Follow the recommendations below to optimize callbacks:
- Use the DevExpress ASP.NET List Editors’ EnableCallbackMode property to load items to the client side on demand.
Place your controls in the ASPxPageControl and enable callbacks for tabs as described in the following KB article: Why the ASPxPageControl’s server ActiveTabChanged event fires only once if the EnableCallBacks property is true?.
For ASPxMenu:
Set the EnableCallBacks property to
trueto render only root menu items on the page initially. The control loads sub items on a callback when the browser loads the page. You can use the EnableCallBacks property together with the EnableCallbackCompression property to enhance the application performance.For ASPxPopupControl and ASPxDockPanel:
These controls can load popup window content on demand if you enable the LoadContentViaCallback and/or LoadContentViaCallback properties.
See Also: Callbacks
Optimize Data Management
Use Server Mode for the ASPxGridView, ASPxGridLookup, and ASPxComboBox controls to bind them to a large dataset (more than 50,000 records). In this mode, these controls load only initially required data. The remainder of the data is loaded in small portions on scroll.
Refer to the following examples and online demos for more details: