diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 25874c5..8506950 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,16 +1,29 @@
 import { Toaster } from 'sonner'
+import { lazy, Suspense } from 'react'
 import { NavLink, Outlet, Route, Routes } from 'react-router-dom'
 
 import { SiteSelectionProvider, useSiteSelection } from './context/SiteSelectionContext'
 import { useWsLogErrorCount } from './hooks/useWsLogErrorCount'
-import { Dashboard } from './pages/Dashboard'
-import Economics from './pages/Economics'
-import EnergyFlows from './pages/EnergyFlows'
-import ForecastVsActual from './pages/ForecastVsActual'
-import { Logs } from './pages/Logs'
-import Planning from './pages/Planning'
-import SiteConfiguration from './pages/SiteConfiguration'
-import { Settings } from './pages/Settings'
+
+// Lazy route komponenty — initial bundle nese jen layout; stránky se dotahují per route.
+const Dashboard = lazy(() =>
+  import('./pages/Dashboard').then((m) => ({ default: m.Dashboard })),
+)
+const Economics = lazy(() => import('./pages/Economics'))
+const EnergyFlows = lazy(() => import('./pages/EnergyFlows'))
+const ForecastVsActual = lazy(() => import('./pages/ForecastVsActual'))
+const Logs = lazy(() => import('./pages/Logs').then((m) => ({ default: m.Logs })))
+const Planning = lazy(() => import('./pages/Planning'))
+const SiteConfiguration = lazy(() => import('./pages/SiteConfiguration'))
+const Settings = lazy(() => import('./pages/Settings').then((m) => ({ default: m.Settings })))
+
+function RouteFallback() {
+  return (
+    <div className="flex min-h-[40vh] items-center justify-center" role="status" aria-label="Načítání stránky">
+      <div className="h-8 w-8 animate-spin rounded-full border-2 border-slate-700 border-t-slate-300" />
+    </div>
+  )
+}
 
 function SiteCombo() {
   const { sites, selectedSiteId, setSelectedSiteId, ready, error } = useSiteSelection()
@@ -102,7 +115,9 @@ function AppLayout() {
           <SiteCombo />
         </div>
       </nav>
-      <Outlet />
+      <Suspense fallback={<RouteFallback />}>
+        <Outlet />
+      </Suspense>
       <Toaster richColors position="top-right" theme="dark" />
     </div>
   )
@@ -121,7 +136,14 @@ export default function App() {
           <Route path="site-config" element={<SiteConfiguration />} />
           <Route path="settings" element={<Settings />} />
         </Route>
-        <Route path="logs" element={<Logs />} />
+        <Route
+          path="logs"
+          element={
+            <Suspense fallback={<RouteFallback />}>
+              <Logs />
+            </Suspense>
+          }
+        />
       </Routes>
     </SiteSelectionProvider>
   )
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index dea2b87..fb11f54 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -24,6 +24,17 @@ export default defineConfig(async () => {
       outDir: 'dist',
       assetsDir: 'assets',
       chunkSizeWarningLimit: 750,
+      rollupOptions: {
+        output: {
+          // Stabilní vendor chunky: react jádro, grafové knihovny zvlášť (cache + menší initial load).
+          manualChunks: {
+            'vendor-react': ['react', 'react-dom', 'react-router-dom'],
+            'vendor-recharts': ['recharts'],
+            'vendor-nivo': ['@nivo/core', '@nivo/sankey'],
+            'vendor-chartjs': ['chart.js'],
+          },
+        },
+      },
     },
     server: {
       proxy: {