SharePoint: Performance improvement
Few Development and Performance improvement tips while working with custom implementation in SharePoint Online or in general SharePoint implementation.
Script Registration
Use ScriptLink tag to load JavaScript asynchronously or after the page is ready. The ScriptLink will always look in /_LAYOUTS/1033 folder for the scripts.
<ScriptLink language="javascript" name="MyJS.js" Defer="true" runat="server"/>
This line would load the page and then load the script file. If Defer="false" is set then instantly the page loaded and hit that line the .js file would execute.
Using Defer="False" is basically the same as loading the script with this method. But with this method below you can specify a location other that LAYOUTS/1033 if needed to
<script type='text/javascript' src="/_layouts/1033/myjs.js"></script>
Using above method we can load scripts based on browser local.
Another difference with using the SharePoint:ScriptLink is that when the file gets loaded it must exist, otherwise we will get a SharePoint Error screen. This could help in ensuring that SharePoint is seeing our js file. Besides referencing JavaScript files, ASP.NET pages can have inline JavaScript code. Use the following pattern to make script blocks
<SharePoint:ScriptBlock runat="server" >
// JavaScript code here.
</SharePoint:ScriptBlock>
?
In case we need to register any JavaScript file with the Site Collection we can use a relative path as follows
<SharePoint:ScriptLink language="javascript" name="~sitecollection/Style Library/scripts/abc.min.js" LoadAfterUI="true" runat="server" />
?
We can specify if we need to load the file post UI HTML load using "LoadAfterUI" parameter
CSS Registration
Pages and controls register specific style sheets by using the <SharePoint:CssRegistration name="filename" tag or calling the staticCssRegistration.Register("filename") method. The CSS can be registered as a leaf filename or as a URL. For example:
<SharePoint:CSSRegistration name= "<%$SPrl:~SiteCollection/Style Library /Band.css%>" runat="server"/>
?
This is a standard way how SharePoint is registering all CSS throughout.
_spBodyOnLoadFunctionNames
"In most cases SharePoint pages are based on a master page that contains the "body" element. These content pages can't directly add a function to the body's onload event. In order to work around this limitation, SharePoint provides the "_spBodyOnLoadFunctionNames" array. When the body is loaded, the onload event handler executes each function whose name is contained in this array. We added "FunctionName" to the array so that it would run when the body's onload event fires." [blogs.msdn.microsoft.com]
<script language="javascript">
_spBodyOnLoadFunctionNames.push("FunctionName");
function FunctionName()
{
// Code
}
</script>
We should avoid using document.ready and use _spBodyOnLoadFunctionNames. This will in line with SharePoint implementation / works with MDN (Minimal Download Stately) and help reduce inline triggers of document ready.
SOD (Script on demand)
Exactly what it spells out, script on demand. SOD provides a lightweight client-side framework. JavaScript is dynamically loaded if a script flags that something is needed. It also helps with the loading by understanding if a script is dependent on another script, to include those dependencies as well.
More details can be found at:
http://www.migee.com/2015/09/24/understanding-sharepoint-and-script-on-demand-sod/%C2%A0
SP.SOD.executeFunc(key, functionName, fn) method ensures that the specified file (key) that contains the specified function (functionName) is loaded and then runs the specified callback function (fn). Use case forSP.SOD.executeFunc can be that at some point you wish a JavaScript library like jQuery be loaded before you call a function defined inside it via a callback function.
SP.SOD.executeOrDelayUntilScriptLoaded(func, depScriptFileName) method executes the specified function (func) if the file (depScriptFileName) containing it is loaded; otherwise, adds it to the pending job queue. Use case for for SP.SOD.executeOrDelayUntilScriptLoaded can be that you want to override a function definition within the Core.js
One example of loading multiple files in sequence and defining dependency
CDN
"Office 365 content delivery network (CDN) to provide better performance for the SharePoint Online pages. Static assets are files that don't change very often, like images, video and audio, style sheets, fonts, and JavaScript files. The CDN works as a geographically distributed caching proxy, by caching static assets closer to the browsers requesting them." [docs.microsoft.com]
**Minify of JS / CSS **
Minification is the process of removing all unnecessary characters (tabs, source code documents, spaces etc.) from source code, without changing its functionality. There are many minification tools that can assist in this process and can reverse the minification. We can bundle distinct components of your application into combined *.js files and pass them through a JavaScript minimizer tool such as Google Closures or JsMin that gets rid of comments and white spacing.
Minification process reduces the size of JS /CSS files while help in faster page load.
Lazy Loading of JS/Images
There are some really nice external lightweight library which can be used for lazy load an Image like blazy.js , In case you are using any heavy Image to be loaded on the page - consider using such library. It will load the Image after the UI and we can use multiple hooks provided if needed.
Caching
Use Caching as much as possible, this is normal ASP.Net Caching which is not very specific to SharePoint.
Image Rendition
Images are one part which can take a lot of network bandwidth and in most of the cases it the end user who uploads Image. In case a user uploads a very Heavy Image - it takes a lot of bandwidth to load on a page.
This scenario can be handled using Image Rendition options available in SharePoint
Rendition ID
SharePoint provided `Image Rendition' which needs to be enabled at `Site Setting -> Look and Feel'. We define custom Rendition sizes and associated RendtionId while image rendition.
More details can be found at: https://blog.mastykarz.nl/image-renditions-sharepoint-2013/
One issue with defining custom RendtionID is that it becomes problematic when we move from one environment to other. Then we need to keep the RendtionID same throughout the different environment and if somehow it does not match then we need to find and replace where RendtionIDs are mentioned.
Using /_layout/15/getpreview.ashx
This is Out of Box provided by SharePoint which has predefined rendition ids.
/* Width
resolution=0: 300px
resolution=1: 480px
resolution=2: 750px
resolution=3: 1024px
resolution=4: 1600px
resolution=5: 2560px
resolution=6: 4928px - Original file size
Resolution 0: Mobile Portrait
Resolution 1: Mobile Landscape
Resolution 2: Tablet Portrait
Resolution 3: Tablet Landscape
Resolution 4,5,6: Desktop
*/
It's better to use this as these widely covers all the scenario and we don't have to worry while moving content between different environment.