Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I know that there are ways to dynamically load it into the page, but if I want to compress my code so it loads even faster, how do I do it?

share|improve this question
add comment

9 Answers

up vote 3 down vote accepted

Minify seems to be the standard. Here is a blog post with an explanation of how to use it.

share|improve this answer
add comment

I highly recommend Google Closure Compiler for compressing JavaScript code. I use it personally, and it is also the official compressor used by the jQuery project.

This project can do quite a lot, but the basics are this:

java -jar closure.jar -js javascriptFile.js > javascriptFile.min.js
share|improve this answer
    
+1 great answer. Do note that google closure, besides compressing more than yui compressor, also detects common javascript errors such as {1,2,3,} which will completely destroy your website on a "certain browser" (yeah, what other browser could possibly be so stupid??) –  Andreas Bonini Jul 8 '10 at 23:35
add comment

I use Justin Etheredge's SquishIt project. It is awesome! For asp.net only however.

  • It uses YUI for CSS and Javascript compression.
  • It supports LESS
  • I believe it supports Google Closure
  • It is ridiculously easy to use.

Read the intro to squishit blog post.

Here's some sample code that will render a single <script> tag and a single <link> tag. Both of which will point to a combined and minified JS/CSS file.

<%= Bundle.JavaScript()
    .Add("~/js/jquery-1.4.2.js")
    .Add("~/js/jquery-ui-1.8.1.js")
    .Render("~/js/combined_#.js")
%>

<%= Bundle.Css()
    .Add("~/css/reset.css")
    .Add("~/css/text.css")
    .Add("~/css/960.css")
    .Render("~/css/combined_#.css")
%>
share|improve this answer
    
Worth noting that's an ASP.NET solution. –  David Bick Jul 8 '10 at 20:31
    
Yup, I noted that int the 3rd sentence. –  jessegavin Jul 8 '10 at 21:10
add comment

Add all your javascript to a single file and compress it with for example jsmin(http://www.crockford.com/javascript/jsmin.html). Do this as well for your CSS but use another compression technique (removing whitespace). Since this is a boring repeating task there are scripts available that will do just this for you. I use Django and use django-assets to fully automate this process.

share|improve this answer
add comment

Use gzip.

share|improve this answer
    
You can gzip HTML files, JavaScript, CSS, as well as any text response (XML/JSON). This will lower the response size, which can increase the speed of your website. –  Sean Moubry Jul 8 '10 at 23:13
add comment

If you want to compress the size of your Javascript files, you can use packer.

share|improve this answer
add comment

There are several very popular tools for compressing/minifying your JavaScript and CSS.

  • Yahoo YUI Compressor
  • Microsoft AJAX Minifier
  • Google Closure Compiler (JavaScript-only)

All are very powerful -- you can find comparisons of them quite easily. All are command line tools, so they can be easily integrated into your run automatically when you build or publish your website.

You can also find many websites that run these tool for you, which will save you the time of having to install/configure. This also helps if you aren't familiar with using command line tools.

Personally, I've always used YUI Compressor.

share|improve this answer
add comment

Check this comparison of JS & CSS minifiers to pick what suits you best -

share|improve this answer
add comment

This one uses YUI compressor algorithm:

http://www.jscompressor.com

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.