What is the best method to reduce the size of my Javascript and CSS files?

Question

When working with large and/or many Javascript and CSS files, what's the best way to reduce the file sizes?

Answer 1

In addition to using server side compression, using intelligent coding is the best way to keep bandwidth costs low. You can always use tools like Dean Edward's Javascript Packer, but for CSS, take the time to learn CSS Shorthand. E.g. use:

background: #fff url(image.gif) no-repeat top left; 

...instead of:

background-color: #fff; background-image: url(image.gif); background-repeat: no-repeat; background-position: top left; 

Also, use the cascading nature of CSS. For example, if you know that your site will use one font-family, define that for all elements that are in the body tag like this:

body{font-family:arial;} 

One other thing that can help is including your CSS and JavaScript as files instead of inline or at the head of each page. That way your server only has to serve them once to the browser after that browser will go from cache.

Including Javascript

<script type="text/javascript" src="/scripts/loginChecker.js"></script> 

Including CSS

<link rel="stylesheet" href="/css/myStyle.css" type="text/css" media="All" /> 

Answer 2

Minify seems to be one of the easiest ways to shrink Javascript.

Turning on zip at the web server level can also help.

Answer 3

Rather than tweaking your files directly, I would recommend compressing them. Most clients support it.

I think you'll find that this is easier and just as effective.

More details from Jeff's adventures with it.