As part of an overhaul of our current SharePoint 2007 environment, we decided to implement some enhanced functionality. We used the Telerik Rad Controls to assist in providing rich interfaces without having to code everything custom. Our home page would contain at least 12 web parts that all utilized one or more Telerik controls including RadRotator, RadGrid, RadPanel, and RadTooltip along with RadAjaxManagers and Loading Panels.
This was all good. We had everything working, implemented some asynchronous calls and AJAX postbacks, etc. It was pretty quick in IE 9. However, since most user machines were still running IE 7 with Windows XP, the performance wasn't as great. The initial page load of the home page was horrible and this was in the same city as the servers - imagine the response on the West Coast, U.K., China, etc. So obviously we did a ton of digging and various optimizations with the code and environment.
One of the simplest things which we didn't actually do until almost last, was to reduce the amount of calls between the client and server machines. Initially we blamed Telerik for producing a large overhead on the page when there are many different controls implemented. Looking at the trace showed many WebResource and ScriptResource calls:
(click on image to see larger view)
At the point of the above trace, all the calls were less than 1ms (I have seen them higher) but there seemed to be a lot of chatter here. What are all those ScriptResources anyway? These are the loading of javascript that is embedded in the Microsoft and Telerik assemblies.
I found a great way to combine the Script Resources into one call. This involves knowing exactly what is being called from your page. Luckily there is a Script Reference Profiler assembly which produces exactly what you need. This assembly is available on CodePlex and there is some documentation on how to use it on DotNetCurry.com.
Essentially the result is adding the used script resource references into your ScriptManager instance using the CompositeScript and Scripts tags. Since we were working in SharePoint, I added this to the master page:
This instantly combined all of the ScriptResource calls:
(click on images to enlarge)
Ok. This was good. But now what's up with those WebResource.axd calls? In the trace above they are taking longer than before. Reviewing the Response Body details of the WebResource.axd calls revealed that these were embedded CSS styles within the Telerik assemblies:
As it turns out, Telerik has a way to combine all of their CSS WebResource.axd calls into one! Again, in our master page, right under the ScriptManager, I added the RadStyleSheetManager:
I thought I was going to need to know which embedded stylesheets are being used, but since we are only using Telerik assemblies, the RadStyleSheetManager auto-magically handles them. Just by adding that one line combined all of the Telerik WebResource.asd calls into one call:
So now I have reduced the initial 20 calls into 3 combined calls - reducing network traffic, page response time, and overall rendering of the home page!
If you found this useful, please help support my SharePoint and .NET user group (Philly SNUG) by clicking on the logo below.This was all good. We had everything working, implemented some asynchronous calls and AJAX postbacks, etc. It was pretty quick in IE 9. However, since most user machines were still running IE 7 with Windows XP, the performance wasn't as great. The initial page load of the home page was horrible and this was in the same city as the servers - imagine the response on the West Coast, U.K., China, etc. So obviously we did a ton of digging and various optimizations with the code and environment.
One of the simplest things which we didn't actually do until almost last, was to reduce the amount of calls between the client and server machines. Initially we blamed Telerik for producing a large overhead on the page when there are many different controls implemented. Looking at the trace showed many WebResource and ScriptResource calls:
(click on image to see larger view)
At the point of the above trace, all the calls were less than 1ms (I have seen them higher) but there seemed to be a lot of chatter here. What are all those ScriptResources anyway? These are the loading of javascript that is embedded in the Microsoft and Telerik assemblies.
I found a great way to combine the Script Resources into one call. This involves knowing exactly what is being called from your page. Luckily there is a Script Reference Profiler assembly which produces exactly what you need. This assembly is available on CodePlex and there is some documentation on how to use it on DotNetCurry.com.
Essentially the result is adding the used script resource references into your ScriptManager instance using the CompositeScript and Scripts tags. Since we were working in SharePoint, I added this to the master page:
(click on images to enlarge)
Ok. This was good. But now what's up with those WebResource.axd calls? In the trace above they are taking longer than before. Reviewing the Response Body details of the WebResource.axd calls revealed that these were embedded CSS styles within the Telerik assemblies:
As it turns out, Telerik has a way to combine all of their CSS WebResource.axd calls into one! Again, in our master page, right under the ScriptManager, I added the RadStyleSheetManager:
I thought I was going to need to know which embedded stylesheets are being used, but since we are only using Telerik assemblies, the RadStyleSheetManager auto-magically handles them. Just by adding that one line combined all of the Telerik WebResource.asd calls into one call:
So now I have reduced the initial 20 calls into 3 combined calls - reducing network traffic, page response time, and overall rendering of the home page!
No comments:
Post a Comment