Add to Favorites
5 Tips to Make Your JavaScript Better and Faster
Apr 09, 2012
by
0
Websites that don’t contain interactive elements often feel like little more than brochures. Over the years, there have been a number of ways to add interactive content to your site. Flash and CSS are still commonly used in some tasks but with the introduction of AJAX during the web 2.0 era, and with increasing interest in HTML5, a lot of attention is being focused on JavaScript.
Here are a few tips to make sure that the JavaScript on your site is running better and faster. This list is meant as a primer and should get you stared in the right direction but by no means should it be considered the only way of doing thing.
Use A JavaScript Library
While writing your own JavaScript from scratch can be a badge of honor for some, it may be a waste of time for others. Adding interactivity to a site by implementing rollovers, image galleries and slideshows has gotten a lot easier since libraries like jQuery, MooTools, script.aculo.us, hit the scene.
JavaScript libraries are free, open-source, and have proven themselves to be well tested code in a variety of browsers. This is results in cleaner code that adheres to DRY (Don’t Repeat Yourself) principles.
Use A CDN (Content Distribution Network)
As you start to build out your site every tiny bit of speed will help. Speed becomes another issue when thinking about SEO. Recent studies have suggested that Google is likely to rank sites higher if they’re running faster JavaScript so loading your scripts via a CDN is a good idea.
Instead of hosting, and then distributing a copy of one of the many JavaScript libraries mentioned above, why not link to Google’s copy of the library in your code? Google encourages the use of CDN’s and the benefits are passed on to users.
Minify Your JavaScript
Commenting your code and naming variables proper names is a coding best practice in development environment. But keeping all those comments in your code can result in plump file sizes that are passed on to the user.
Minifying JavaScript is the process of programmatically cleaning out comments, white space and renaming variables. This tiny tweaks can shrink your file size by varying amounts. As an added bonus some of the variable renaming can act as a method to obfuscate some of your code — sort of. While the variable renaming might make it tougher to determine some of the logic of your code it’s probably best not to rely on minification as a security method at all.
Put JavaScript At The Bottom Of Your Page
The debate about putting JavaScript links in the head of HTML documents versus the bottom has been going on for some time now. The Mozilla Developer Network, Yahoo!’s Developer Network and Google all seem to agree that placing JavaScript links all lead to faster load times.
The faster we get our scripts loaded, the bigger the smiles from our users.
Make JavaScript External
Web standard and best practices have brought us a long way. We’ve learned that there should be a separation of presentation, content, and behavior. This methodology has led us to cleaner and more readable code, but it’s also moved us toward faster load times. Keeping our CSS, HTML, and JavaScript in separate files makes sense from a development and maintenance point of view and it’s that much more alluring from a deployment view.
Good Luck!
Developing websites can be tough, but we hope that with the above tips you’ll head in the right direction toward producing much leaner, faster, and maintainable code.
Question? Comments? Feel free to use the comment box below!
Leave a comment
To leave a comment, please log in / sign up
RSS Feed
Facebook
Twitter
LinkedIn
YouTube