From 3000ms to 300ms: Lessons learned from optimizing Tanstack ...
summary
Images AI is a vibe‑coded image generator built with TanStack Start, Hono, Cloudflare D1 + Drizzle, R2, BetterAuth, Stripe, deployed to Cloudflare Workers with Alchemy and Sentry for observability. Initial server latency is 3000ms to 300ms after fixes: deduplicate session fetch by moving it to route context, parallelize balance/subscription/gallery (critical first), add a DB index on reference_id, move BFS edit traversal into a single SQL query so the chain query 3s to 22ms, lazy‑load UI chunks and replace stateful scroll logic with refs, cutting the initial payload (~900KB) and JS by ~50%.
AI-written summary · about
chapters (12)
- 0:00Introduction and setup
- 2:11Introducing the Images AI app
- 5:03Performance issues in production
- 6:29Debugging redundant API calls
- 8:34Optimizing dashboard loading time
- 10:21Fixing unindexed database queries
- 11:26Optimizing image edit queries
- 14:00Reducing initial payload size
- 16:48Optimizing UI and React code
- 17:50Implementing caching strategies
- 18:55Key takeaways and future improvements
- 21:43Q&A and closing remarks
related talks
44mSolving Real-World Data Fetching Challenges with Next.js and TanStack Query: Case Study
30mCaching, Payloads, and Other Dark Arts
51mJAMstack: Silly name, serious stuff
26mDon't Make Users Wait: Secrets to Supercharge Server-Rendered Page
41mNAS, Predictions, Preloading, Presudo Isomorphism
45mSolving Real-World Data Fetching Challenges with Next.js and TanStack Query: A Pragmatic Case Study
33mImpatience is a virtue
28mDecoding JavaScript: Loading Performance —