Rickard Nilsson

  • Blog
  • Archive
  • About
  • Contact

Welcome to rickardnilsson.net

Rickard Nilsson is a software architect, developer, craftsman, agile enthusiast, and father of three... More

Rickard blogs about crafting software using .NET tooling and solid, development practices.

Follow @rickardn

Top Posts

  • Applying stylesheets dynamically with jQuery
  • My customized Son of Obsidian Visual Studio color scheme for ReSharper
  • .NET Development with Visual Studio on MacBook Pro
  • Code Kata Cast
  • ReSharper User tip #2: Refactor rename namespace
  • Combining and minifying JavaScript and CSS files with Ajax Minifier
  • Dependency injection in ASP.NET MVC with Unity IoC Container
  • C# REPL and Interactive interpreter

Categories

  • .NET
  • Agile
  • ASP.NET 2.0
  • ASP.NET 3.5
  • ASP.NET 4
  • ASP.NET MVC
  • BlogEngine.NET
  • C# 2.0
  • C# 3.0
  • C# 4.0
  • Continuous Integration
  • CSS
  • Design by Contract
  • Design Patterns
  • iPhone
  • JavaScript
  • Kata
  • Moles
  • Open source
  • Personal
  • Review
  • Social media
  • Software development
  • TDD
  • Testing
  • Umbraco
  • Unit testing
  • Unity
  • User tip
  • Web development

Five most recent posts

  • How to unit test your database code when using ServiceStack OrmLite
  • Extract class - ReSharper Ninja tricks
  • ASP.NET MVC 3 Template with built in JavaScript and CSS merging and minification
  • ReSharper Ninja tricks - Generate code from usage
  • Unit testing continuously

Tag cloud

  • agile
  • blogengine.net
  • c#
  • code kata
  • codegarden11
  • continuous integration
  • css
  • dependency injection
  • fakes
  • iso 8601
  • javascript
  • jquery
  • refactoring
  • resharper
  • resharper usertip
  • tdd
  • testing
  • umbraco
  • unit test
  • unit testing
  • visual studio

Recent comments

<< Continuous Integration in .NET - Book review | Podcasts Microsoft .NET developers should follow >>

Combining and minifying JavaScript and CSS files with Ajax Minifier

Saturday, 26 March 2011 22:05 by Rickard Nilsson

Update! Download ASP.NET MVC 3 Template with built in JavaScript and CSS merging and minification

Why should you bother with combing and minifying JavaScript and CSS files? If you are a web developer working with sites with any significant traffic, you simply should because of the impact it will have on the load time of your site and how your visitors will perceive the page loading faster.

In the field of web site optimization, pioneered by Yahoo, there are many rules or guidelines which you should try to follow in hunt for milliseconds on the client side. In fact, it’s on the client that you will get the most value for your optimization work rather than on the server side [SOUDERS]. This is a subset of the rules regarding JavaScript and CSS.

Guidelines for web site optimization

  • Put all your CSS in separate .css files
  • Put your CSS links as early in the header section of the page as possible
  • Minify your CSS files, i.e. remove whitespace etc.
  • Try combining all of your CSS files into one

  • Put all your JavaScript code in separate .js files
  • Put your JavaScript imports as close to the tag as possible
  • Minify your JavaScript files
  • Try combing all of your JavaScript files into one
  • If possible try loading large scripts asynchronously

  • Enable GZIP compression on all your static content, e.g. CSS and JavaScript files
  • Set far future expire headers on your static content

Microsoft Ajax Minifier

I have searched for a tool that could help me implement many of the optimization guidelines and found a few worth taking a closer look at, one of these is the Google Closure Compiler. It has loads of features including file combining, minification, “compiling” your JavaScript into better JavaScript, as well as an API for loading your scripts asynchronously.

However, being a pragmatic .NET developer, I chose the most easily accessible tool available for me, which is Microsoft’s Ajax Minifier. It’s a free tool available on Codeplex and documentation is provided on the www.asp.net site.

Ajax Minifier comes as a command-line application and after you have installed it you can use it through it’s own command prompt.

Minifying JavaScript

Minifying a single JavaScript file is pretty straight forward. Simply type in the command prompt:

  • ajaxmin inputfile.js –out outputfile.js

then add –clobber if you wish to override the outputfile.js if it exists, as in:

  • ajaxmin inputfile.js –out outputfile.js –clobber

Minifying CSS

Minifying a single CSS file is equally simplistic as follows:

  • ajaxmin inputfile.css –out outputfile.css –clobber

As before, add –clobber to override any existing output file.

Combining files

Unfortunately there are no documentation on the asp.net site about how to combine multiple files into one, however, the ajaxmin command itself provides a hint given the /? parameter:

As an alternative to the input file parameter you can use the –xml parameter and supplying it with the path to an xml file of the following format:

xml version="1.0" encoding="utf-8"?> 
<root> 
    <output path="outputfile.js"> 
        <input path="inputfile1.js"/> 
        <input path="inputfile2.js"/> 
        -… -> 
    output> 
root> 

The Ajax Minifier will combine all of your input files into one, minify it, and produce the result in the output file. Using this approach you can also control in what order the files are loaded into the page and sort out any dependency issues, just as you would, had you listed includes in the regular html file (or .master or whatever).

The Ajax Minifier does not seem to have the smarts to deduce that this is JavaScript files so you need to supply it with a –js parameter like so:

  • ajaxmin –js –xml jsxmlfile.xml –clobber

I haven’t found a way to combine JavaScript and CSS in the same xml file so you need to make a separate file for you CSS files with the same format as above and instead of the –js parameter, use the –css dito:

  • ajaxmin –css –xml cssxmlfile.xml –clobber
Tags:   javascript, css, optimization, front end, web developement
Categories:   JavaScript | CSS | User tip
Actions:   | Ping backs (1)

Related posts

ASP.NET MVC 3 Template with built in JavaScript and CSS merging and minificationIn a previous post I described the importance of optimizing your web site resources and how you can ...JavaScript resourcesThere are an endless amount of JavaScript resources outhere and this is my attempt at gethering som ...Building a Photo Album widget for BlogEngine.NETTutorial on how to implement the first steps of a Photo Album Widget for BlogEngine.NET

Comments

June 16. 2011 23:59

trackback

Reflections from day 2 - Umbraco Codegarden 11 in Copenhagen

Reflections from day 2 - Umbraco Codegarden 11 in Copenhagen

Rickard Nilsson

 
Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.
© 2008-2011 rickardnilsson.net
Creative Commons-licens