Optimizing Large Asset Loading in Lovable Projects

Why large assets make Lovable apps load slowly

Lovable projects are single-page applications that load all JavaScript, CSS, and above-the-fold images before the page becomes interactive. If your app has large unoptimized images, uncompressed assets, or a single JavaScript bundle containing all page code, users wait longer than necessary for the initial load. Images are the biggest offender. A single unoptimized hero image can be 5-10MB, taking seconds to load on slower connections. Compressing images to WebP format and adding lazy loading for below-the-fold images dramatically improves perceived performance. Code splitting is the second biggest optimization. By default, Vite bundles all your component code into one JavaScript file. If your app has 20 pages, a user visiting the home page downloads the code for all 20 pages. Route-level code splitting with React.lazy() tells Vite to create separate bundles for each page, loading only the code needed for the current route.

• Uncompressed images (PNG, BMP) uploaded directly without optimization
• All page code bundled in one JavaScript file instead of split by route
• Large third-party libraries imported at the top level instead of dynamically
• No lazy loading on images below the fold — all images load on initial page render
• Static assets served without proper caching headers

Error messages you might see

Before you start

• A Lovable project that loads slowly or has large asset files
• Access to an image compression tool (squoosh.app, tinypng.com)
• A general idea of which pages or assets are the heaviest

How to fix it

// Large uncompressed images:
// public/images/hero.png — 4.2MB
// public/images/team-photo.jpg — 2.1MB
// public/images/product.png — 1.8MB

// Compressed and converted:
// public/images/hero.webp — 180KB (96% smaller)
// public/images/team-photo.webp — 95KB (95% smaller)
// public/images/product.webp — 72KB (96% smaller)
// Update references in code:
<img src="/images/hero.webp" alt="Hero" />

// All images load immediately, even those far below the fold
<img src="/images/hero.webp" alt="Hero" />
<img src="/images/feature-1.webp" alt="Feature 1" />
<img src="/images/feature-2.webp" alt="Feature 2" />
<img src="/images/testimonial.webp" alt="Testimonial" />

// Hero loads immediately, others load when scrolled into view
<img src="/images/hero.webp" alt="Hero" />
<img src="/images/feature-1.webp" alt="Feature 1" loading="lazy" />
<img src="/images/feature-2.webp" alt="Feature 2" loading="lazy" />
<img src="/images/testimonial.webp" alt="Testimonial" loading="lazy" />

// All pages imported statically — one big bundle
import Home from "@/pages/Home";
import Dashboard from "@/pages/Dashboard";
import Settings from "@/pages/Settings";
import Admin from "@/pages/Admin";
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/dashboard" element={<Dashboard />} />
  <Route path="/settings" element={<Settings />} />
  <Route path="/admin" element={<Admin />} />
</Routes>

import { lazy, Suspense } from "react";
// Dynamic imports — each creates a separate bundle
const Home = lazy(() => import("@/pages/Home"));
const Dashboard = lazy(() => import("@/pages/Dashboard"));
const Settings = lazy(() => import("@/pages/Settings"));
const Admin = lazy(() => import("@/pages/Admin"));
<Suspense fallback={<div className="p-8">Loading...</div>}>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/dashboard" element={<Dashboard />} />
    <Route path="/settings" element={<Settings />} />
    <Route path="/admin" element={<Admin />} />
  </Routes>
</Suspense>

// User uploads stored in /public — bloats repository
// No CDN, no caching, large Git repo

// Upload to Supabase Storage:
const { data, error } = await supabase.storage
  .from('avatars')
  .upload(`${userId}/avatar.webp`, file);
// Get the public CDN URL:
const { data: urlData } = supabase.storage
  .from('avatars')
  .getPublicUrl(`${userId}/avatar.webp`);
// Use in component:
<img src={urlData.publicUrl} alt="Avatar" loading="lazy" />

Complete code example

1import { lazy, Suspense } from "react";
2import { BrowserRouter, Routes, Route } from "react-router-dom";
3import { Loader2 } from "lucide-react";
4
5// Route-level code splitting — each page is a separate bundle
6const Home = lazy(() => import("@/pages/Home"));
7const Dashboard = lazy(() => import("@/pages/Dashboard"));
8const Settings = lazy(() => import("@/pages/Settings"));
9const NotFound = lazy(() => import("@/pages/NotFound"));
10
11// Loading fallback shown while page bundle downloads
12const PageLoader = () => (
13  <div className="flex items-center justify-center min-h-screen">
14    <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
15  </div>
16);
17
18const App = () => {
19  return (
20    <BrowserRouter>
21      <Suspense fallback={<PageLoader />}>
22        <Routes>
23          <Route path="/" element={<Home />} />
24          <Route path="/dashboard" element={<Dashboard />} />
25          <Route path="/settings" element={<Settings />} />
26          <Route path="*" element={<NotFound />} />
27        </Routes>
28      </Suspense>
29    </BrowserRouter>
30  );
31};
32
33export default App;

Best practices to prevent this

• Compress all images to WebP format before uploading — target under 200KB for hero images, under 50KB for thumbnails
• Add loading='lazy' to all images below the fold — never lazy load the hero image or above-the-fold content
• Use React.lazy() for route-level code splitting so each page loads its own JS bundle
• Wrap lazy-loaded routes in Suspense with a meaningful loading fallback (spinner, not blank screen)
• Store user-uploaded files in Supabase Storage instead of /public — it provides CDN delivery and caching
• Keep the /public folder small — only static assets like favicon, fonts, and essential images should live there
• Use Vite's built-in asset optimization — assets smaller than 4KB are automatically inlined as base64
• Add width and height attributes to images to prevent layout shift while they load

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns