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:
- Microsoft Ajax Minifier 1.1 (read more: Announcing Microsoft Ajax Library (Preview 6) and the Microsoft Ajax Minifie by ScottGu)
- JSMin (read more: JavaScript Minifier Utility Posted by Rick Strahl)
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.
 |