Tuesday 22 March 2011

SharePoint 2010 - Reducing Page Load Size

Having gone round-and-round in circles looking to disprove (and prove to myself) Chris O'Brien's blog article about removing unwanted and unnecessary JavaScript files from SharePoint 2010 when a public-facing website is accessed anonymously, I've basically satisfied myself that there doesn't appear to be any better way to do this.

As Chris explains, SharePoint 2010 includes a whole host of JavaScript files which can bloat a page quite considerably.  In a content author scenario, this isn't so much of a problem as the website will be accessed within an local and closed environment, more-often-than-not, and over the larger bandwidth that usually accompanies this it doesn't always pose a problem.  As soon as a website becomes public-facing, there are many more considerations which not only include bandwidth, but also client capabilities.

Any work that can be done to reduce page size is always worthy of consideration.  In light of this, referring to Chris here again, Microsoft introduced the Script On Demand framework in SharePoint 2010 to attempt to mitigate the page size.  Problem is the scripts still get downloaded, and quite a few, despite this. 

To solve it, Chris came up with a way to remove unnecessary JavaScript files from the list of registered files (which are stored in the HttpContext) but has had to use reflection to achieve this....it's not nice, but seems to be the only way to make it possible.

Here's his article explaining how - definitely worth consideration if performance is a concern.
Continuing on from what Chris has said, another way to reduce the number of server requests is to use the ASP.NET ScriptManager which gets added to the masterpage and combine your own scripts into a single one. for instance you may be loading the base jQuery library as well as one or more plug-ins, plus your own custom JavaScript.  Here's how:
 
<asp:ScriptManager id="ScriptManager" runat="server" EnablePageMethods="false" EnablePartialRendering="true" EnableScriptGlobalization="false" EnableScriptLocalization="true">
    <CompositeScript>
      <Scripts>
        <asp:ScriptReference Path="<%$SPUrl:~sitecollection/Style Library/Scripts/scriptfile_001.js%>" ScriptMode="Release" />
        <asp:ScriptReference Path="<%$SPUrl:~sitecollection/Style Library/Scripts/scriptfile_002.js%>" ScriptMode="Release" />
        <asp:ScriptReference Path="<%$SPUrl:~sitecollection/Style Library/Scripts/scriptfile_003.js%>" ScriptMode="Release" />
      </Scripts>
    </CompositeScript>
</asp:ScriptManager>
 
Remember that doing this removes your files from the list of files used by the ScriptLink control.

1 comment:

  1. Any thoughts as to why or what would cause JS content to act as if it couldn't be found/not load simply by nesting them within the tag? I have a master page emulating your example and but the js won't run or doesn't seem to be found however; when I unnest the from tag all functions return to normal. I'm baffled and wondering if you have any thoughts or suggestions. Thanks

    ReplyDelete