diff --git a/index.html b/index.html
index bf94a79..eb0f1fb 100644
--- a/index.html
+++ b/index.html
@@ -33,12 +33,8 @@
   
   <title>Damjan Savić | Fullstack-, IoT- & KI-Entwickler</title>
   
-  <!-- Performance Optimizations -->
-  <link rel="dns-prefetch" href="https://fonts.googleapis.com">
-  <link rel="dns-prefetch" href="https://fonts.gstatic.com">
-  <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="preconnect" href="https://www.googletagmanager.com">
+  <!-- Performance Optimizations - nur notwendige preconnects -->
+  <link rel="dns-prefetch" href="https://www.googletagmanager.com">
   
   <!-- Open Graph Meta Tags -->
   <meta property="og:type" content="website" />
@@ -132,7 +128,19 @@
 </head>
 <body>
 <!-- Google Tag Manager (noscript) wird nach Cookie-Zustimmung eingefügt -->
-<div id="root"></div>
+<div id="root">
+  <!-- Critical Hero Skeleton für sofortige LCP -->
+  <div id="hero-skeleton" style="min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:5rem;background:#18181B;color:white;">
+    <picture>
+      <source srcset="/portrait-224.webp 224w, /portrait-448.webp 448w" sizes="(max-width:640px) 224px, 288px" type="image/webp" media="(max-width:640px)">
+      <source srcset="/portrait-288.webp 288w, /portrait-576.webp 576w" sizes="288px" type="image/webp">
+      <img src="/portrait-288.webp" alt="Damjan Savić" width="288" height="288" fetchpriority="high" decoding="sync" style="width:14rem;height:14rem;border-radius:9999px;border:2px solid #27272a;object-fit:cover;">
+    </picture>
+    <p style="color:#a1a1aa;font-size:0.875rem;letter-spacing:0.1em;margin-top:2rem;">SENIOR FULLSTACK ENTWICKLER</p>
+    <h1 style="font-size:2.25rem;font-weight:bold;margin-top:0.5rem;">Damjan Savić<span style="animation:pulse 2s infinite;margin-left:4px;">|</span></h1>
+  </div>
+  <style>#hero-skeleton{transition:opacity 0.2s}body.app-mounted #hero-skeleton{display:none!important}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0}}</style>
+</div>
 <script type="module" src="/src/main.tsx"></script>
 </body>
 </html>
\ No newline at end of file
