ASP.NET MVC Performance II: Optimizing resources

In my previous posting about ASP.NET MVC performance I showed you how to combine resources like scripts, style sheets and images. In this posting I will show you how to minimize resources so we don’t waste the bandwidth we got.

Optimizing scripts and style sheets

Scripts and style sheets can be optimized by removing unnecessary characters from files. Usually these smaller versions are called minimized scripts and style sheets. For smaller resources you have no remarkable effects but for larger resources you may win in tens or even hundreds of kilobytes of file sizes. The process of decreasing resource size this way is called minifying.

jQuery and other popular JavaScript libraries come in two versions usually: original scripts and minified scripts. To minify custom scripts you can use custom tools like:

Feel free to use these tools to minify your own scripts.

In our previous version we decreased the number of requests that browser has to do when downloading our page. We used Combres to combine scripts and styles to packages that are downloaded only once as separate file for scripts and the other for styles. Now let’s replace scripts with their minified versions. Our script block looks like this now:

<script type="text/javascript" src="//static.gunnarpeipman.com/Scripts/jquery-1.3.2.min.js">
</
script
>
<
script type="text/javascript" src="//static.gunnarpeipman.com/Scripts/jquery-ui-1.7.2.custom.min.js"> 
</script
>
<
script type="text/javascript"src="//static.gunnarpeipman.com/Scripts/fullcalendar.min.js"> 
</script
>

Let’s see now how much better our situation is now.

MetricBeforeNowDifference
No. of requests990
Size of output448.8 KB340.1 KB108.7 KB
Time to load1.30 sec1.12 sec0.18 sec

Well, size of output is now 108.7KB smaller than before. For 100 requests we save about 10.87MB of traffic. Not bad at all.

Optimizing images

You can also optimize images. By example, some of your PNG images can be way smaller when they are saved as JPG or GIF. Same way you can save other formats to PNG to get smaller files. If you win 1KB of size then it makes 1MB less traffic for 1000 requests.

As I am not designer I am not very familiar with all choices you have. But here are some tutorials you may find interesting:

If you are using designs by professional web designer you usually should not be afraid that you are the one who has to optimize images. But if it goes like it generally goes in the world then you should know at least some tricks.

Conclusion

Minifying scripts and styles and optimizing images may give us way smaller output compared to original scripts and images. Of course, there are more ways how to get output smaller and how to get less requests. In the next posting I will show you how to get better results than ones we got here.

Gunnar Peipman

Gunnar Peipman is ASP.NET, Azure and SharePoint fan, Estonian Microsoft user group leader, blogger, conference speaker, teacher, and tech maniac. Since 2008 he is Microsoft MVP specialized on ASP.NET.

    One thought on “ASP.NET MVC Performance II: Optimizing resources

    • February 8, 2010 at 2:35 pm
      Permalink

      I would say why bother?
      If you have caching enabled on client side and server side, and compression as well on your web server, this technique could only be useful the very first time a user browse your website.

      I proposed it to my team a while ago but why bother if you use caching correctly.

    Leave a Reply

    Your email address will not be published. Required fields are marked *