Develop Reference

Why is the source code for some web pages all in one line?

When viewing lots of webpages' source code (like JS,CSS,HTML), I find them in one line. How did they make this? Do they use some tools to make it? Can we restructure it?
Thanks.

It's minified HTML, i.e. with the whitespace removed.
There are many tools that can do this, you can find them by Googling for minify HTML.
To un-minify it or beautify it as they say, you can google for beautify HTML.
The same applies to CSS. It can be minified and beautified.
Javascript can also be minified however most tools nowadays obfuscate the symbols which means that although you could beautify it, it will be harder to understand it afterwards.
The alternative to Javascript minification is the Javascript Packer

Using Minify technique
Some free tools also available
http://developer.yahoo.com/yui/compressor/
http://www.minifycss.com/minify-tools/minify-css-tools.php
http://jscompress.com/
http://www.minifycss.com/css-compressor/
http://code.google.com/p/htmlcompressor/
It combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.

This is a result of using g minification tools. The intention is to make the JavaScript as small as possible so it can download as quickly as possible.
YUI compressor is one and there are many more available.

Code of JavaScript, CSS etc are one liner to be specific 'compressed' to remove the extra spaces from the code.. This reduces the size of the file thus loading time of the css or javaScript file reduces...
There are many tools that are use to compress the code for e.g. http://javascriptcompressor.com/

i think uglify.js is good tool which minifies the js code. refer this link https://github.com/mishoo/UglifyJS , worth learning..

how to compress more jquery file?

is there any way to compress more jquery base file?
what i have is about 56K and i need a more light file because of dial-up speed(56k).

You can also check the The JavaScript CompressorRater and see how different tools will compress jQuery. The rule of thumb however is to enable GZIP compression for browsers that support it.

jquery 1.4 compressed with JSMin is close to 56K. packer by dean edwards generally gives a little better compression but would take longer to decompress on client side. you can compare both at jscompress
haven't seen jquery compressed with closure being used anywhere. Personally I'd go with JSMin and serve with gzip compression. That brings it down to ~23K

You can also use the ones hosted by Google, even uncompressed. The users probably have them loaded in their browser's cache, so they're not downloaded at all on your site.
http://code.google.com/apis/ajaxlibs/documentation/#jquery

You can use different minifiers to get slightly different results, and let the server use gzip to compress the files.
Google hosts the library, so you can use their server and hope that the users already have the file in the cache.
However, the download time of the library will still be at least three seconds over a 56k modem. It's not a light-weight library, if you use it you have to accept the extra load. Consider if you need it, or if plain Javascript would be a better solution.

http://www.google.ru/search?hl=ru&q=compress+javascript&btnG=%D0%9F%D0%BE%D0%B8%D1%81%D0%BA+%D0%B2+Google&lr=
There are a lot of technics to compress js-files. You should start with downloading the min-version of jquery files - http://code.jquery.com/jquery-1.4.2.min.js.
You can also think about reducing your websites size

Check if your server compresses Javascript files (e.g. with this tool).

What do you do to your JavaScript code before deployment?

Do you have a step in your deployment process that minifies JS? Do you have any sort of preprocessor for your JavaScript that allows you to leave in comments and console.logs and then have them automatically stripped out? Is your JavaScript machine generated by GWT or Script#? Do you use ANT or another tool to automate deployment?
I see a lot of JavaScript that looks like it comes right out of the editor, complete with lots of white space and comments. How much of that is due to not caring about the state of the deployed code, and how much is due to the spirit of the open web?

I usually check it out with JSLint to make sure it is bug-free, then pack it/encode it with YUI compressor.

My steps include:
I write Javascript using TextMate with the Javascript Tools bundle installed. This JSLint's my files on every save and notifies me when errors occur.
I use Sprockets to automatically concatenate my various Javascript files.
I run the resulting concatenation through jsmin to generate a minified version.
I end up with a concatenated lib.js file and a minified lib.min.js file. One I use for development, one for production. TextMate commands help automate it all.
I'm still looking for a good solution to actually (unit) test my scripts.

Check out YUI Compressor its a console app that you can use to minify (strip out comments, whitespace etc..) and also obfuscate your javascript files.

JSMin it from Douglas Crockford. We've got it hooked up as a macro in Studio as well as a post build item for some of our larger projects

FWIW, here's an interesting mini-benchmark on various ways you can minimize your Javascript source:
http://www.ericmmartin.com/comparison-of-javascript-compression-methods/
In short:
gzip compression in HTTP protocol really makes a difference (although you need to pay a CPU cost at the server side)
minification (removal of whitespace/comments, change of variable names etc.) also helps, and if you want best result, use it together with gzip compression
js-based decompressors are most likely useless - while you might get smaller size, the CPU overhead on the client is significant.

For one of our products, we concatenate all Javascript files together (most files are used on most pages, so this makes sense for us) and use Javascript::Minifier. This has given us a pretty nice speed boost.

A lot of it is probably due to not caring about people that might be viewing your pages on slower machines with slower connections and assuming that everyone has a 50Mbps line and three Gigs of RAM.
We are minifying our (hand-written + plugins, jQuery, etc.) JS as a part of the build process in .NET environment. No preprocessor, this is something we should definitely be doing once time permits.
P.S. By the way, we're not using console.log, as this will break IE. Instead we have a simple wrapper function, something like:
function log(stuff) {
if (window.console && window.console.log) {
console.log(stuff);
}
};

I have a PHP script that does it on the server side and keeps a cache of whatever it pulls from the source folder(s).

One word- packer

Light a candle, whisper a prayer against IE6 errors, and click "go". Does that count? :)

I don't minify my own javascript code since text tends to gzip/compress well.
I would minify a very large (say > 100 kb) javascript library (but then again I probably would not want to be using such a large library (or just ship what i use)).
I tend to believe that a lot of the javascript-minification is (in reality) done to achieve some sort of (futile) obfuscation of javascript code instead of the proclaimed end-user performance gain.

There's also a .NET port of YUI Compressor which allows you to:-
intergrate the minification/file combining into Visual Studio post-build events
intergrate into a TFS Build (including CI)
if you wish to just use the dll's in your own code (eg. on the fly minification).

I thought I would share my approach to js deployments. Have a look at this blog post:
http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure-Compiler.aspx
This also includes code to compile (using google's closure compiler) at runtime (when needed).
Thanks Guido

55KB of JQUERY is too big for my application

Is there any way to truncate jQuery?
I need to use only AJAX related methods in jQuery code.
As you might know the minified version is only 55KB and the uncompressed version is about 110KB.

I think the answer to your question is 'probably not'.
But consider these points:
You don't have to serve it on every page request, sensible HTTP response headers should mean it only needs to be downloaded once per client browser.
If you use the Google CDN for jQuery, your client may not need to download it at all, as there is a very good chance they will already have it cached.
i.e.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

Using gzip compression it brings it down to 19kb. It's going to be cached from there on out, so I'm not sure why it's an issue. That's far less than most decent sized images.
Using a CDN is also an option if you don't mind someone else hosting your code and your issue is just overall bandwidth.

Is there a reason why you need to make it smaller? Coming in at a size of 55kb is rather insignificant nowadays.
If you need it faster, try having it link off of Google, it's always cached on their server. Look at their documentation here.
You can also try downloading your Javascript files asynchronously.

You can go to an older code base if it suits your needs.
1.2.6 packed is 30KB
1.1.4 compressed is 22KB

You can try to build your own jQuery from source. jQuery is actually cut into little modules and you could try to disable some of them when building your own jQuery.
If you only need AJAX, you may not need DOM manipulation, CSS utilities or animations.

Um, why is jQuery too big? How large are your pages?
What you should be doing is forcing the client to cache it so it's only downloaded once. You do this by setting the Expires header often accompanied with versioning the file so you can force a reload if necessary.
You could manually prune the code but that's probably going to be a huge headache.

How to organize minification and packaging of css and js files to speed up website?

I am doing speed optimization for my website application. And I found some practises to do that.
For example Best Practices for Speeding Up Your Web Site from Yahoo.
Among them are:
Minify JavaScript and CSS.
Minimize number of HTTP Requests by combining several files (css, js) into one.
My question is what infrastructure, tools and building process you use or can recommend to perform that?

According to the JavaScript Compression Rater, the most efficient tool is the YUI Compressor or JSMin.

You can use YUI Compressor.
It can compress JavaScript as well as CSS. Just run it for all your files, then concatenate them into one 'package' file. You can either do that manually, write a Makefile or use some script to compress "just-in-time" on web request, although you might want to cache the resulting file.

The Yahoo tips are excellent. I use gomez to test the results of optimization efforts. Minification is a good step. I've found bigger impacts can usually be made by adjusting the way pages are put together (particularly in reducing how much images get cut up into little pieces to reduce the number of requests). Anyway, this yahoo blog gives a pretty good rundown of minification tools. I typically stay away from obfuscation unless there's a compelling reason beyond the relatively small performance kick. The actual steps to install and use a minification tool are relatively straightforward.

Or you could just configure your HTTP server to GZIP compress all text documents.

I do ASP.NET, so I use CruiseControl.NET with NAnt for my build process. A part of this build process is compressing with YUICompressor which in my experience is the best compressor out there.
If you don't do ASP.NET, theres still the original CruiseControl with Ant that you can use in the same capacity.
The reason I find this a superior set up is because a) all the tedious stuff is automated and b) if you're testing on your own machine you dont have to debug a single super long string of JS :)

I've integrated minification to my deployment process. I do it in perl with packages JavaScript::Minifier and CSS::Minifier.
During my development, I want to keep the script expanded. I put some comments in my HTML so that my script knows which files to put togetheer and minify:
<!--- MinifyJS[js/minified-1.js] -->
<script src="..."></script>
<script src="..."></script>
<!-- end[js/minified-1.js] -->
<!--- MinifyCSS[css/minified-1.css] -->
<link ...>
A couple of regular expression, and I quickly get a "production" version with minified files.

I wrote my own custom manager for this. It uses google's closure compiler and compresses files only when needed in release mode. Check it out:
http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure-Compiler.aspx
Thanks
Guido Tapia

Big fan of Dean Edwards /packer/ myself - comes in a variety of flavours.

By following yahoo blog link I've found one real solution - "Make your pages load faster by combining and compressing javascript and css files" by Niels Leenheer.

For compressing everything before uploading it to web, this program is great both for CSS/JS/HTML:
http://www.w3compiler.com/
It's even possible to select areas not to compress, as it's not all MVC codes in your markup that supports getting compressed.
And it saves backup files each time it compress your files, so you can easily decompress it with just a click.

I've found Minify most useful for my PHP projects. Very easy to use, just saves time configuring minimization, compression and caching of CSS and JS files manually. Also has a neat grouping feature.
Some notes about YUI Compressor
YUI Compressor generates without line breaks at all while Minify has some.
Be careful if you have escaped strings. I've found out that YUI Compressor unescapes them. So strings like "\'" become "'".