Alachisoft StorageEdge - Online Documentation

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 StorageEdge 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 StorageEdge Minify JavaScript and CSS?
 
StorageEdge 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, NCache 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 web server farm.
 
 
Note: JavaScript and CSS Minification must be disabled before performing any SharePoint administrative tasks.
 
 
 
See Also

 
Copyright © 2012 Alachisoft. All rights reserved.