Optimizing JavaScript for Download Speed--Selections from Chapter 9 of Speed Up Your Site (1/3) WebReference.com

[next]

Speed Up Your Site:
Web Site Optimization

Chapter 9: Optimizing JavaScript for Download Speed

[The following is a selection from chapter 9 of the New Riders title, Speed Up Your Site: Web Site Optimization.]

A lightweight interpreted language, JavaScript is ideally suited to data validation, interactive forms, and enhancing navigation. Presented with such a broad toolset to play with, many authors have gone overboard with JavaScript, bulking up their sites at an alarming rate. Fortunately, JavaScript offers rich opportunities for file-size and execution-speed optimization. By using techniques like packing, compression, and obfuscation, you can realize 50 to 90 percent savings off the size of your JavaScript files. This chapter shows you how to put your JavaScripts on a low-char diet. In Chapter 10, "Optimizing JavaScript for Execution Speed," you will learn how to speed up the execution speed of your code.

Because JavaScript is part of web page content and not a standalone application, making your JavaScripts load quickly is important. The challenge is to find the right balance between size and speed, or between features and responsiveness.

When to Opt for Optimization

"The first principle of optimization is don't."  ^[1]

Most JavaScripts are so fast and many are so small that they don't need to be optimized. First, code your scripts to work correctly and be self-describing by using the best algorithms and data structures you can. Then, if users start to notice a delay in loading or execution time, it's time to start thinking about optimization.

Larger, more complex scripts, such as cascading menus and expandable outlines, can benefit more from download speed than from execution speed optimization. Realistic interactive games and simulations can benefit more from execution speed than from file size optimization. As you'll discover in Chapter 10, you can trade size for speed complexity and vice versa. Optimizing both size and speed while maintaining legible code takes a combination of techniques.

Trim the Fat

JavaScript can benefit from many of the same optimization techniques used with HTML and CSS. Whitespace removal, crunching and obfuscation, file consolidation, and compression can all be used singly or in combination to shrink your scripts. Scripts can typically be reduced by 50 to 70 percent, while combining techniques on amenable files can yield savings of 80 to 90 percent, or a factor of 5 to 10 times smaller.

JavaScript offers more opportunities for optimization than (X)HTML and CSS because you can name your own variables, functions, and objects. The only names you can't abbreviate are the built-in statements and methods like document.getElementById().

As you've no doubt discovered, JavaScripts can become quite large, which can slow down the display of web pages. Any external scripts referenced in the head of your document must load before any body content displays. Even with smaller .css and .js files, it is important to minimize the number of HTTP requests as each one adds an indeterminate delay. The easiest way to optimize JavaScript is to trim the fat in the first place. Strive to add only features that will benefit users and save them time.

---

1. Brian W. Kernighan and Rob Pike, The Practice of Programming (Boston, MA: Addison-Wesley, 1999), 165. Back

[next]

Created: February 10, 2003
Revised: February 23, 2003

URL: https://webreference.com/programming/optimize/speedup/chap9/