Gunnar Peipman's ASP.NET blog

ASP.NET, C#, SharePoint, SQL Server and general software development topics.

Sponsors

News

 
 
 
DZone MVB

Links

Social

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="/Scripts/jquery-1.3.2.min.js">
</
script>

<script type="text/javascript" src="/Scripts/jquery-ui-1.7.2.custom.min.js">
</
script>

<script type="text/javascript"src="/Scripts/fullcalendar.min.js">
</
script>


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

Metric Before Now Difference
No. of requests 9 9 0
Size of output 448.8 KB 340.1 KB 108.7 KB
Time to load 1.30 sec 1.12 sec 0.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.


kick it on DotNetKicks.com Shout it! 顶 Progg it Shout it

Comments

Paco said:

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.

# February 8, 2010 9:35 AM