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:
- Open up Chrome Developer Tools.
- Click on the Network tab.
- Click “Record” and reload your site.
Vanilla JS FTW!