When you are building a world-class, GSAP-heavy website, performance optimization is usually the first thing to break. We learned this the hard way when our stunning homepage resulted in a miserable 758ms Total Blocking Time (TBT).

01 The Bundling Trap

For years, the gold standard of web performance was to combine all of your JavaScript files into a single bundle to reduce HTTP requests. In the HTTP/1.1 era, this was mandatory. So, we bundled our 13 custom interaction scripts into one massive index-bundle.js.

The result? GTMetrix threw a Grade C at us. Why? Because the modern mobile browser had to download, parse, and execute all 200KB of JavaScript in a single, massive Long Task. This locked up the main thread, resulting in a staggering 758ms of Total Blocking Time.

Pro Tip: A "Long Task" is any task that runs on the main thread for more than 50ms. Each millisecond over 50ms is added to your TBT score.
"In the HTTP/2 era, downloading 13 small files concurrently is actually faster than executing one giant file sequentially."

02 The Solution: Unbundling + Defer

To achieve a flawless A-Grade, we completely reversed the bundling process. We broke the JavaScript back into its 13 modular pieces and applied three key optimizations:

  • Added the defer attribute to every single script tag.
  • Relied on HTTP/2 multiplexing to download them in parallel.
  • Allowed the browser to yield the main thread between executing each script.

Want us to fix your Core Web Vitals?

Guaranteed improvement or full refund. Fixed price. 5-day turnaround.

$997 Audit → Learn More

03 The Results

The TBT dropped from 758ms to near-zero. The First Contentful Paint (FCP) remained incredibly fast because the deferred scripts didn't block rendering. The page is now visually stunning and lightning fast.

758ms → 0ms
TBT Reduction
100/100
GTMetrix Score
0.8s
First Contentful Paint

04 Implementation Checklist

If you are facing similar TBT issues on your own GSAP-heavy or animation-rich site, follow this checklist:

  • Audit your bundle size with webpack-bundle-analyzer or source-map-explorer.
  • Identify Long Tasks using Chrome DevTools → Performance tab → Main thread flame chart.
  • Split your bundle into logical modules (one per interactive component).
  • Add defer to all non-critical scripts in <head>.
  • Inline only the critical-path JavaScript (above-the-fold interactivity).
  • Test with Lighthouse, GTMetrix, and WebPageTest on mobile throttling profile.
  • Monitor TBT in production using web-vitals library + your analytics platform.
Warning: Do not just blindly unbundle without HTTP/2. If your server is still on HTTP/1.1, you will create a connection bottleneck. Verify HTTP/2 is enabled first.

05 Common Mistakes to Avoid

Over the past 15 years of fixing Core Web Vitals, we have seen the same mistakes repeated across hundreds of sites. Here are the most common ones:

  • Using async instead of defer for non-critical scripts. async still blocks the parser when the script arrives.
  • Inlining all JavaScript to "reduce requests" — this kills cacheability and bloats HTML.
  • Loading GSAP, ScrollTrigger, Lenis, and three.js as one bundle. Each should be a separate deferred script.
  • Forgetting to test on a real mid-range Android device — dev tools throttling is not realistic enough.
  • Optimizing for desktop TBT when mobile is what Google indexes for ranking.

The takeaway is simple: HTTP/2 changed the rules. What was optimal in 2015 is a performance killer in 2026. Unbundle, defer, and watch your TBT collapse to zero.