AI-built apps are slow by default — bloated bundles, uncached queries, dual animation frameworks, and layout-shifting images. VibeKit encodes performance as hard rules that the agent cannot skip.
Every page must meet these thresholds. The agent checks each one before declaring a page done. No exceptions.
| Metric | Target | How it's enforced |
|---|---|---|
| First Load JS | < 100KB per page | next/dynamic for heavy imports, no 'use client' on server components |
| LCP | < 2.5s | next/image + priority, preloaded hero font, no client-side hero content |
| CLS | < 0.1 | Fixed aspect-ratio on all media, explicit image dimensions |
| TBT | < 200ms | No heavy JS on main thread, chunked computations, Web Workers |
| API Response (p95) | < 200ms | Redis cache on hot paths, DB indexes on filtered columns, pagination |
Each layer targets a specific perf killer that AI-built apps suffer from — and enforces the fix with a rule the agent cannot override.
React Query on the client + Redis on the server. Client cache gives instant back-nav and optimistic updates. Redis offloads the database and shares cached results across all users — so 1,000 users viewing the same dashboard don't run 1,000 queries.
Every page load hits the database. No cache = slow responses under load.
Redis serves cached API responses in <5ms. Database only queried when cache expires or data changes.
Framer Motion handles both state transitions AND entrance animations. No GSAP unless you're building a complex marketing site with multi-pin scroll sequences. Dashboard/internal apps save ~40KB by never installing GSAP.
Two animation frameworks loaded = 75KB+ gzipped. Most pages don't use 90% of either library.
One library at ~35KB. Framer Motion's whileInView replaces ScrollTrigger for 95% of use cases.
Every import over 15KB gzipped must use next/dynamic. PDF renderer, spreadsheet parser, chart libraries, Stripe checkout — none of them load until the user actually needs them.
@react-pdf/renderer (85KB) loads on every page even if only one page exports invoices. xlsx (65KB) loads on the home page.
Heavy libraries load on-demand. First Load JS stays under 100KB per page. Invoice export button triggers dynamic import only when clicked.
Every data-fetching section is wrapped in <Suspense> with a skeleton. The page renders immediately, and each section streams in as its data resolves. No section blocks another.
Page waterfalls: fetch user → fetch org → fetch dashboard stats → all data must resolve before ANYTHING renders.
Dashboard shell renders instantly. Stats grid, recent orders, and activity feed each stream in independently. No waterfall, no blank page.
Every image must have aspect-ratio and explicit dimensions. All fonts use next/font/google with display: swap and preload on hero fonts. No layout shift, no invisible text.
Images without dimensions cause layout shifts as they load. Font swap causes text reflow. CLS of 0.3+ is common.
Zero layout shift. Images respect their aspect ratio from the first paint. Fonts load with fallback text immediately visible.
Before shipping, the pre-deploy audit runs ANALYZE=true next build. Any chunk over 50KB is flagged and investigated. No bloated bundles slip through.
Blown-up bundles discovered in production. Users on slow networks wait 10+ seconds for JavaScript to parse.
Every chunk is verified before deploy. If a bundle grows unexpectedly, it's caught before users see it.
Same feature set. Same framework. The difference is whether performance rules exist or not.
| Dimension | AI without VibeKit | VibeKit — by default |
|---|---|---|
| First Load JS | 200–500KB per page (eager PDF, xlsx, animation libs) | < 100KB per page (next/dynamic + single animation lib) |
| API Latency | 50–200ms per request (database every time) | < 5ms cached (Redis hot paths) |
| Animation Bundle | 75KB+ (GSAP + Framer Motion, both mostly unused) | 35KB (Framer Motion only, fully utilized) |
| Page Render | Blocking waterfall (sequential awaits) | Streaming (parallel Suspense boundaries) |
| Layout Stability (CLS) | 0.15–0.5 (unconstrained images, font swap) | < 0.1 (aspect-ratio, preloaded fonts) |
| DB Query Load | N+1 problems, no query caching, same query repeated per user | Redis cache absorbs 90%+ of reads, cache invalidation on writes |
| Bundle Awareness | Never checked. Bloated bundles discovered in production. | Pre-deploy ANALYZE=true next build. Chunks >50KB flagged. |
| Animation Performance | Animations on top/left/width/height = layout thrashing | Transform + opacity only, will-change on heavy elements |
These aren't aspirational targets — they're hard rules encoded in the master prompt. The agent cannot skip them.
The performance rules are already written. Your agent just needs to read them.