Fix LCP in Vite: Optimize Largest Contentful Paint with Modern Bundling

Vite has transformed the frontend development experience with near-instant dev server startup and native ESM serving, but many teams ship Vite applications with Largest Contentful Paint scores well above the 2.5-second threshold. The reason is usually not Vite itself but a handful of configuration decisions left at their defaults: no hero image preload, a monolithic vendor bundle, uncompressed assets, and a React plugin still running Babel instead of SWC. Unlike frameworks such as Next.js, Vite is deliberately un-opinionated about production performance configuration, which means the responsibility for LCP optimization sits entirely with you. This guide covers every meaningful Vite-specific lever, from switching to @vitejs/plugin-react-swc and writing build.rollupOptions.output.manualChunks to enabling the modulepreload polyfill, wiring up vite-plugin-image-optimizer and vite-imagetools, configuring asset inlining thresholds, and using server.warmup to reduce cold-start latency. Follow these steps and it is realistic to drop LCP from 4.1 seconds to 1.5 seconds on a median mobile connection.

Expected results

The following improvements are typical across Vite 5 projects after applying all six steps. Exact gains depend on your asset sizes and server infrastructure, but the ratios are consistent.

Common causes of poor LCP in Vite apps

Before diving into fixes, it helps to understand why Vite applications so frequently score poorly on LCP despite fast development builds. The core issue is that Vite's default production configuration prioritizes correctness and compatibility over aggressive performance optimization. Most of these defaults are sensible starting points, but they leave significant headroom on the table.

• No hero image preloading. Vite does not automatically inject preload hints for images referenced in CSS or JS. The browser discovers the hero image only after parsing and partially executing JavaScript, adding hundreds of milliseconds to LCP on first load. This is the single most impactful fix for most Vite apps and requires nothing more than one line in index.html.
• Single large vendor chunk. By default, Vite (via Rollup) generates one vendor chunk containing every dependency. React, React DOM, your router, your date library, your form library, and anything else all land in the same file. This bundle is often 400-800KB uncompressed, and the browser must download, parse, and execute the relevant portions before it can render the LCP element.
• Babel transformation overhead in the default React plugin. The standard @vitejs/plugin-react uses Babel to transform JSX and apply Fast Refresh. While Babel has a rich plugin ecosystem, it is significantly slower than SWC for raw transformation throughput. In development this means longer cold starts; in production it means slightly larger output due to Babel runtime helpers injected per file.
• Unoptimized images served at their original resolution and format. Vite copies images from public/ or src/assets/ to the dist directory without any compression, resizing, or format conversion. A 3MB JPEG hero image on a fast desktop connection goes unnoticed in local testing but wrecks LCP on a 4G mobile device.
• Missing modulepreload for dynamically imported chunks. Vite's code-splitting emits dynamic imports for route-level chunks, but without the modulepreload polyfill those chunks are fetched lazily and sequentially rather than in parallel, adding latency that compounds with each nested import.
• Small assets creating unnecessary round trips. The default assetsInlineLimit is 4096 bytes (4KB). Assets below this threshold are inlined as base64. Raising the threshold eliminates extra HTTP requests for small fonts, icons, and background images that might otherwise each cost 20-50ms on a high-latency connection.

For a deeper understanding of how these factors interact, see the complete LCP guide covering thresholds, measurement tools, and the full optimization hierarchy. If you are also working on image-specific issues across frameworks, the image optimization guide provides format and compression benchmarks.

Step-by-step fix

npm remove @vitejs/plugin-react
npm install -D @vitejs/plugin-react-swc

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [
    react({
      // SWC decorator support if you use experimental decorators
      // jsxImportSource: '@emotion/react', // uncomment for Emotion users
    }),
  ],
});

<!-- Preload the LCP hero image -->
<link
  rel="preload"
  as="image"
  href="/images/hero.webp"
  fetchpriority="high"
  type="image/webp"
>

<!-- If you use responsive images, preload with imagesrcset -->
<link
  rel="preload"
  as="image"
  imagesrcset="
    /images/hero-480w.webp 480w,
    /images/hero-960w.webp 960w,
    /images/hero-1440w.webp 1440w
  "
  imagesizes="100vw"
  fetchpriority="high"
>

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          // Core React runtime — most stable, always cached
          if (id.includes('node_modules/react/') ||
              id.includes('node_modules/react-dom/') ||
              id.includes('node_modules/scheduler/')) {
            return 'react-core';
          }

          // Routing — changes rarely
          if (id.includes('node_modules/react-router') ||
              id.includes('node_modules/@remix-run/router')) {
            return 'router';
          }

          // Data fetching and state
          if (id.includes('node_modules/@tanstack/') ||
              id.includes('node_modules/zustand/') ||
              id.includes('node_modules/jotai/')) {
            return 'state';
          }

          // Everything else in node_modules
          if (id.includes('node_modules/')) {
            return 'vendor';
          }
        },
      },
    },
  },
});

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    react(),
    // Run: ANALYZE=true npm run build
    process.env.ANALYZE && visualizer({
      open: true,
      gzipSize: true,
      brotliSize: true,
      filename: 'dist/stats.html',
    }),
  ].filter(Boolean),
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules/react/') ||
              id.includes('node_modules/react-dom/') ||
              id.includes('node_modules/scheduler/')) {
            return 'react-core';
          }
          if (id.includes('node_modules/react-router')) {
            return 'router';
          }
          if (id.includes('node_modules/')) {
            return 'vendor';
          }
        },
      },
    },
  },
});

npm install -D vite-plugin-image-optimizer
npm install -D vite-imagetools

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
import { imagetools } from 'vite-imagetools';

export default defineConfig({
  plugins: [
    react(),
    // Compress all images at build time using sharp and svgo
    ViteImageOptimizer({
      png: {
        quality: 80,
        compressionLevel: 9,
      },
      jpeg: {
        quality: 80,
        progressive: true,
      },
      jpg: {
        quality: 80,
        progressive: true,
      },
      webp: {
        lossless: false,
        quality: 80,
        alphaQuality: 80,
        force: false,
      },
      avif: {
        lossless: false,
        quality: 60,
        force: false,
      },
      svg: {
        // svgo options
        multipass: true,
        plugins: [
          { name: 'removeViewBox', active: false },
          { name: 'removeDimensions', active: true },
        ],
      },
    }),
    // Enable query-based transforms: import heroUrl from './hero.jpg?w=960&format=webp'
    imagetools(),
  ],
});

// vite-imagetools generates typed metadata for each variant
import heroSm from './hero.jpg?w=480&format=webp&as=url';
import heroMd from './hero.jpg?w=960&format=webp&as=url';
import heroLg from './hero.jpg?w=1440&format=webp&as=url';
import heroFallback from './hero.jpg?w=960&format=jpeg&as=url';

export function Hero() {
  return (
    <picture>
      <source
        type="image/webp"
        srcSet={`${heroSm} 480w, ${heroMd} 960w, ${heroLg} 1440w`}
        sizes="100vw"
      />
      <img
        src={heroFallback}
        alt="Application hero image"
        width={960}
        height={540}
        fetchPriority="high"
        decoding="sync"
      />
    </picture>
  );
}

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
import { imagetools } from 'vite-imagetools';

export default defineConfig({
  plugins: [react(), ViteImageOptimizer(), imagetools()],
  build: {
    // Inline assets smaller than 8KB as base64 (default: 4096)
    assetsInlineLimit: 8192,

    // Enable modulepreload polyfill for broader browser support
    modulePreload: {
      polyfill: true,
      // Optionally exclude specific paths from preload injection
      // resolveDependencies: (filename, deps, ctx) => deps,
    },

    // Enable CSS code splitting (on by default, shown for clarity)
    cssCodeSplit: true,

    // Target modern browsers for smaller output
    // Remove if you need legacy support
    target: ['es2020', 'chrome87', 'firefox78', 'safari14'],

    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules/react/') ||
              id.includes('node_modules/react-dom/') ||
              id.includes('node_modules/scheduler/')) {
            return 'react-core';
          }
          if (id.includes('node_modules/react-router')) {
            return 'router';
          }
          if (id.includes('node_modules/')) {
            return 'vendor';
          }
        },
      },
    },
  },
});

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [react()],
  server: {
    warmup: {
      // Pre-transform these files on server start
      clientFiles: [
        './src/main.tsx',
        './src/App.tsx',
        './src/components/Hero.tsx',
        './src/components/Layout.tsx',
        './src/pages/Home.tsx',
      ],
    },
  },
  build: {
    assetsInlineLimit: 8192,
    modulePreload: { polyfill: true },
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules/react/') ||
              id.includes('node_modules/react-dom/')) {
            return 'react-core';
          }
          if (id.includes('node_modules/')) {
            return 'vendor';
          }
        },
      },
    },
  },
});

Verification

Measure LCP before and after applying these changes using a consistent methodology. Lab measurements (Lighthouse, WebPageTest) provide reproducibility; field measurements (Chrome User Experience Report, PageSpeed Insights) reflect real user conditions including device variability, network quality, and third-party script interference.

Measuring LCP in Vite specifically has one important nuance: because Vite apps are typically SPAs, the LCP element on client-side-navigated pages may be measured differently than on full page loads. Always measure LCP on a full hard reload of the entry route for consistent comparisons during optimization.

• Lighthouse CLI: npx lighthouse https://your-staging-url.com --output=json --only-categories=performance. Run three times and average the results to reduce variance from network jitter.
• WebPageTest (webpagetest.org): Use a Motorola G4 profile on a 4G connection to simulate median mobile conditions. Enable filmstrip mode to visually confirm which element is measured as LCP and when it paints relative to other resources.
• Chrome DevTools Performance tab: Record a page load and look for the LCP timing marker in the timeline. Expand the Network panel and verify that your hero image request starts in the first 200ms of navigation, confirming that the preload tag is working.
• PageSpeed Insights: Enter your production URL to see field data from CrUX alongside lab data. Field data at the 75th percentile is the metric Google uses for search ranking. Lab data alone can be misleading for SPAs with personalization or A/B testing.
• Vite build output: After each change, run npm run build and review the chunk sizes printed to stdout. Aim for the largest single JS chunk to be under 200KB before gzip. Chunks above 500KB before gzip are almost always worth splitting further or replacing with lighter alternatives.

For guidance on interpreting these measurements and setting meaningful LCP targets for your specific audience, the JavaScript performance guide covers bundle analysis, main-thread profiling, and the relationship between parse/execute time and LCP. The complete LCP guide has a full section on measurement tooling and field vs. lab data interpretation.

Common pitfalls

• Preloading the wrong image. Only the LCP element should have a high-priority preload. If you preload an image that is not the LCP element, you waste bandwidth competing for the same network connection as the actual LCP resource. Use the Chrome DevTools Performance tab to confirm which element Chrome selects as the LCP candidate before adding preload tags.
• Over-splitting chunks and creating waterfalls. Creating too many small chunks can paradoxically hurt LCP. If chunk A imports chunk B which imports chunk C, and each must be downloaded before the next starts (a waterfall), you are worse off than with one larger chunk. Use modulepreload to tell the browser to fetch all chunks in parallel, or consolidate chunks that always load together.
• Using vite-imagetools without type declarations. vite-imagetools requires adding the module declaration to your tsconfig.json or a .d.ts file, otherwise TypeScript will error on image imports with query strings. Add "vite-imagetools/client" to your compilerOptions.types array or create a src/vite-env.d.ts with /// <reference types="vite-imagetools/client" />.
• Ignoring the legacy plugin tradeoff. If you enable @vitejs/plugin-legacy, Vite generates two bundles: a modern ESM bundle and a legacy IIFE bundle for old browsers. The legacy bundle is loaded via a <script nomodule> tag. Modern browsers ignore it, but it still appears in the network waterfall and can affect DNS prefetching and cache priming on CDNs that do not differentiate. Audit whether you genuinely have legacy browser traffic before enabling this plugin in 2026.
• Not accounting for dependency pre-bundling differences. Because Vite pre-bundles dependencies in development and uses Rollup in production, your dev bundle and prod bundle can differ in meaningful ways. Always verify that your manual chunk configuration actually takes effect in the production build by inspecting dist/assets/ after npm run build, not by assuming dev behavior matches.

Quick checklist

Frequently asked questions