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 can add tens or hundreds of kilobytes to your bundle.

On mobile connections, every extra megabyte adds load time, and slow pages lose visitors. The HTTP Archive's 2024 Web Almanac puts the median mobile page at 2,311 KB, and AI-generated apps with unoptimized dependency trees can weigh far more.

Every extra kilobyte of JavaScript also has to be parsed and run, and that costs the most on mid-range phones. Google's Core Web Vitals guidance asks for Largest Contentful Paint (LCP) within 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" audit. Lighthouse tells you how much JavaScript is loaded but never executed.

Bundle Analyzer. For Next.js 16.1 and later on Turbopack, run npx next analyze. On webpack builds, add @next/bundle-analyzer to your config and run ANALYZE=true npm run build. 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 "3G" shows you the experience on a slow connection. Sort by size to find the largest resources.

Fixing the Most Common Issues

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

// ✅ GOOD - Per-function import (about 9KB minified)
import get from 'lodash/get';
const value = get(data, 'user.name');

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

// ✅ GOOD - date-fns ships only the functions you import
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 heavy components into their own chunk
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's Vibe Check automatically measure your deployed site's page weight and request count, and flag full lodash and Moment.js imports in your codebase. Free to sign up.

FAQ