.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month

Home >> Articles >> SharePoint >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Improving performance of resources

Posted By:Manning       Posted Date: January 30, 2011    Points: 75    Category: SharePoint    URL: http://www.dotnetspark.com  

Your application will most likely contain images, CSS files, JavaScript, and other resources that the clients will download. Improving performance of resources in Sharepoint. Downloading a lot of content affect more than just bandwidth-it also reduces the performance of rendering the web page. Fortunately, you can improve the overall performance of your SharePoint solution

This article is taken from the book SharePoint 2010 Web Parts in Action. The author shows you different ways to query a standard Tasks list for all items that have the status set to Completed.

40% off any version of SharePoint 2010 Web Parts in Action with the checkout code dnspark40. Offer is only valid through www.manning.com.

Your application will most likely contain images, CSS files, JavaScript, and other resources that the clients will download. Downloading a lot of content affect more than just bandwidth-it also reduces the performance of rendering the web page. Fortunately, you can improve the overall performance of your SharePoint solution.

JavaScript and CSS files can be optimized by reducing white spaces and redundant characters. For this, you can find several tools on the Internet that will reduce the bandwidth and download time.


Microsoft has released a JavaScript minifier tool that minifies and optimizes your JavaScript files, called Microsoft Ajax Minifier 4. It can be downloaded at http://aspnet.codeplex.com/releases/view/40584.

Another simple thing you can do is to reduce the number of files. You can merge JavaScript and CSS files into one or just a few of each. Images are a bit trickier . Instead of having multiple images, merge all images into a composite image so that they all are present in a single image. Figure 1 shows how two images can be combined into a single image. The big benefit is not the size of the resources but rather, the reduced number of requests to the server. SharePoint uses this approach for all images used in its Ribbon.

Figure 1 Using composite images instead of multiple images in combination with CSS sprites can improve the application performance and reduce the server load by only downloading a single image instead of several.

CSS Sprites can be used to display only one of the images from the combined image. This is done by creating an HTML element or ASP.NET control that uses the image as a background image and then uses CSS to specify the background position. Figure 2 shows a Web Part with a LinkButton control that uses a CSS sprite image using the left-pointing arrow in figure 1. When you hover the mouse over the LinkButton control, the image changes to the right-pointing arrow in figure 1, without loading a new image or changing the actual image used.

Figure 2 Using CSS sprites that show a specific part of a composite image in Web Parts will reduce the load on the servers and improve the performance of SharePoint. When you hover the mouse over the image, it changes-not by loading a new image but by shifting the focus on the sprite image to show another part of it.

To create the LinkButton using the CSS Sprite, combine the images and add the resulting image to the project. Then a style declaration must be created with the necessary CSS classes shown below, either directly in a Visual Web Part or preferably in a CSS file.

background: white #1
url(/_layouts/Images/Back_Forward.png) #1
-7px -11px; #1
background: white #2
url(/_layouts/Images/Back_Forward.png) #2
-28px -11px; #2

#1 Defines Back sprite
#2 Defines Forward sprite

This snippet contains three CSS selectors. The first is a CSS class that defines the size of the control, which is the size of the icons in the image. Since a LinkButton creates an A-tag, you also need to make it into a block element. The second class contains the default layout of the link button with a background image (#1). The background image is positioned so that only the left icon is shown. The last CSS class (#2) uses the same image with a different position.
To use these CSS classes, a LinkButton control is created in the Web Part. This control has the CssClass property set to linkButton as in:

The CSS classes ensure that the correct image is used when hovering (and not hovering) the link button.

Improving performance of the application is not all about coding smart. You need to look at the whole picture. When optimizing the resources of the Web Parts, the tools such as Fiddler can be of great use. You can use it to see the size of downloaded resources and the timeline when they are downloaded.


Building applications for SharePoint requires a thorough understanding of the SharePoint objects and how they work. All the SharePoint data is stored in the content databases so most of the commands will use a database connection and query the database. These operations are by magnitude larger than optimizing a for-loop. Not handling these SharePoint objects can jeopardize the stability and performance of the SharePoint farm. That's why you should consider optimizing your JavaScripts, CSS files, and other resources, which can be done using CSS Sprites and other tools.

SharePoint 2010 Web Parts in Action

Wictor Wilén
MEAP Release: March 2010
Softbound print: December 2010 (est.) | 375 pages
ISBN: 9781935182771

 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend