How to improve JavaScript performance: Practical tips

Artyom Dovgopol

Code optimization is an art form. It's like racing: you can just hop in and drive, or you can tune every part of the engine. The difference is obvious right away 😉

Key takeaways 👌

Introduction

Remember those old computer games that lagged even on powerful machines? Often it wasn't the hardware but the code. The same thing happens with modern websites – even a super-powerful server won't save you if your JavaScript is poorly optimized.

Today, the average JavaScript code size on websites reaches 350 KB, and it's only growing. Studies show that about 40% of this code is never used during page load. Every extra kilobyte means additional loading time, especially on mobile devices and slow internet connections.

Practical optimization tips

Code optimization is like packing a large suitcase for travel. There are several proven ways to make your baggage lighter:

1. Remove the unnecessary. Remember how mom taught you to pack for trips? "Only take what you need!" Same goes for JavaScript – every extra line of code means additional milliseconds of loading time.
   Code name example

   // Before:
   function loadUserData(user) {
       console.log('Checking data');
       console.log('Loading...');
       return user.name;
   }
   
   // After:
   function loadUserData(user) {
       return user.name;
   }

2. Load smartly. Put essential items on top, the rest at the bottom. In code, we use async and defer:
   Code name example

   // Core scripts - immediately
   <script src="core.js"></script>
   
   // Secondary loads later
   <script async src="stats.js"></script>
   <script async src="stats.js"></script>

The most complex performance issues often have simple solutions. Sometimes just properly placing async and defer on your scripts can make your site load twice as fast. It's not about complex optimizations, but understanding the basics

Lazy loading

Imagine a restaurant where the chef prepares all dishes in advance - some might go bad, and the kitchen is always chaotic. A smart chef cooks as orders come in.

Code name example

// Load heavy functionality 
// only when needed
button.addEventListener(
  'click', 
  async () => {
    const { heavyF } = await import(
      './heavy-f.js'
    );
    heavyF();
  }
);

DOM and how to work with it

Working with the DOM often becomes a performance bottleneck. Here's a classic example of inefficient code you might find on many websites:

// Common mistake when working with DOM
for (let i = 0; i < 100; i++) {
document.body.innerHTML += 'Block';
}

// Optimized version
const container = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
container.appendChild(document.createElement('div'));
}
document.body.appendChild(container);

And more about performance...

Check out our article What is Web 3.0 and what it means for Internet evolution, where we dive deep into how the Web 3.0 standard is changing approaches to web application performance

Recommended reading 🤓

"JavaScript: The Good Parts", Douglas Crockford

If Douglas Crockford wrote a cookbook, this would be it. Only the tastiest JavaScript recipes.

On Amazon

"Eloquent JavaScript", Marijn Haverbeke

Marijn Haverbeke wrote this book as if he's telling an interesting story rather than teaching programming.

On Amazon

"High Performance JavaScript", Nicholas C. Zakas

The go-to book for those who want their code to fly, not crawl.

On Amazon

Conclusion

JavaScript optimization isn't a one-time task – it's an ongoing process of improvements. Start with simple steps: remove unused code, set up proper script loading, implement lazy loading. Each small improvement adds up to a significant performance boost.