⚡ Bolt: [성능 개선] 오프스크린 이미지 우선순위 조정

.jules/bolt.md

@@ -20,3 +20,7 @@
 ## 2026-08-08 - 애니메이션 성능을 위해 top/left 대신 transform 사용
 **Learning:** 이 skip-link 전환을 `top`에서 `transform`으로 바꾸면 애니메이션 중 레이아웃 재계산을 피하는 데 유리합니다. 개발자 도구에서 이 전환의 Layout 이벤트가 관찰되지 않았지만, 브라우저·장치별 GPU 가속이나 메인 스레드 비용 0ms를 보장하지는 않습니다.
 **Action:** 레이아웃 속성 대신 `transform` 전환을 우선 검토하고, 성능 효과는 브라우저별 측정으로 확인하며 절대적인 GPU·비용 보장으로 기록하지 않습니다.
+
+## 2024-06-21 - 오프스크린 이미지에 fetchpriority="low" 적용
+**Learning:** `loading="lazy"`가 적용된 오프스크린 이미지에 `fetchpriority="low"`를 추가하는 것은 브라우저가 크리티컬 렌더링 패스 리소스(폰트, CSS, 중요 이미지 등)의 우선순위를 높이도록 돕는 안전하고 검증된 마이크로 최적화 기법입니다.
+**Action:** 이미지에 `loading="lazy"`를 추가할 때, 명시적으로 `fetchpriority="low"`를 설정하는 것도 함께 고려해야 합니다.

404.html

@@ -54,7 +54,7 @@ <h1 class="not-found-title">페이지를 찾을 수 없습니다</h1>
         alt="맥락지혜 연구실 · Contextual Wisdom Lab"
         width="920"
         height="260"
-        loading="lazy"
+        loading="lazy" fetchpriority="low"
         decoding="async"
       >
       <p>

index.html

@@ -215,7 +215,7 @@ <h2 id="dikw-title" 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" width="1120" height="330" decoding="async">
+        <img class="section-diagram" src="assets/dikw-checkpoints.svg" alt="" aria-hidden="true" loading="lazy" fetchpriority="low" width="1120" height="330" decoding="async">
         <div class="dikw-grid">
           <article>
             <span>Data</span>
@@ -293,7 +293,7 @@ <h2 id="references-title" data-i18n="references.title">참고문헌</h2>
       <section id="logo" class="section logo-story" aria-labelledby="logo-title">
         <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" decoding="async">
+          <img src="assets/context-wisdom-lab-avatar.svg" alt="Contextual Wisdom Lab square mark" loading="lazy" fetchpriority="low" width="500" height="500" decoding="async">
         </div>
         <div>
           <h2 id="logo-title" data-i18n="logo.title">로고는 흩어진 기록을 하나의 흐름으로 묶습니다</h2>
@@ -462,7 +462,7 @@ <h2 id="work-title" data-i18n="work.title">연구에서 제품으로</h2>
         id="footer-logo"
         src="assets/context-wisdom-lab-logo.svg"
         alt="맥락지혜 연구실 · Contextual Wisdom Lab"
-        loading="lazy"
+        loading="lazy" fetchpriority="low"
         width="920"
         height="260"
         decoding="async"