One of the top priorities for any front end developer is creating better web performance and an improved user experience overall. One of the best ways to accomplish this is by making edits and changes to JavaScript code that make it run more efficiently. More often than not, marketing departments are the reason for overburdened JavaScript codes, because they want the website to do everything. Fortunately, there are some easy changes you can make that will improve the overall performance of your code and the website as a whole.

Try these JavaScript tweaks for better web performance:

The following are a few quick changes you can make to your JavaScript code to make it run more efficiently.

Reduce Dependencies

Better web performance on mobile devices can be particularly difficult due to more constrained bandwidth. One way to work around that issue is to reduce the number of dependencies in your code as much as possible. This allows the most important elements of the web page to load with fewer data packets transferred.

In addition, you can minimize code using a cool like JsMin or Google Closures, which will combine each piece of code into easier-to-load modules. Finally, add caching as much as possible through the use of ETags.

Delay vs. Async vs. Modular Loading

Delaying the firing of JavaScript is a common way to defray the performance cost of the scripts.  But delaying still means they have to be downloaded and executed — no matter what — since they still exist in the DOM and have to be parsed by the browser in the initial DOM process.

Two steps to go beyond just delaying JavaScript include:

• Using the HTML5 async tag, when implemented correctly, will execute scripts in parallel, avoiding any blocking behavior that may occur when a browser encounters a script in parsing the document
• Even better, implement modular loading via the popular Require.JS loader, which grants some additional flexibility (if you’re willing to do the customization work for it). Modular loading uses function wrappers to help solve the complex dependencies that often come parceled with JavaScript. It also means JS doesn’t necessarily have to be parsed in the initial DOM process.

 Load on Mouseover

For many functions written in JavaScript, they do not need to be running until the user is ready to activate them. Setting them to Load on Mouseover will dramatically improve web performance by only loading elements of the code when a user moves the cursor over them.

To add this functionality, simply add “explicit” to the end of each piece of the script. Then, create a loadTag that activates when the Mouseover event occurs.

Define local variables as often as possible

One of the biggest slowdowns occurs when your script has to search the scope chain for variables. If you find yourself using a variable more than once, it is worth defining it locally. For example, changing

This:

To this:

These are just a few examples of how you can improve the performance of your JavaScript, thereby providing better web performance for your users. Be creative and think of other ways you can reduce load times and bandwidth for your users!

Key Takeaways

• JavaScript can be quickly edited to improve performance
• Load-on Mouseover prevents elements from loading until the user needs them
• Reducing dependencies will reduce the bandwidth demanded by a particular web page
• Local variables will reduce the amount of power required to perform an action

Sources: De Salas Works, Jon Raasch