Hello -
We are using Telerik forms for our internal website. When I download one page with all its components, it is 73 files and 11.2 MB total size. Screen captures attached.
- 10 axd files (4.4 MB)
- 8 css files (328 KB)
- 47 js files (2.7 MB)
- 7 image files (84 KB)
- 1 html file (3.7 MB)
Most of our site is made up of similar pages. Our site has an average 500 connections per second. During peak times, the website crawls, with 20-30 seconds to return one page for each user.
We are accessing only text, with about 200 KB of text returned for each request.
It looks like 99.3% of the size of our pages is Telerik related files (mostly axd and js).
What could we be doing wrong? What should we be doing differently to reduce the size or count of Telerik files returned to the client?
Thank you!
1 Answer, 1 is accepted
Hi Erik,
The Telerik UI for ASP.NET AJAX controls are embedded in one assembly and only the needed scripts are loaded on the page depending on the available controls and enabled features. In order to provide rich client-side capabilities every control from the Telerik ASP.NET AJAX suite uses one or more JavaScript files. Some of these files are common and used by all controls, e.g. Core.js (used by every control and which contains the methods listed in your point 3) or jQuery.js (used in most controls).
The only possible way to reduce the script footprint is to register a Custom Local CDN Provider and to manually reduce the code of the files, e.g. to manually customize the files content and functionality in order to decrease the file size. You can also check this help article for additional information of which files are needed by each control.
More tips that may help you increase the page performance:
Generally, large pages can take some time to load all the needed resources, and there are several ways to improve that:
- Disable the debugging - set <compilation debug="false" /> in the web.config. When it is true, the MS AJAX debugging code causes a severe performance hit on the client-side. The fact that most of the controls functionalities implemented in JavaScript, thus resulting in 10 times slower performance compared to natively compiled code.
- Trim Unused Controls or hide them with Visible="false" until you need them on the page: Consider making the page simpler and smaller so it loads faster. Review the controls you're currently using and identify if there are any that are not essential to your page. Removing unused controls can significantly reduce the size of the generated output. If there are controls that are rarely used, consider removing them or finding alternative lightweight solutions for example from the Kendo UI for jQuery suite, which is lighter and also offers the ability to create a single JavaScript file that contains only the required widgets and features. - see Employing the Download Builder.
- Use RadScriptManager as it can combine WebResource requests for scripts into one and it can also combine your own custom js files: http://www.telerik.com/help/aspnet-ajax/scriptmanager.html and http://www.telerik.com/help/aspnet-ajax/scriptmanager-combine-scripts.html.
- Use RadStyleSheetManager as it does the same for our skins and your css files: http://www.telerik.com/help/aspnet-ajax/stylesheetmanager.html and http://www.telerik.com/help/aspnet-ajax/stylesheetmanager-serving-external-style-sheets.html.
- Consider using their CDNs or building a local CDN to reduce the load on your server. This lets the user browser cache these resources aggressively, so the second time the end user hits the page, the scripts will load much faster from the local cache.
- for scripts: http://www.telerik.com/help/aspnet-ajax/scriptmanager-cdn-support.html.
- for skins: http://www.telerik.com/help/aspnet-ajax/stylesheetmanager-cdn-support.html.
- you can also set the Telerik.ScriptManager.TelerikCdn.CombinedScript appSettings key so a combined script for all our controls get downloaded, which results in a single requests instead of several requests per control.
- Customize the source code of the controls - download the source code of our controls and examine the methods that take up more time than you would like so you can see how and where they are used in order to optimize the features you use in the controls, or even change the scripts themselves.
- More optimization tips and tricks are available in this help article: Optimizing Performance.
To summarize: To enhance the performance of a webpage containing numerous Telerik AJAX controls, there are several steps you can take. Although these controls are already optimized and designed to load only the necessary scripts for proper operation, you can further optimize them by implementing the following strategies:
- Customize their scripts on your own by disabling the embedded scripts or registering a local CDN Scripts server.
- Improve the performance of the standalone controls by following the Telerik guidelines.
- Reduce the number of controls on the page
- Disable the MS AJAX debugging
- Disable the ViewState of the controls - Telerik controls, like many ASP.NET controls, rely on ViewState to maintain their state across postbacks. However, ViewState can add significant overhead to the page size and processing time. If feasible, disable the ViewState for controls where it is not required, thus reducing the payload and enhancing performance. For RadGrid you can also Save the ViewState in the Session as well as see how to Optimize ViewState usage.
Regards,
Rumen
Progress Telerik