Making things fast in world of build tools
summary
A playable web game, proxx.app, starts at 62 KB to interactive and 5.1 s on 3G (11 s on 2G) and is shrunk by concrete changes: swap to preact saving ~30 KB, use rollup with custom plugins to inline and preload fonts and scripts, subsetting fonts and inlining critical JS, prerender with puppeteer, and lazy-load nonessential chunks. Resulting initial JS is about 11 KB, interactive time halves on 3G and drops to just under 6 s on 2G; the final build uses 16 rollup plugins.
AI-written summary · about
chapters (16)
- 0:00Start
- 0:58Geophone
- 4:32Performance Optimizations
- 9:27Generate Bundle Hook
- 12:13Webpagetest
- 14:21Competitor Analysis
- 17:03Network Panel
- 22:15Real-World Impact
- 23:18Pre Render
- 30:45Time to First Byte
- 32:42Google Fonts
- 36:18The First Interaction Is Basically the User Picking What Kind of Game They Want To Play and the Only Thing We To React to Is the User Hitting the Start Button and if for some Reason the User Manages To Press the Start Button before Our Game Logic Has Loaded that's When We Can Spin Up a Loading Screen Everything Else Can Really Just Louis Liking Later It Won't Really Matter Yes So this Is Where We Need To Code Split at this Point because this Is Our First Interactive Bit We Don't Have the Fancy Animated Background or the Logo That You Know that Stuff Is Non-Essential Really Co Splitting in Roll Up Works Much the Same as It Does in Webkit
- 36:40So this Is Where We Need To Code Split at this Point because this Is Our First Interactive Bit We Don't Have the Fancy Animated Background or the Logo That You Know that Stuff Is Non-Essential Really Co Splitting in Roll Up Works Much the Same as It Does in Webkit and Web Pack and Parcel Imports like this this Will Cause Whatever Dot J's To Be Bundled into the Same File if You Want To Be Code Split Instead You'Ll Use a Dynamic Import and this Will Return a Promise so if You Want To Use that Module Sometimes Later You Will Have To Await It Just in the Usual Way
- 37:18And that Makes It a Sink Which Can Bring Its Own Problems for Example Most of the Ui Framework We Are Using Nowadays Expect Rendering To Be Synchronous and Can't Really Handle Promises So React Suspense Is Aiming To Change that by Allowing You to Lazy Load Components but Pre-Act Doesn't Have Suspense so of Course We Wrote It Ourselves in 20 Lines Seems like It Obviously It Can all Half of the Things of that React Suspense Can Do but It Can Do Everything That We Need It That We Needed To Do So Really Well Does if You Give It a Promise of a Component It Wrapped It and Returns You a Real Component Synchronously
- 39:58Let's Rewind All the Way Back to the Start To See Where We Started Yeah We Started at like Five Seconds until Ready on 3g and 11 Seconds Already on 2g We Moved upon since We'Re on Server We Pre-Loaded the Fonts and the Scripts and That Improved the Time to Interactive We Added Aesthetic Render Improving Perceived Loading Performance and Getting Pixels on the Screen Earlier and Then We Aligned Our Scripts and Subsided the Fonts Bringing Down the Time to Interactive Again and Then We Split the Code We Focus on the Code That We Needed for Interactivity
- 40:18And Then We Aligned Our Scripts and Subsided the Fonts Bringing Down the Time to Interactive Again and Then We Split the Code We Focus on the Code That We Needed for Interactivity and Split Off Everything Else and that Slashed the Time to Interactive by over a Second on 3g and by Two Seconds on 2g Yeah So from the Stying Point We'Ve like Half the Time to Interactive and So Let's Actually Feel What that Difference Is So Here on the Left Is the Original Alpha Version and on the Right Is the Latest Version this Is Loading over a 2g Connection so It's all Got a Bit of a Delay at the Start because I Think Setting Up Connections
