Impact of defer script attribute on Total Blocking Time (TBT)
Overusing the defer attribute on scripts can create more problems than it solves today
We all know that adding a defer attribute to script tags lets them download in parallel while the page is being parsed, and they only run once parsing is complete. Simple, right?
Well... not quite.
Problem
Here’s the kicker: on Chromium-based browsers, all defer scripts on a page are lumped into a single task. And what does that mean? It hogs the main thread, and if that task runs over 50ms, it can mess with your Total Blocking Time (TBT) metric.
Performance Tab in Chrome DevTools
This issue becomes more noticeable when using a module bundler along with code splitting. Suddenly, you might have 5-10 scripts with the defer attribute on a single page, all unintentionally contributing to your TBT score.
What can you do?
Do nothing—use the Performance Tab in Chrome DevTools to measure the impact and skip if it's an issue at all.
Wait for browsers to fix it—the spec has been confirmed, and future browser updates (however slow they can be) will ensure
deferscripts won’t all run in the same task.Take action— Review deferred scripts, and consider decoupling them either with
asyncattributes or by loading them lazily.
This behavior will definitely change in future.
Will try to keep this updated as long as I can.
Feel free to share suggestions in comments.