Why Your Vibe-Coded App Scores Low on Lighthouse (And How to Fix It)

Why Lighthouse Scores Matter (More Than You Think)

A Lighthouse score isn't just a vanity metric. Google confirmed in 2021 that Core Web Vitals are a direct ranking factor in search results. A page that scores poorly on LCP and CLS is at a measurable disadvantage against competitors with optimized sites, all else being equal.

But the business impact goes beyond SEO. Google's own research shows that 53% of mobile users abandon a page that takes longer than 3 seconds to load. Deloitte found that improving mobile load times by 0.1 seconds increased conversions by 8% for retail sites and 10% for travel sites. A slow app built on Bolt or Lovable isn't just ranking lower - it's converting fewer visitors into users.

According to the HTTP Archive Web Almanac 2024, only 43% of desktop pages pass Core Web Vitals. For mobile, the number drops to 40%. AI-generated apps tend to cluster at the lower end of this distribution because they optimize for functionality at build time, not performance at runtime.

The 4 Core Web Vitals: Thresholds Explained

Lighthouse also measures Speed Index (how quickly page contents are visually populated) and Time to Interactive (TTI) (when the page becomes fully interactive). The weighted scoring formula means LCP and TBT have the most impact on your overall score - fixing those two metrics typically moves the needle the most.

LH-001: First Contentful Paint - Too Slow

FCP measures how long a user waits before seeing anything on screen. In AI-generated apps, FCP is typically slow because:

• The entire React application bundle must download and parse before rendering begins
• Large CSS bundles (MUI, Tailwind with all utilities) block the render path
• No critical CSS is inlined - the browser waits for an external stylesheet

// ❌ BAD - Client-only rendering, nothing until JS loads
// pages/index.js (Next.js without SSR)
export default function Home() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('/api/products').then(r => r.json()).then(setData);
  }, []);
  return 
{data ?  : null}
;
}

// ✅ GOOD - Server-side rendering, HTML arrives pre-populated
// app/page.tsx (Next.js App Router - Server Component by default)
async function HomePage() {
  const data = await fetch('https://api.example.com/products', {
    next: { revalidate: 60 }
  }).then(r => r.json());
  return ;
}

Switching from useEffect data fetching to Next.js Server Components or getServerSideProps means the HTML arrives from the server already populated with content. The browser renders immediately rather than waiting for JavaScript to execute and fetch data.

LH-002: Largest Contentful Paint - The Biggest Offender

LCP is the most impactful Core Web Vital. It measures when the largest element (usually a hero image or heading) becomes visible. The two most common LCP killers in AI-generated apps are unoptimized images and render-blocking resources.

// ❌ BAD - Unoptimized image, no size hints, no priority


// ✅ GOOD - Next.js Image component with priority and dimensions
import Image from 'next/image';

The Next.js Image component automatically serves WebP/AVIF formats, lazy loads off-screen images, prevents CLS with explicit dimensions, and the priority prop preloads the above-the-fold hero image. Bolt and v0 often generate plain <img> tags instead. Switching to next/image for hero images alone can improve LCP by 1-2 seconds.

LH-003: Total Blocking Time - JavaScript Overload

TBT measures how much time the main thread spends executing long JavaScript tasks after FCP. Every millisecond your browser spends parsing and executing JavaScript is time it can't respond to user input. The threshold is 200ms total. AI-generated apps frequently exceed 1,000ms TBT because they ship large, uncode-split bundles.

// ❌ BAD - All components loaded upfront, large initial bundle
import HeavyDashboard from '@/components/HeavyDashboard';
import DataVisualization from '@/components/DataVisualization';
import AdminPanel from '@/components/AdminPanel';

// ✅ GOOD - Code split: only load what's needed for the route
import dynamic from 'next/dynamic';

const HeavyDashboard = dynamic(() => import('@/components/HeavyDashboard'));
const DataVisualization = dynamic(
  () => import('@/components/DataVisualization'),
  { loading: () =>  }
);
const AdminPanel = dynamic(() => import('@/components/AdminPanel'));

Next.js's dynamic() splits each component into its own JavaScript chunk that only downloads when the component is rendered. For an admin panel that's only shown to 5% of users, not splitting it means 95% of your visitors download code they never execute.

LH-004 and LH-005: CLS - Layout Shift From No Dimensions

Cumulative Layout Shift is the most frustrating UX metric. It measures how much page content shifts after initial render - like a button that moves just as you're about to click it. AI-generated apps commonly cause CLS in two ways: images without explicit dimensions, and dynamically injected content above existing content.

// ❌ BAD - No dimensions causes layout shift when image loads


// ❌ BAD - Dynamic banner injects above content, pushing everything down
useEffect(() => {
  if (showBanner) {
    setBannerContent();
  }
}, []);

// ✅ GOOD - Explicit aspect ratio reserves space before image loads

  


// ✅ GOOD - Reserve space for dynamic content with min-height

  {showBanner && }

How to Run Lighthouse and Track Improvements

# Run Lighthouse from the command line (install globally)
npm install -g lighthouse

# Run against your local dev server
lighthouse http://localhost:3000 --output html --output-path report.html

# Run against your production URL
lighthouse https://yourapp.vercel.app --output json --output-path report.json

# Run in CI (headless Chrome)
lighthouse https://yourapp.vercel.app \
  --chrome-flags="--headless" \
  --output json \
  --output-path lighthouse.json

Tools like VibeDoctor (vibedoctor.io) automatically run Lighthouse against your live site and flag specific LH-001 through LH-005 findings with the exact file paths and components responsible. Free to sign up.

FAQ