Web application Performance Optimization Part 3: Optimizing Images

Optimize Images

Normally development team gets all the images and design artifacts from creative team and it’s pretty normal creative team already optimized them as much as they could. But still there are some techniques that can be used on those articles:

• Optimizer Tools – There are many image optimizer tools available that we can use to optimize images provided by creative team. Here is a list for those:
  
  • PNGCrush
  • PNGGauntlet
  • SuperGif
  • Image Optimizer
  • Image Optimizer Extension
• Converting from one image format type to another – Sometimes converting images from one format to another may also reduce the file size. Like in most of the cases conversion from GIF to PNG save some bytes. PNGOut (http://www.advsys.net/ken/util/pngout.htm) is a very useful tool for this type of work.

CSS Sprite

Fewer HTTP request is the key to improve the page load time for any application. 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 an example image:

Avoid Image Scaling in HTML

Always try to use images with appropriate scale (width x height). Let’s say, if we’ve 50x30 image placeholder on our page. But we’ve used 320x150 image and scale it through HTML img tag. We should scale them appropriately through some proper tool like Adobe Photoshop, Microsoft Expression Design, etc… It will reduce the file size of the image. Also it might lose its resolution and clarity.

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…

jQuery Validation plugin and Credit Card validation issue

This post is just a simple solution to a situation that we ran into in one of my previous projects. We were using jQuery Validation plugin to validate forms in our project and found issues with credit card number validation.

I did some research on the internet related to this issue and found a very interesting post "Validation using 'creditcard2' extension". It is another extension which extends credit card validation for jQuery Validation plugin. Here are some issues fixed in this new extension:

Validation using jQuery Validation extension:

542418083235	Passes
5424180832351	Passes
41111111111111113	Passes
370000000000002	Passes
4111111111111111	Passes

Validation using jQuery 'CreditCard2' Validation extension:

542418083235	Fails
5424180832351	Fails
41111111111111113	Fails
370000000000002	Passes
4111111111111111	Passes

After adding new 'CreditCard2' extension in our project along with jQuery Validation extension at least we got the fix for credit card number. Than we ran into another issue related to credit card type. Both extensions require "Card Type" as a field on the form. As per the project requirement we need to get payment details without asking for "Card Type". Based on the entered credit card number we need to figure out which card type is this. To fulfill this requirement with the existing extension, I made a change in ‘CreditCard2’ extension. This is as followings:

Added a new method in script to get the card type from number:

function CreditCardTypeFromNumber(num) {
// first, sanitize the number by removing all non-digit characters.
num = num.replace(/[^\d]/g, '');
// now test the number against some regexes to figure out the card type.
if (num.match(/^5[1-5]\d{14}$/)) {
return 'MasterCard';
} else if (num.match(/^4\d{15}/) || num.match(/^4\d{12}/)) {
return 'Visa';
} else if (num.match(/^3[47]\d{13}/)) {
return 'AmEx';
} else if (num.match(/^6011\d{12}/)) {
return 'Discover';
}
return 'UNKNOWN';
}

Change the signature of 'CreditCard2' method with the following:

Old: jQuery.validator.addMethod("creditcard2", function(value, element, param) {
New: jQuery.validator.addMethod("creditcard2", function(value, element) {

Replace the first line of the ‘CreditCard2’ extension with the following:

Old: var cardName = param; New: var cardName = CreditCardTypeFromNumber(cardNo);

Move the following lines at the start of the method:

value = value.replace(/[\s-]/g, ""); // remove spaces and dashes
if (value.length == 0) { return false; } // no length
var cardNo = value;
var cardexp = /^[0-9]{13,19}$/;
if (!cardexp.exec(cardNo)) { return false; } // has chars or wrong length
cardNo = cardNo.replace(/\D/g, ""); // strip down to digits

By making the above changes ‘CreditCard2’ extension is ready to work without Card Type field.

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.