Web application Performance Optimization Part 2: Optimizing CSS

In this part of the series, I’m going to share some of the techniques that I used to optimize SharePoint/ASP.NET applications from CSS perspective. All of the following techniques are common for other technologies too.

Use Shorthand Properties

There are few shorthand properties available in CSS that we can use to set several properties at once. Those properties are: background, border, font, list-style, margin, padding, and outline.

Use margin: 1px 0 2px 5px; instead of margin-top: 1px; margin-right: 0; margin-bottom: 2px; margin-left: 5px;

Advantages:

• Reduced file size
• Faster performance
• Easy maintenance

CSS Compression

In my previous post of this series, I’ve talked about JavaScript compression. The same compression process applies on CSS as well. It will remove whitespaces, comments, replacing existing properties with shorthand properties. It will reduce the file size and reduce the amount of data sent in each server response. There are many tools available for CSS compression like YUI, Microsoft Ajax Minifier, etc... You can use previous post to get an idea on compression and tool comparison.

Add CSS in the Head section

CSS in the head section of the page allows the page to render progressively. The best approach for a page load should be; browser to display whatever content it has and in proper visual format. So if we add CSS at the top of the page. It will help the browser to render the downloaded content.

Avoid CSS Expressions

CSS provides a powerful way to set properties dynamically. It only works with IE version 5 – 7. Microsoft decided to stop supporting them from IE8 onward. To make IE standards compliance, browser performance, and security reasons. Let’s say if we’re using expression in CSS that mean is expression may be evaluated on different events like mouse move, hover, resize, on scroll. Especially when we’re moving mouse pointer on the page. It might evaluate unknown number of expression without any reason and slow download our page performance.

Note: Fewer HTTP request is the key to improve the page load time for any application. The following sections are mostly related to; how to reduce HTTP requests.

CSS Sprite

This technique reduces HTTP request each time a page is load by combining several images together on a single image file and control its output with CSS background-position attribute. Here is a very useful article Creating easy and useful CSS Sprites.

Merge (combine) All CSS files

As we know, fewer HTTP requests are the key to the performance. If we’ve more one CSS files in our application then we should try to merge/combine them into one file. It might not reduce the amount data but it definitely reduces the number of HTTP requests. Still we can use CSS compression tools to reduce the size of combined CSS file.

Online CSS Optimization Tools

Here are some online CSS optimization tools that we can use to optimize CSS during our projects:

• CleanCSS
• Prefixr
• CSS Optimizer
• W3C CSS Validation Service

SharePoint Performance Optimization Best Practices

Avoid site page customization if possible

SharePoint uses page ghosting technique to allow a server farm to scale out to tens of thousands of pages across all the sites within a farm. Page ghosting is valuable because it eliminates the need to transfer the contents of a page definition file from the SQL Server content database to the front-end web server. Page ghosting also makes it possible to process the default page instance for thousands of different sites by using a single page template that is compiled into an assembly DLL and loaded into memory in the IIS worker process just once per web application. This optimization technique is a key factor in the scalability of SharePoint in high-traffic environments running thousands or tens of thousands of sites.

SharePoint comes with different site templates and each template has some default pages templates. These page templates reside on file system of the front-end server. Page templates are used to provision page instances within the context of a site. When a page instance is initially provisioned from a page template, SharePoint doesn't need to store a copy of it in the content database because SharePoint can load the page template from the file system of the Web server and use it to process any request for an uncustomized page instance. Therefore, you can say that page ghosting describes the act of processing a request for an uncustomized page instance by using a page template loaded into memory from the file system of the front-end Web server.

Eliminate Extra Script Files

SharePoint 2010 comes up with rich and very interactive interface to perform different actions. More interactivity also introduces more scripts and code. In my recent SharePoint 2010 internet site project, we got into a situation where we want to eliminate extra scripts for anonymous users. After a little bit of research I found a great solution from Chris O’ Brien for extra script elimination. This solution works great in our scenario. I would recommend reading this great post and getting the benefit from this post.

Blob Caching

This cache can store image, sound, video files, and other large binary files on disk. Disk-based caching is one way in which you can achieve faster processing of content stored in content database. If SharePoint Web application contains large files such as images and multimedia files, enabling disk-based caching improves page delivery time because the cache stores files on the front-end Web server, thus reducing database traffic. Read more

Output Caching

SharePoint uses native ASP.NET caching technology to manage page content serving. It reduces database roundtrips, less CPU time, faster response, shorter latency, etc… SharePoint 2010 adds additional functionality over native ASP.NET output caching called “Cache Profiles”. By using "Cache Profiles" we can control cache behavior based on user’s access rights to a site.

Most of the time output caching is suitable for SharePoint internet sites with anonymous access. Because we might get inconsistent caching behavior. If we’ve more than one web-frontend into our farm. But we can overcome to these inconsistency behavior using SharePoint 2010 cache profiles.

Member Leaks

If you’re custom code for SharePoint applications then make sure you’ve run SPDisposeCheck. This tool may not show all memory leaks in your code. Further investigation is required if you continue to experience issues.

Unnecessary Index Columns

SharePoint index columns are similar to indexing columns in a database table. SharePoint maintains index columns itself instead of SQL Server. Index columns can substantially improve the performance of various query operations, such as queries that use the indexed column, join operations, and ordering operations such as sorting. On the other end, it may cause low performance too. SharePoint stores list items data in "AllUserData" table and for every index column it stores the same value in "NameValuePair" table too. Let’s say, if we’ve 100,000 rows in a list and 3 index columns. It means we’ll have 100,000 rows in "AllUserData" table and 300,000 rows in "NameValuePair" table. So we always try to avoid unnecessary index columns.

JavaScript Compression Tools Comparison

JavaScript compression consists of two processes: minification and obfuscation. Minification is a process of removing comments and unnecessary whitespace from a file. Obfuscation is a process of modifying code, changing the names of variables, functions, members, etc. to reduce the size of code. The following are some popular JavaScript compressors:

• Microsoft Ajax Minifier
• Closure Compiler
• YUI Compressor

It’s very hard to say which one is better. That’s why during my projects, I always try to use all three and compare the output based on different facts. Here I’m going to share the output from one of my projects.

Before going to jump into scenarios, I want to talk about how to use these tools. Here are some command lines that you can use for compression:

Microsoft Ajax Minifier

Simple: ajaxmin script.js -o script-microsoft.js

Hypercrunch: ajaxmin -h script.js -o script-microsoft-h.js

Hypercruch Combine Literals: ajaxmin -hl script.js -o script-microsoft-hc.js

Google Closure

You can use online tool

OR

Simple: java -jar compiler.jar --compilation_level SIMPLE_OPTIMIZATIONS --js script.js

Whitespace: java -jar compiler.jar --compilation_level WHITESPACE_ONLY --js script.js

Advance: java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js script.js

YUI Compressor

You can use online tool

OR

Simple: java -jar yuicompressor-2.4.2.jar script.js -o script-yahoo.js

Minified Only: java -jar yuicompressor-2.4.2.jar script.js --nomunge -o script-yahoo-m.js

Disabled Optimizations: java -jar yuicompressor-2.4.2.jar script.js --disabled-optimizations -o script-yahoo-o.js

Preserve Unnecessary Semicolons: java -jar yuicompressor-2.4.2.jar script.js --preserve-semi -o script-yahoo-s.js

During one my recent SharePoint internet site project I tried all three compression tools to compress JavaScript files. The following are the result comparison for one of those JavaScript files.

	File Name	Original Size	Compressed	Compressed & Gzip
YUI (Simple)	Script-1	191 KB	77 KB	23 KB
YUI (Minified Only	Script-1	191 KB	94 KB	26 KB
YUI (Disabled Optimizations)	Script-1	191 KB	77 KB	24 KB
YUI (Preserve Unnecessary semicolons)	Script-1	191 KB	78 KB	24 KB
Closure (Simple)	Script-1	191 KB	74 KB	40 KB
Closure (Whitespace)	Script-1	191 KB	94 KB	26 KB
Closure (Advance)	Script-1	191 KB	58 KB	21 KB
Microsoft (Simple)	Script-1	191 KB	76 KB	26 KB
Microsoft (Hypercrunch)	Script-1	191 KB	76 KB	26 KB
Microsoft (Hypercrunch Combine Literals)	Script-1	191 KB	76 KB	26 KB

Recommendation

As you can see in the above results Gzip results are almost same like 1 to 3 KB difference between all three tools. Due to following reasons I prefer to use Microsoft Ajax Minifier:

• Works for both JavaScript and CSS
• Visual Studio Integration
• MS Build task to automate project builds along with minification process
• JavaScript code analysis capabilities
• Code formatting capabilities
• Out-the-box multi file combining capability

Move/Load Scripts after page contents – (ASP.NET, SharePoint)

This post is a sub-post of Web application Performance Optimization Part 1: Optimizing JavaScript series.

ASP.NET Solution

ASP.NET Ajax "ScriptManager" provides a property "LoadScriptBeforeUI=false" to load scripts after loading the page content. But still it doesn’t move all the scripts after the content. Omar Al Zabir has an awesome solution to this problem which programmatically moves all scripts tags after form tag. This solution works for all ASP.NET out-the-box and custom script tags.

Usage Consideration

The above solution may cause behavioral changes in some cases. If any script that is using "document.write" to render content, may change the page behavior.

SharePoint Solution

SharePoint 2010 adds different script tags on every page for core, ribbon, dialog, and much other functionality. Also you can add your own custom script to fulfill your own application requirements. ScriptLink OR ClientScriptManager controls are used to add scripts and both works in same way. So we can use "defer" attribute of ScriptLink to load scripts asynchronously or after the page is ready.

Web application Performance Optimization Part 1: Optimizing JavaScript

From the past few years JavaScript has become the most widely use technology for web applications. JavaScript makes the user interface more interactive and responsive. If we take a look at SharePoint 2010. It has more interactive and responsive interface with fewer page round trips to the server and all this because of the more use of JavaScript.

In today’s post, I’m going to share some of the techniques that I used to optimize SharePoint/ASP.NET applications from JavaScript perspective. All of the following techniques are common for other technologies too.

Move Scripts at the Bottom

The HTTP/1.1 specification suggests that browsers download two components in parallel per hostname. Many web pages download all their components from a single hostname. While download/execute script tags, browser won't start any other downloads. So if we add scripts in head section of the page. It blocks parallel downloads.

Move/Load Scripts after page contents – (ASP.NET, SharePoint) has solutions for ASP.NET and SharePoint to unblock parallel downloads.

Avoid Inline Scripting

First question that comes in mind when developer is coding JavaScript: Should JavaScript be contained in script file, or inlined in the page itself? Using script file in the real world generally produces faster pages because the JavaScript files are cached by the browser. JavaScript that is inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. On the other hand, if the JavaScript is in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.

Now the decision between number of HTTP requests and the size of the HTML document is difficult. If we create a matrix on our applications then most of the time script files will be the best option. Because we can overcome to HTTP request issue by using CDN, different host name, and combining script techniques.

Minify/Compress JavaScript

The amount of data sent in each server response can add significant latency to your application, especially in areas where bandwidth is constrained. Compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time.

JavaScript Compression Tools Comparison has comparison between different tools.

Remove Duplicate (i.e. Redundant) JavaScript

These days’ applications are using different JavaScript libraries, plugins, and custom scripts. When developers are using these libraries, plugins, etc… in some situations they never realize that they’re replicating same code/components in the form of different versions.

Let’s say, if we’re using jQuery library along with different plugins into our application. Sometimes different plugins are compatible with different versions of jQuery or some plugins are completely dependent on other plugins or some plugins have additional functionalities by adding other plugins. Any one of these situation sometimes cause script duplication.

Web application Performance Optimization Tips & Tricks

These days web applications performance became more important to businesses and it leads to Performance => Better Visibility => More Customers => More Revenue. Especially for Internet-based distributed applications, the need is even more acute – users have a choice about where they browse, and if a site’s performance frustrates them they may never return. Every web application consumes around 80% end-users time on page download. Most of this time is tied up in downloading of different components like images, scripts, flash, stylesheets, etc…

In this series of blog posts, I’m going to share different techniques that I used in different ASP.NET & SharePoint projects for frontend optimization. These techniques are pretty simple and standard best practices for frontend optimization. But I’m going to share the facts and figures that I got in different projects.

• Part 1: Optimizing JavaScript
• Part 2: Optimizing CSS
• Part 3: Optimizing Images
• Part 4: Miscellaneous Optimization Techniques
• SharePoint Performance Best Practices
• ASP.NET Performance Best Practices

Each part will be published soon…

Improvements in SharePoint 2010 from the Business Perspective - Part 2

This is the second post in a series of blog posts on SharePoint 2010 improvements. If you've missed the first post, you could read it here

Audience Targeting

In SharePoint 2010 users can target Web Part content in two ways:

1. Configuration Web Parts Pages to display different Web Parts based on audience membership.
2. Configure Web Parts to display different content based on audience membership.

Document Management

SharePoint 2010 includes a broad collection of new capabilities that simplify and streamline how companies manage documents.

• Content Organizer

  Content Organizer is a rules-based classification engine that provides consistent classification of content based on Content Type and specific metadata properties. Site owners can create rules to drive content to specific document libraries and folders, where they inherit access control policy, default metadata values, and specific retention schedules.

• Document Sets

  Using Document Set users can bundle multiple documents that support a single case, project, contract, etc… under a unique entity. But the set can share metadata properties, and users can apply workflows and versioning to the Document Set as a whole. Each Document Set has a customizable welcome page that displays shared metadata properties.

• Document IDs

  SharePoint 2010 offers a new capability that assigns documents a unique identification number. Each document has a “permalink” based on its unique ID, which lets people retrieve the document regardless of where it is within a SharePoint deployment.

• Managed Metadata Service

  Managed Metadata Services in SharePoint 2010 which allows businesses to centrally manage metadata and share it anywhere in the farm.

Record Management - Store once, use many

SharePoint 2010 broadens the scope of records management by delivery core capabilities across the entire SharePoint platform. As a result, users can declare all content within SharePoint as records, and companies can manage a central records archive or support in-place records management.

Rich Media Management

SharePoint 2010 includes enhanced management and presentation of multimedia content including Asset Libraries and the Media Player Web Part.

Improved Web Analytics

SharePoint 2010 delivers improved Web Analytics, providing details reports on user activity, content inventory, and search use.

SharePoint Search

SharePoint Search capabilities are delivered through two server products:

• SharePoint Server 2010 – delivers out-of-the-box intranet and people search. SharePoint makes it easy to find content by combining relevance, refinement, mining, discovering (Manual or automatically generate list of colleagues mined from Microsoft Outlook) and social behavior in the search experience.
• FAST Search Server 2010 for SharePoint – offers a new choice in enterprise search. It delivers an exceptional intranet, people search, visual search experience and a platform for building custom, search-driven applications.

Improvements in SharePoint 2010 from the Business Perspective - Part 1

As a consultant, a lot of time one question is asked from us. What are the improvements in SharePoint 2010 from the Business Perspective? Also someone asked me the same question on a forum as well. So I decided to write a post on it. Here are some of the improvements in SharePoint 2010 from the Business perspective.

Ribbon User Interface

SharePoint 2010 features the Microsoft Office Fluent user interface, including the ribbon user interface. The SharePoint Ribbon user interface offers an extensible, seamless, and familiar user experience across client and server applications.

Easy Web Editing

Sites in SharePoint 2010 contain the same list and libraries as previous version of SharePoint, but the site is now a collection of pages. Because SharePoint sites focus more on pages than collections of lists, user can better control sites. User can also easily work together to change existing pages with wiki technology in SharePoint 2010 team site pages. To edit content on a page, user can simply click the Edit tab type on the page. To enhance content, people can embed Web Parts, media files, and SharePoint lists in the page with a single click.

Cross-Browser Support

SharePoint 2010 now supports not only Microsoft Internet Explorer, but also Firefox and Safari. With any of these browsers, user can view and edit sites, and work with content effectively with a high-quality experience.

Improved Mobile Experience

SharePoint 2010 now offers support for multiple micro-browsers, helping more users to work together while using mobile devices. Users can view and edit Office documents, browse SharePoint document libraries, and search for content and people.

Stay Connected (receive alerts on you cell phone)

SharePoint 2010 list and libraries now allow you to receive text messages to your phone when you subscribe to an alert.

Work Online or Offline

SharePoint Workspace 2010 is the rich desktop client for SharePoint 2010 that helps users to work together, even when they’re not connected to a network. When users work offline, SharePoint Workspace caches any changes and automatically synchronizes the changes when connected to SharePoint site. In SharePoint Workspace 2010, people can take offline the content of entire sites, including custom lists and line-of-business data, and can integrate Microsoft InfoPath 2010 forms for richer data entry and data validation.

Enhanced Search Experience

SharePoint 2010 provides thumbnail Previews, Search results Refinement such as "Did You Mean" and improved relevance.

Office Web Applications

SharePoint 2010 works with the web companions to the most popular Office applications, so users can access documents, spreadsheets, presentations and notes without worrying about whether the computer they use has the latest Office programs installed.

Multilingual User Interface

SharePoint 2010 makes it easier for those organizations that have employees across borders and speak different native languages. After site administrators install the required language packs and activate the Multilingual User Interface (MUI) service, users can switch between languages and have their sites in the language they’ve chosen. When users create new content, they can also submit translations of the content so other users can view the content in specified languages.

Preparing VM for SharePoint Server 2010 Beta Complete Installation (Multi Server Farm Installation) using Sun VirtualBox on Windows 7

Now that SharePoint 2010 Beta available to download from MSDN or TechNet. You cannot upgrade the installation from this Beta to RTM or any other version when it's released. SharePoint 2010 requires 64-Bit hardware and operating system.

There are different ways to Install SharePoint 2010:

1. Installing SharePoint 2010 on a client OS for development
2. Pre-installed and configured VHD can be mounted as a secondary bootable drive on a Windows 7 PC
3. The proliferation of virtualization technologies such as Virtual PC, VMWare Server and VirtualBox for client OS's, Virtual Server and Hyper-V for server OS's.
   In this post, I'm going to create VM through VirtualBox for SharePoint 2010 multi server farm installation on my laptop (Windows 7 64-Bit with enabled VT/x (Virtualization Technology).
   Pre-requisites
   
   • VirtualBox 3.1
   • Windows Server 2008 SP2
   • SQL Server 2008 SP 1 / SQL Server 2005 SP3
   • SharePoint Server 2010 Beta

Step 1:

Download VirtualBox for Windows hosts and Install it.

Step 2:

1. Open Sun VirtualBox, click Machine, click New
2.  On Create New Virtual Machine
   1. On Welcome to the New Virtual Machine Wizard screen, click Next
   2. On VM Name and OS Type screen, enter "<your desire VM name>" in Name textbox, select "Windows Server 2008 (64bit)" in Version dropdown
   3. On Memory screen, specify your desired memory like "4096" MB = 4 GB
   4. On Virtual Hard Disk screen, click Create new hard disk and then Next
3. On Create New Virtual Disk
   1. On Welcome to the Create New Virtual Disk Wizard screen, click Next
   2. On Hard Disk Storage Type screen, click Dynamic expanding storage. You can select Fixed-size storage, if you want to create fixed storage
   3. On Virtual Disk Location and Size screen, specify Location and Size of the virtual disk
   4. On Summary screen, click Finish
4. On Summary Screen, click Finish
5. Select your VM from the left panel of Sun VirtualBox and click Settings in toolbar
6. In Settings dialog box, click Storage from left panel, select CD drive node in Storage Tree, and select CD/DVD drive from the dropdown, if you've Windows Server 2008 CD/DVD or you can choose ISO image for Windows Server 2008 by clicking Open Virtual Media Manager button next to dropdown, click OK button.
7. Click Start in toolbar. VM will be started and boot from your given ISO/CD/DVD. Press any key to boot from CD/DVD and Windows Server 2008 setup will be started. For detailed Windows Server 2008 steps

Step 3:

1.  Disable Internet explorer Enhanced Security
   1. Click Start, point to Administrative Tools, and then click Server Manager
   2. Under Security Information, click Configure IE ESC
   3. Under Administrators or Users, click On (Recommended) or Off
   4. Click OK
2. Install Windows Updates
   1. Click Start, point to Administrative Tools, and then click Server Manager
   2. Under Security Information, click Configure updates
   3. On Windows Update screen, click on Check for Updates and Install Updates
3. Adding Server Roles
   1. Click Start, point to Administrative Tools, and then click Server Manager
   2. Under Roles and Roles Summary, click Add Role
   3. On Add Role screen, check the Application Server checkbox, on Required features popup, click Add Required Features, and clickNext
   4. On Role Services dialog click the following and click Next
      1. .NET Framework 3.5.1
      2. Web Server (IIS) Support
      3. TCP Port Sharing
      4. HTTP Activation
      5. TCP Activation
      6. Named Pipes Activation
   5. On Web Server (IIS) screen, click Next
   6. On Role Services for Web Server (IIS), click Next with default options, and click Install on Confirm screen
   7. After Installation click Close
4. Install SQL Server 2008 SP 1 OR SQL Server 2005 SP 3
5. Install Microsoft SharePoint Server 2010 (MSS 2010) Pre-requisites
   1. Start MSS 2010 Installer, click Install software prerequisites, click Next and complete the prerequisites installation
6. Install Microsoft SharePoint Server 2010 (MSS 2010)
   1.  On MSS Installer Welcome screen, click Install SharePoint Server
   2. On Product Key screen, enter your Product Key and click Continue
   3. On Software License Terms screen, check the "I agree..." checkbox and click Next
   4. On Server Type screen, select Complete - Install all components, click Install Now and complete the Installation process.
   5. When installation is completed, On finish screen you are asked to continue with SharePoint Products Configuration Wizard, continue with it
   6. On Database Settings screen, enter your database Server Instance and Username and Password for the database and click Next. Database user should be a domain user. If you don't want to use a domain user in your database setting then you need to create your SharePoint configuration database using SharePoint 2010 Management Shell ("New-SPConfigurationDatabase" management shell command to create configuration database)
   7. On Server Farm screen, select Create a New Farm and click Next
   8. On Configure SharePoint Central Administration Web Application screen, specify the port for Central Administration, select Security Settings as per your requirements and click Next
   9. On Completing the SharePoint Products Configuration Wizard screen, click Next and configuration process will start
   10. On Configuration Successful screen, click Finish

Now Microsoft SharePoint 2010 is ready to use.