⚡ Bolt: 이미지 최적화 개선 (LCP 고려 및 주석 반영)

.jules/bolt.md

@@ -7,3 +7,9 @@
 ## 2026-07-05 - content-visibility와 scrollbar jumping 방지
 **Learning:** 긴 단일 페이지(static site)에서 `content-visibility: auto`를 사용하여 오프스크린 섹션의 렌더링을 최적화할 때, `contain-intrinsic-size`를 함께 지정하지 않으면 스크롤바가 튀거나 레이아웃 시프트가 발생할 수 있습니다.
 **Action:** 항상 길이 기반 폴백(예: `contain-intrinsic-size: 600px;`)을 선행하고, 브라우저가 실제 높이를 기억할 수 있도록 `auto` 키워드를 포함한 속성을 설정합니다. 섹션별 실제 높이에 맞춰 크기를 조정합니다.
+## 2024-05-24 - 이미지 디코딩 최적화를 통한 메인 스레드 차단 방지
+**Learning:** 이미지 로드 시 기본적으로 메인 스레드에서 디코딩을 수행하기 때문에 메인 스레드 차단 및 UI jank가 발생할 수 있습니다.
+**Action:** 오프스크린 이미지나 레이지 로드 이미지 등에 `decoding="async"` 속성을 추가하여 백그라운드 스레드에서 디코딩 작업을 처리하도록 함으로써 초기 페이지 로드 성능을 개선합니다.
+## 2024-05-24 - LCP 최적화 및 SVG 이미지 처리 패턴
+**Learning:** LCP(가장 큰 콘텐츠 풀 페인트) 대상 이미지에 `decoding="async"` 속성을 부여하면 브라우저가 디코딩을 백그라운드로 넘기게 되어 초기 페인팅이 지연되는 안티패턴이 될 수 있습니다. 또한, SVG 이미지는 래스터 이미지처럼 디코딩되는 것이 아니라 파싱되므로 `decoding="async"`의 효과가 거의 없음을 확인했습니다.
+**Action:** LCP 이미지에는 `fetchpriority="high"`를 유지하되 `decoding="async"`는 사용하지 않아 빠르게 동기적으로 그려지도록 하며, 다른 요소들에서 SVG를 사용할 때는 이 사실을 인지하고 무분별한 속성 적용을 지양합니다.

index.html

@@ -29,7 +29,7 @@
     <a href="#top" class="skip-link" data-i18n="nav.skipToContent">본문으로 건너뛰기</a>
     <header class="site-header">
       <a class="brand" href="#top" aria-label="Contextual Wisdom Lab home">
-        <img src="assets/context-wisdom-lab-avatar.svg" alt="" width="44" height="44">
+        <img src="assets/context-wisdom-lab-avatar.svg" alt="" width="44" height="44" decoding="async">
         <span>Contextual Wisdom Lab</span>
       </a>
       <nav class="site-nav" aria-label="Primary navigation">
@@ -64,6 +64,7 @@ <h1 data-i18n="hero.title">맥락지혜 연구실</h1>
         </div>
 
         <div class="hero-visual">
+          <!-- ⚡ Bolt: Removed decoding="async" for LCP image to paint synchronously and as fast as possible -->
           <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">
@@ -193,8 +194,8 @@ <h2 data-i18n="dikw.title">DIKW는 판단 흐름을 점검하는 질문입니다
             PPTX의 흐름은 기업 자료, 맥락화, 판단 포인트, 실행 연결입니다. DIKW는 이 흐름을 자동 상승 위계로 보자는 말이 아니라, 자료가 판단 근거로 쓰일 준비가 되었는지 묻는 점검 질문입니다.
           </p>
         </div>
-        <!-- ⚡ Bolt: Lazy load off-screen image -->
-        <img class="section-diagram" src="assets/dikw-checkpoints.svg" alt="" aria-hidden="true" loading="lazy" width="1120" height="330">
+        <!-- ⚡ Bolt: Lazy load off-screen image. Decoding="async" is kept as a minor optimization, though its effect on SVGs is negligible. -->
+        <img class="section-diagram" src="assets/dikw-checkpoints.svg" alt="" aria-hidden="true" loading="lazy" width="1120" height="330" decoding="async">
         <div class="dikw-grid">
           <article>
             <span>Data</span>
@@ -271,8 +272,8 @@ <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" width="500" height="500">
+          <!-- ⚡ Bolt: Lazy load off-screen image. Decoding="async" is kept as a minor optimization. -->
+          <img src="assets/context-wisdom-lab-avatar.svg" alt="Contextual Wisdom Lab square mark" loading="lazy" width="500" height="500" decoding="async">
         </div>
         <div>
           <h2 data-i18n="logo.title">로고는 흩어진 기록을 하나의 흐름으로 묶습니다</h2>
@@ -409,14 +410,15 @@ <h2 data-i18n="work.title">연구에서 제품으로</h2>
     </main>
 
     <footer class="site-footer">
-      <!-- ⚡ Bolt: Lazy load off-screen image -->
+      <!-- ⚡ Bolt: Lazy load off-screen image. Decoding="async" is kept as a minor optimization. -->
       <img
         id="footer-logo"
         src="assets/context-wisdom-lab-logo.svg"
         alt="맥락지혜 연구실 · Contextual Wisdom Lab"
         loading="lazy"
         width="920"
         height="260"
+        decoding="async"
       >
       <p>
         <span data-i18n="footer.founded">Founded by</span>