In the two previous entries we have looked at some of the ways that we can optimize a site for Web 2.0 features by reducing the size and number of files. In our case we wanted to optimize wlp.bea.com in order to ensure that users had a pleasant experience when visiting the site. When it comes to JavaScript there are a few things that can be done, including these three:
- Combine the code to reduce the number of files
- Minify the code to all unnecessary characters
- gzip the code to further reduce the size
The last one is largely a function of the server, and you can download the GZip filter from the Dev2Dev > Utilities & Tools > Administration/Management page, use the mod_deflate module for Apache, use HTTP Compression for IIS, and so on. This will give you the largest bang for your buck in terms of the size of the download, but as mentioned earlier, watch out for firewalls that block or otherwise thwart this compression.
Combining the files sounds easy enough, and in many cases you can probably get by using a command-line tool such as the UNIX-style cat or other utilities. The problem is that some JavaScript libraries and applications rely upon the order of loading, and may not work well (if at all) if this isn't taken into consideration. We use the Dojo Toolkit for the Dynamic Visitor Tools and they provide some nice tools for this. I would expect that most toolkits provide something similar, and if not you could use one of the many available.
To see the effect of combining these files, take a look at this diagram:
The various bits include:
- Disc (Dynamic Interface Scripting) - 23 files combined into 2 files
- PM (Placeable Movement) - 40 files combined into 2 files
- Bighorn (Look and Feel Skeleton) - 2 files combined into 1 file
- DVT (Dynamic Visitor Tools) - 42 files combined into 2 files
Going from 107 files to 8 files is fairly dramatic, especially when you consider that many browsers only allow a couple of connections at a time. We haven't measured the impact on the server side, but it's reasonable to assume that it helps out there as well. In case you're wondering, the remaining 2 files are for localization, one from the Dojo toolkit and the other from the DVT. This brings the total to 108 before and 10 after, a better than 10X reduction.
When it comes to minification a good read is JSMIn, The JavaScript Minifier by Douglas Crockford, and his site has other good tips and tools. Most minification tools do one of more of the following:
- Remove comments
- Remove whitespace
- Remove blank lines
- Remove new-line characters
- Obfuscation
How much compression is possible via minification will vary wildly, but from our own testing it appears that anywhere from 10-30% is possible. There are examples of minified code on Crockford's site as well as others, and you can try it out on your own code using one of the available online tools. What I haven't measured is the difference between non-minified code vs. minified code when all of it is gzipped, but I do know that gzip doesn't always work and therefore minifying the code is worthwhile in any case.
We'll take a look at doing much the same thing for CSS files next, and we still want to look into further optimizations to reduce dynamic code loading, reduce image sizes, and so on. We're also interested in hearing about other tips, techniques, and tools, so please feel free to post a comment or email us.
No comments:
Post a Comment