What Is the Best Method to Reduce the Size of My JavaScript and CSS Files

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

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" />

Ways to compress/minify javascript files

Yahoo's compressor, for a combination of safety, and decent compression.

It uses a real JavaScript parser, rather than using a set of regular expressions. It is able to do the same kind of variable renaming that Packer can, but is much safer. It won't break if you forget to put a semicolon at the end of a function definition.

Packer does have an encoding feature that generates an even smaller file. However, it's only effective if your web server does not support gzip or deflate compression. With gzip / deflate, YUI and Packer generate files that are about the same size.

How do I know if my js/CSS files is too huge?

Zero bytes. It sounds facetious, but there's no such thing as an "optimal" file size. The bigger it is, the longer it will take your page to render. How fast is the connection to your web site for your visitors? If it's a video-oriented site, for example, it's probably relatively fast since people with 64 kbps modems aren't going to be trying to stream anything that large. If it's a simple text site displaying information to satellite users in Zimbabwe, it might be quite slow.

So let's imagine that the average speed is 1.5 Mbps. Realistically, halve that to 750 Kbps. That's about 94 KBps. So if your CSS file is 50 KB and your javascript file is 50 KB, it will take a little over one second to download them for your visitor. Is your site highly interactive, with users expected to click around quickly from one thing to another? If so, then that once second delay could be extremely irritating. If not, then it might be perfectly reasonable.

If you find your file size getting too large, you might want to consider looking at some "minifying" utilities; these are utilities that will take your code, replace variable names ("my_descriptive_variable") with shorter names ("a"), remove whitespace and comments, etc. Sometimes these utilities can reduce your code to 10% of what it was before.

Ultimately, though, "optimal" is completely subjective. Try designing minimal script/CSS files, add a bunch of KB of comments to them, and load your page on low-end connections until you consider it too slow. That will give you a pretty good idea of what your upper limit should be.

Javascript compression options

Here's what you must do

1) Concatenate javacript files to minimize the overhead related to file querying (this overhead will disappear with HTTP2 but we're not quite here. Today your page is probably more slowed by the number of files than by their combined size. There are many ways to concatenate files but it should be automated so that you don't have to do it manually every time you change the source files. If you're not familiar with powershell and the likes, dive into build solutions.

2) Don't compress the JS file(s), let the browser and the server negotiate the compression themselves. Any decent server gzip the JS files it serves.

3) Minify the concatenated file. Here again there are several solutions. Uglify.js is both fast and efficient. The minification is a process which consists in removing any useless (for the browser) part of your code (comments, spaces, etc.) and renaming some variables in order to make the code lighter. You'll configure the minification to also produce a source map file which will let you debug in the browser (not quite as easily than with an unminified file but much better than without a map).

---

Related Topics