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:
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:
xmlversion="1.0"encoding="utf-8"?>
<root>
<outputpath="outputfile.js">
<inputpath="inputfile1.js"/>
<inputpath="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:
I thought that I should do a post about the JavaScript resources I've found most useful. There are an endless amount of JavaScript resources out there and and there is only so much time you can spend going through them to find what you need. This is my attempt at gathering some of the best I know. So here goes.
JavaScript basics
Tools
JSLint
JS Minifier
JS Beautifier
JavaScript reference
by W3School
nice comparison between browsers
JScript language reference
by Microsoft
JScript 8.0
HTML DOM reference
by W3School
support comparison between browsers
JavaScript tips and tricks
by PPK at Quirksmode
everything including core features, event handling, DOM, CSS modification and Data retrieval
Douglas Crockford's JavaScript resource collection
Chief JavaScript architect at Yahoo!
Papers, tools, videos, links
A must see
The JavaScript Programming Language
4-part lecture course with Douglas Crockford
The basics of JavaScript by the man who architected YUI
An Inconvenient API: The Theory of the DOM
3-part lecture course with Douglas Crockford
Browser DOM talk by the man who invented JSON
Advanced JavaScript
3-part lecture course with Douglas Crockford
Advanced topics by the man who wrote JSLint and JSMin
Yahoo! YUI Theater
Endless of hours of video content
This list became long enough so I will do another post on Ajax resources later on.