Widget Image
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna

Sorry, no posts matched your criteria.

Your JavaScript is (probably) fast enough

Making code work reliably is hard. Bugs, architecture, changing requirements, and interface all factor into making a good piece of software. Once your foundations are covered, the most important feature above all is speed. You may be asking “Speed? That’s really the most important feature?” Yes, speed. For better or worse, the information age has trained us to have ever shorter attention spans. With the internet’s Insta-everything, the slower your experience, the more people you’re going to lose. And we’re talking milliseconds that count. Google has a through (and lengthy) reference on web performance, where they explain why speed is so important. Faster sites get better Google rankings, more visitors, more retention, more engagement, more orders, and so on. The faster you deliver your content, the more people will like it, and you.

If speed is so important, why would I say your JavaScript is (probably) fast enough? Coders love to focus on the things they can control, and it commonly leads to unnecessarily focusing on micro-optimizations. Take for example converting a string into a number. It’s a fairly common thing to do when interacting with an API. There are at least a dozen different ways to do it. You should choose the one that is most understandable (I prefer Number()). The millionth of a second that you are “wasting” by choosing a slower but more readable method will never add up to anything significant in the user experience, but will help keep your code more maintainable and less buggy. The API call that you’re getting your data from, on the other hand, makes a BIG difference. You would increase your site’s performance a lot more by optimizing the backend API call or going with a faster API provider.

The first and most important thing to understand when optimizing for speed is the Critical Rendering Path. It’s the series of steps the browser takes before showing anything on screen. One thing you may notice is that JavaScript is only a minority of that path. DOM, CSS structure, and resource request order are orders of magnitude more important than JavaScript expression execution speed. Spend your time focusing on the right things. Udacity even has a free course to get you started understanding the Critical Rendering Path and basic optimizations you can do to make your site faster. If you want to learn in great detail, read High Performance Browser Networking by Ilya Grigorik. Good luck and happy coding!

I'd love to know what you think

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from JavaScript Artisan

Subscribe now to keep reading and get access to the full archive.

Continue reading