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).
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.
"In the HTTP/2 era, downloading 13 small files concurrently is actually faster than executing one giant file sequentially."
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.
- Added the
deferattribute 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.
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.