Skip to main content Accessibility Feedback

How to find bottlenecks in your JavaScript

Yesterday, I shared this quote from Addy Osmani (emphasis mine):

That said, even a small bundle, written poorly or with poor library choices can result in the main thread being pegged for a long time in compilation or function call times. It’s important to holistically measure and understand where our real bottlenecks are.

But how exactly do you find those bottlenecks? Sam Saccone (also of Google) shared this awesome little feature in Google Chrome that actually shows you the bottlenecks in your code:

To see this:

  1. Open up Chrome Developer Tools.
  2. Click on the Network tab.
  3. Click “Record” and reload your site.
  4. Click the Sources tab and open up your JavaScript file.

I did this on my own site, and the JavaScript for my site loads and parses in 1.7ms, even if I throttle my network to simulate 3g.

Vanilla JS FTW!


🔥 Hot off the press! I just launched a new pocket guide. Learn how to build interactive web apps with vanilla JavaScript.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips