Note: This post was also shared on the HubSpotDev Blog.
In a recent campaign to improve our front-end web performance at HubSpot, we learned a simple but important lesson: Async != Fast.
1. # of Concurrent Requests
Browsers have a limited number of requests they can make at a single time. In Chrome for instance, that number is 10. If you have 11 requests happening at once, that 11th one has to wait for one of the first 10 to return. There is also a limit per hostname, so if you’re making many requests to your own API, you could be causing waterfall’ing of your requests. You can find browser request limits here.
2. Parse/Eval time
The graph shows load time of our app over time. In cases where the third party script finished downloading before our internal scripts, it delayed time to interactivity and the execution of our own scripts by nearly a full second. It was essentially a race condition based on how fast the third party script loaded.
To fix this issue, we decided the library in question was not important enough to keep so we got rid of it. If we needed to keep it however, we could have tried to defer its loading or wait for some internal hook that says “it’s ok for non-critical elements to load now”.