There are many parameters which affect performance of web application. The database or server code, n/w bandwidth, client side code, page size to name a few.
The focus of this article revolves around how we can use "Web Essentials" tools to improve performance of the application in the area of client side code, page size etc.
In this article, I will try to explore some of the features of "Web Essentials" extension of Visual Studio which helps us improve performance of web application.
"Web Essentials" extension of Visual Studio helps tremendously in implementing some of the classic optimization techniques on the client side.
What is Web Essentials
"Web Essentials" is the Visual Studio extension which is managed as a open source project by Mads Kristensen. However, most of the popular features of this plugin finds its way into official release of Visual Studio.
So, it is possible that the features that are present in Web Essentials at the time of this writing are already part of latest VS version.
You can download the Web Essentials extension from this official site
Performance Optimization features
To explain the features which helps in the application performance improvement, lets consider a sample web page as below.
Like the usual asp.net page, this demo contains quite a few images (in toolbar and in the footer). Also, this page uses few jQuery plugins.
To correctly measure the performance of this page, I am using Firefox plugin Yahoo's YSlow and Google's PageSpeed. The YSlow grades this page as "D" (with overall performance rating of 63) which is not bad but there's a scope to improve this further.
Now, let's use some of the features of Web Essential to improve this grade.
Getting Web Essentials
Web Essentials is a VS extension. I am using VS 2013 extension for this demo. You can get the relevant version of extension from this location (However, some of the below features may not be available for VS2012 and VS2010)
Note: Simply double click the .vsix file to install the extension. Please note that, no VS extensions work with any of the VS express versions.
Lets see how Web Essentials can help us improve the performance
The beauty of this feature is, you can continue using un-minified version of files for development and when you save the file, it will automatically update the minified version of the file.
Minifying helps reduce size of file and effectively less content to download on client side. However, it will still require number of HTTP requests for each file. Bundling is technique in which multiple files are bundled together so that number of HTTP requests can be reduced to download same content.
Give name to bundle
This will create a minified bundle file.
Similar to minification, change in any of the bundled file causes bundle to be updated as well.
The next optimization opportunity is to use image sprite instead of separate HTTP requests for each image. Image sprites is similar to file bundling however, it is difficult to manage the sprite file if there is change in any of the images.
Image sprites helps us reduce the number of HTTP requests drastically since whenever browser comes across <img src='...'> tag, it creates separates HTTP request to download that image. If we combine all these images(or at least relevant images) together in a single image then we can quickly cut down lots of HTTP requests effectively improving the total load time.
After that, the required portion of sprite image can be displayed in different parts of page using CSS.
With Web Essentials, you can do all this in few clicks. Simply select image files that you want to combine in a single file right click one of them then select
Web Essentials -> Create Image Sprite
You will then be asked to give the name to the sprite package.
Web Essentials will then create the whole package for the sprite image which includes sprite image, a CSS stylesheet which contains classes that you can use to refer to individual images from the sprite.
This also generates LESS file along with source map file. We will look at the LESS support in Web Essentials in a separate post.
As you can see in above preview screenshot, you can hover over the image sprite file and see how all the images are combines together to form a sprite.
In our example page, we can now remove all references to individual image files and set the respective CSS classes.
Optimizing Image Files
Another great way of improving load time of page to optimize the all the images used in your application. In some scenarios, I have observed size of images files being reduced to almost half. Hence, this can work as a solid performance booster.
Most of the time image file contains lot of content which can be safely removed from the file without affecting image quality.
There are many "Image Optimization" tools available online such as Yahoo's Smush.it which optimize the image size without affecting its quality. I used to manually optimize the images using this online tool.
Web Essential provides out of the box functionality to optimize the image. Although this seems like a small feature, it is incredibly useful.
To use this feature, simply right click the image file in solution explorer and select
Web Essentials -> Optimize image
This will use some commonly known image optimization tool and will replace the image file with the optimized version. You can also see the how effective the compression was by observing the message in left bottom corner of Visual Studio.
That's pretty cool... isn't it?
Note: When using image sprite functionality, the generated sprite image is optimized by default.
Images as Data URIs
Every image can be converted into base64 encoded string and browser can render them fine. Setting background image of some controls as base64 encoded string allows us to reduce the HTTP request.
However, the base64 representation of image can be very large in size as compared to original image size. Hence, this should be used only in case of small images which are not used repetitively in the whole web site (because, Data URI images cannot be cached by browser).
Web Essentials helps you in also deciding which images should ideally be converted to base64 data URI.
Lets look at a simple StyleSheet class which refers to a small image (16x16). As soon as you hover the mouse over image URL, WE displays a help message which suggests you to convert the image to base64.
You can then simply keep the cursor on the "url" keyword to get the help prompt and then select "Embed as base64 dataUri" (as you can see in below image, you can also optimize the image from this option)
Web Essentials will then replace the image URL with base64 string. Also, it will maintain the original background-image CSS property for legacy browsers which cannot understand/process dataUri's
Alright, after applying all these optimization tricks let us run the page and see what YSlow feel about it.
The grade is "C" as compared to "D" earlier. The overall performance scored has been improved from 63 to 78.
That's pretty good considering our demo page did not have too many images or JS/CSS.
In this article, we used classic web performance optimization techniques. However Web Essentials makes it super easy to add these features and most importantly it becomes very easy to make changes to the original versions of files/images without worrying about optimized files/images.
All these Web Essentials features would probably become part of future versions of VS itself. However, why wait for till then? Download the extension and give it a go.
I would love to see your feedback about the article; as well as any other feature of Web Essentials that you most like.
Thanks for visiting :)