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…