Page Weight Budget: Why Your Vibe-Coded App Takes 8 Seconds to Load

The Page Weight Problem in AI-Generated Apps

AI code generators optimize for functionality, not performance. When you ask for a chart, they import all of Chart.js. When you ask for a date picker, they import all of Moment.js. When you ask for an icon, they import the entire icon library. Each of these choices adds hundreds of kilobytes to your bundle.

Google's 2024 Core Web Vitals data shows that pages with total weight over 3MB have a 53% bounce rate on mobile, compared to 25% for pages under 1MB. The HTTP Archive's 2024 State of the Web report found that the median page weight is now 2.3MB, but AI-generated apps frequently exceed 5MB due to unoptimized dependency trees.

Every additional 100KB of JavaScript adds roughly 350ms of parse time on a mid-range mobile device. Users perceive anything over 3 seconds as slow, and Google's Core Web Vitals directly penalize pages where Largest Contentful Paint (LCP) exceeds 2.5 seconds.

Where the Weight Comes From

How to Audit Your Page Weight

Before fixing anything, measure what you are shipping. Three tools give you the full picture:

Lighthouse Performance Audit. Open Chrome DevTools, go to Lighthouse, and run a Performance audit on mobile. Look at Total Blocking Time (TBT), Largest Contentful Paint (LCP), and the "Reduce unused JavaScript" opportunity. Lighthouse tells you how much JavaScript is loaded but never executed.

Bundle Analyzer. For Next.js apps, run ANALYZE=true next build with @next/bundle-analyzer. For Vite apps, use rollup-plugin-visualizer. These tools visualize every dependency in your bundle by size, making it obvious which imports are consuming the most space.

Network Tab. Chrome DevTools Network tab with "Disable cache" checked and throttling set to "Slow 3G" shows you the real user experience. Sort by size to find the largest resources.

Fixing the Most Common Issues

// ❌ BAD - Full library import (pulls in 600KB)
import _ from 'lodash';
const value = _.get(data, 'user.name');

// ✅ GOOD - Tree-shakeable import (pulls in 2KB)
import get from 'lodash/get';
const value = get(data, 'user.name');

// ❌ BAD - Moment.js for simple formatting (330KB)
import moment from 'moment';
const formatted = moment(date).format('MMM D, YYYY');

// ✅ GOOD - date-fns (2KB for format function)
import { format } from 'date-fns';
const formatted = format(date, 'MMM d, yyyy');

// ❌ BAD - Loading heavy component on initial render
import HeavyChart from './HeavyChart';

// ✅ GOOD - Lazy load components not in the viewport
import { lazy, Suspense } from 'react';
const HeavyChart = lazy(() => import('./HeavyChart'));

function Dashboard() {
  return (
    <Suspense fallback={<div>Loading chart...</div>}>
      <HeavyChart />
    </Suspense>
  );
}

Setting a Page Weight Budget

A performance budget prevents regressions after you fix the initial bloat. Set hard limits that block deployment if exceeded:

Tools like VibeDoctor (vibedoctor.io) automatically measure your page weight, detect full-library imports, and flag heavy bundle issues in your deployed site and codebase. Free to sign up.

FAQ