JavaScript And Site Performance

Sharing is Caring

JavaScript and the respective frameworks have really began to gain traction over the last couple of years. I would argue that most of the JavaScript frameworks are excellent, and truly are great for the user experience and for the programmer experience.

Unfortunately, many of the JavaScript frameworks are quite large for a web page. jQuery, for example, minified is nearly 56KB. Personally, I wouldn’t use jQuery or another JavaScript framework for static pages that might only read an XML file or display a simple animation: frameworks really are elegant for web applications. The size of frameworks isn’t much of an issue for people on broadband (cable, dsl, etc), but now as web developers we are beginning to see iPODs, iPhones, Blackberries, and other smaller electronics beginning to view our websites where the size and download speed of the frameworks, and website markup can begin to create havoc.

First, we should move all of the JavaScript to the bottom of the body because each HTTP request for an external document will block the rendering of the HTML until downloading has completed. JavaScript according to the W3C can “appear any number of times in the HEAD or BODY of an HTML document.”

Web Developers should also minimize the number of HTTP requests by combining all of the JavaScript into one file, and all of the css into a single css file. The Yahoo developer blog contains some really helpful tips. Yahoo also provides an excellent plugin for Firefox/Firebug that provides some tips and debug-type of information.

Sharing is Caring