This is the big "make scrolling smooth" pass — the biggest wins live
in cold-start, not in the scroll loop itself, but a fast cold start
means GSAP starts in a non-thrashing state and stays there.
- Drop @babel/standalone (~3MB) from the page entirely. app.jsx is
pre-compiled to app.js via deploy/build.sh; the browser loads the
compiled bundle directly. JSX-in-browser was running babel transform
on every page load, which is brutal on phones.
- Switch React UMD bundles from .development to .production.min:
~1.1MB → ~140KB, no dev-mode warnings/checks in the hot path.
- Add `defer` + `<link rel=preload as=script>` for the React/GSAP CDN
scripts so they fetch in parallel with HTML parse, execute in order
after DOM is ready, and don't block first paint.
- Re-encode the three 1.4–1.8MB PNG backgrounds as WebP at full size
(~190KB total) plus a 900px-wide mobile variant (~52KB total).
Mobile preload links use `media=` so phones never download the
full-size variants.
- Move bg-image URLs from inline JSX styles into styles.css so the
mobile media query can swap them in cleanly.
- nginx: long-cache versioned static assets (Cache-Control immutable,
1 year) since URLs already carry ?v=… cache busters; keep the HTML
itself on must-revalidate so the version pointer can update.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Knowit
b510b33628
