diff --git a/src/App.js b/src/App.js
index 2c5c256..2fa86a5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,34 @@
 // @ts-nocheck
-import React from 'react';
-import Menu from './components/Menu';
+import React, { Suspense, lazy } from 'react';
 import Hero from './components/Hero';
-import Sidebar from './components/Sidebar';
-import Products from './components/Products';
-import BoringContent from './components/BoringContent';
-import Footer from './components/Footer';
+import Menu from './components/Menu';
 import './App.css';
 
+const Sidebar = lazy(() => import('./components/Sidebar'));
+const Products = lazy(() => import('./components/Products'));
+const BoringContent = lazy(() => import('./components/BoringContent'));
+const Footer = lazy(() => import('./components/Footer'));
+
 const App = () => (
   <>
     <Menu />
-    <Sidebar />
+    <Suspense fallback={<div />}>
+      <Sidebar />
+    </Suspense>
     <div id="main">
       <Hero />
       <main>
-        <Products />
-        <BoringContent />
+        <Suspense fallback={<div />}>
+          <Products />
+        </Suspense>
+        <Suspense fallback={<div />}>
+          <BoringContent />
+        </Suspense>
       </main>
     </div>
-    <Footer />
+    <Suspense fallback={<div />}>
+      <Footer />
+    </Suspense>
   </>
 );