Alachisoft.com

Accelerate SharePoint Web Page Delivery

Reduce HTTP requests

Increase browser caching

Minify & merge JavaScript & CSS files

Featured Article (1/3)

Clouds Done Right - Dist. Caching Removes Bottlenecks

Redmondmag.com

Featured Article (2/3)

Distributed Caching On The Path To Scalability

MSDN Magazine

Featured Article (3/3)

Providing Scalability for ASP.NET Applications

Microsoft Technet Magazine

Minify SharePoint JavaScript and CSS

SharePoint web interface is an ASP.NET application running on WFE servers and just like any other ASP.NET application it also has to deal with extra overhead of loading multiple CSS and JavaScript files. Whenever a page is being rendered in the browser, the browser issues separate GET calls for each JavaScript file and each CSS file. And, this can easily result into many extra calls to IIS and slow down the response time of the ASP.NET pages in SharePoint.

Why Minify CSS and JavaScript Files?

JavaScript Minification is a process in which NCachePoint reduces the size of all CSS and JavaScript files and also merges them into one or two files. As a result, a web browser only makes one or two extra calls to IIS when requesting a SharePoint page. Here are some reasons why you should minify JavaScript and CSS files:

  • Reduce number of HTTP requests a browser makes
  • Set a futuristic date so browser caches files longer
  • Minify JavaScript and CSS files and reduce their payload size
  • Merge multiple JavaScript and CSS files into one
  • Boost response time of SharePoint web pages

How does NCachePoint Minify JavaScript and CSS?

NCachePoint reduces the size of all JavaScript and CSS files by going through and removing all white spaces, tabs, and any other extra characters. It also reduces names of local variables and parameters but ensures that no logic is broken. Below is an example of a typical JavaScript function and then how it looks after it is minified.



function AddMPOverhang(leftOverhangId, rightOverhangId) {
	var leftOverhang=document.getElementById(leftOverhangId);
	var rightOverhang=document.getElementById(rightOverhangId);
	if (leftOverhang !=null && leftOverhang.style !=null) {
		leftOverhang.style.position='relative';
		leftOverhang.style.bottom='-7px';
	}
	if (rightOverhang !=null && rightOverhang.style !=null) {
		rightOverhang.style.position='relative';
		rightOverhang.style.bottom='-7px';
	}
}



Below is the same JavaScript function after it has been minified.



function AddMPOverhang(C,D){var B=document.getElementById(C);var
A=document.getElementById(D);if(B!=null&&B.style!=null)
{B.style.position="relative";B.style.bottom="-7px"}if
(A!=null&&A.style!=null){A.style.position="relative";A.style.bottom="-7px"}}


In addition to reducing the size of all JavaScript and CSS files, NCachePoint also merges multiple files into one so the browser has to only download one or two files at most (one for JavaScript and one for CSS). This reduces the number of HTTP requests a browser has to make for loading an ASP.NET page and improves performance and scalability of SharePoint WFE server farm.