From 5c8def42d54a8de4e4f327b7add366823fde68ba Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sun, 21 Jun 2026 14:01:05 +0000
Subject: [PATCH] Optimize LCP and CLS with image preloading and explicit
 dimensions

---
 index.html | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 4faa35b..846b020 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,8 @@
     <link rel="icon" href="assets/context-wisdom-lab-avatar.png">
     <!-- ⚡ Bolt: Preload custom font to reduce time to first paint -->
     <link rel="preload" href="assets/fonts/PretendardVariable.woff2" as="font" type="font/woff2" crossorigin>
+    <!-- ⚡ Bolt: Preload hero image to optimize Largest Contentful Paint (LCP) -->
+    <link rel="preload" href="assets/context-thread-map.svg" as="image" fetchpriority="high">
     <link rel="stylesheet" href="styles.css">
     <script src="i18n.js" defer></script>
   </head>
@@ -60,7 +62,7 @@ <h1 data-i18n="hero.title">맥락지혜 연구실</h1>
         </div>
 
         <div class="hero-visual">
-          <img class="context-art" src="assets/context-thread-map.svg" alt="" aria-hidden="true">
+          <img class="context-art" src="assets/context-thread-map.svg" alt="" aria-hidden="true" width="760" height="560" fetchpriority="high">
           <div class="ladder" role="list" aria-label="Data to wisdom ladder">
             <div class="ladder-row" role="listitem">
               <span>Data</span>
@@ -190,7 +192,7 @@ <h2 data-i18n="dikw.title">DIKW는 판단 흐름을 점검하는 질문입니다
           </p>
         </div>
         <!-- ⚡ Bolt: Lazy load off-screen image -->
-        <img class="section-diagram" src="assets/dikw-checkpoints.svg" alt="" aria-hidden="true" loading="lazy">
+        <img class="section-diagram" src="assets/dikw-checkpoints.svg" alt="" aria-hidden="true" loading="lazy" width="1120" height="330">
         <div class="dikw-grid">
           <article>
             <span>Data</span>
@@ -268,7 +270,7 @@ <h2 data-i18n="references.title">참고문헌</h2>
       <section id="logo" class="section logo-story">
         <div class="logo-mark">
           <!-- ⚡ Bolt: Lazy load off-screen image -->
-          <img src="assets/context-wisdom-lab-avatar.svg" alt="Contextual Wisdom Lab square mark" loading="lazy">
+          <img src="assets/context-wisdom-lab-avatar.svg" alt="Contextual Wisdom Lab square mark" loading="lazy" width="500" height="500">
         </div>
         <div>
           <h2 data-i18n="logo.title">로고는 흩어진 기록을 하나의 흐름으로 묶습니다</h2>
@@ -411,6 +413,8 @@ <h2 data-i18n="work.title">연구에서 제품으로</h2>
         src="assets/context-wisdom-lab-logo.svg"
         alt="맥락지혜 연구실 · Contextual Wisdom Lab"
         loading="lazy"
+        width="920"
+        height="260"
       >
       <p>
         <span data-i18n="footer.founded">Founded by</span>