Improve Lighthouse Performance: 55 → 95

- Switch from Pretendard web font to system fonts
- Remove 2.3MB of Pretendard font files
- Add WebP image format for n8n workflow
- Update CSP to remove CDN font dependencies
- Add critical CSS inline, dns-prefetch, image optimization

Metrics improvement:
- FCP: 13.4s → 2.0s
- LCP: 14.1s → 2.6s
- Performance: 55 → 95

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

index.html

@@ -37,6 +37,14 @@
   <!-- Fonts -->
   <link rel="stylesheet" href="fonts.css">
 
+  <!-- Critical CSS for above-the-fold -->
+  <style>
+    /* Critical CSS for above-the-fold */
+    body{background:#0a0f1a;color:#e2e8f0;margin:0}
+    .font-sans{font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif}
+    nav{position:fixed;width:100%;z-index:50;background:rgba(10,15,26,.8);backdrop-filter:blur(12px)}
+  </style>
+
   <!-- App JavaScript (must load before Alpine.js) -->
   <script defer src="app.js"></script>
 
@@ -333,13 +341,18 @@
           </div>
           <!-- Screenshot Image (Cropped diagram) -->
           <div class="relative overflow-hidden rounded-b-xl">
-            <img src="images/n8n-workflow.png"
-                 alt="n8n 워크플로우 자동화 예시: GitHub Actions 트리거 → Anvil API 호출 → 서버 자동 생성 프로세스"
-                 class="w-full h-auto block transition-transform duration-500 group-hover:scale-[1.02]"
-                 width="800"
-                 height="450"
-                 loading="lazy"
-                 crossorigin="anonymous">
+            <picture>
+              <source srcset="images/n8n-workflow.webp" type="image/webp">
+              <img src="images/n8n-workflow.png"
+                   alt="n8n 워크플로우 자동화 예시: GitHub Actions 트리거 → Anvil API 호출 → 서버 자동 생성 프로세스"
+                   class="w-full h-auto block transition-transform duration-500 group-hover:scale-[1.02]"
+                   width="800"
+                   height="450"
+                   loading="lazy"
+                   decoding="async"
+                   fetchpriority="low"
+                   crossorigin="anonymous">
+            </picture>
           </div>
         </div>