⚡ Bolt: fetchpriority="low"를 추가하여 지연 로딩 오프스크린 이미지 우선순위 최적화

.jules/bolt.md

@@ -20,3 +20,7 @@
 ## 2026-08-08 - 애니메이션 성능을 위해 top/left 대신 transform 사용
 **Learning:** 이 skip-link 전환을 `top`에서 `transform`으로 바꾸면 애니메이션 중 레이아웃 재계산을 피하는 데 유리합니다. 개발자 도구에서 이 전환의 Layout 이벤트가 관찰되지 않았지만, 브라우저·장치별 GPU 가속이나 메인 스레드 비용 0ms를 보장하지는 않습니다.
 **Action:** 레이아웃 속성 대신 `transform` 전환을 우선 검토하고, 성능 효과는 브라우저별 측정으로 확인하며 절대적인 GPU·비용 보장으로 기록하지 않습니다.
+
+## 2026-08-20 - Explicitly deprioritize lazy off-screen images
+**학습:** Explicitly adding `fetchpriority="low"` to explicitly lazy-loaded off-screen images helps the browser's preload scanner deprioritize non-critical resources.
+**적용:** Add `fetchpriority="low"` when setting `loading="lazy"` to optimize the preload scanner queue.

404.html

@@ -49,13 +49,15 @@ <h1 class="not-found-title">페이지를 찾을 수 없습니다</h1>
     </main>
 
     <footer class="site-footer">
+      <!-- ⚡ Bolt: Explicitly deprioritize lazy off-screen images to help preload scanner -->
       <img
         src="assets/context-wisdom-lab-logo.svg"
         alt="맥락지혜 연구실 · Contextual Wisdom Lab"
         width="920"
         height="260"
         loading="lazy"
         decoding="async"
+        fetchpriority="low"
       >
       <p>
         <span>Founded by</span>

index.html

@@ -214,8 +214,8 @@ <h2 id="dikw-title" 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" decoding="async">
+        <!-- ⚡ Bolt: Explicitly deprioritize lazy off-screen images to help preload scanner -->
+        <img class="section-diagram" src="assets/dikw-checkpoints.svg" alt="" aria-hidden="true" loading="lazy" width="1120" height="330" decoding="async" fetchpriority="low">
         <div class="dikw-grid">
           <article>
             <span>Data</span>
@@ -292,8 +292,8 @@ <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">
+          <!-- ⚡ Bolt: Explicitly deprioritize lazy off-screen images to help preload scanner -->
+          <img src="assets/context-wisdom-lab-avatar.svg" alt="Contextual Wisdom Lab square mark" loading="lazy" width="500" height="500" decoding="async" fetchpriority="low">
         </div>
         <div>
           <h2 id="logo-title" data-i18n="logo.title">로고는 흩어진 기록을 하나의 흐름으로 묶습니다</h2>
@@ -457,7 +457,7 @@ <h2 id="work-title" data-i18n="work.title">연구에서 제품으로</h2>
     </main>
 
     <footer class="site-footer">
-      <!-- ⚡ Bolt: Lazy load off-screen image -->
+      <!-- ⚡ Bolt: Explicitly deprioritize lazy off-screen images to help preload scanner -->
       <img
         id="footer-logo"
         src="assets/context-wisdom-lab-logo.svg"
@@ -466,6 +466,7 @@ <h2 id="work-title" data-i18n="work.title">연구에서 제품으로</h2>
         width="920"
         height="260"
         decoding="async"
+        fetchpriority="low"
       >
       <p>
         <span data-i18n="footer.founded">Founded by</span>

tests/test_styles.py

@@ -78,6 +78,7 @@ def test_lazy_images_decode_asynchronously() -> None:
 
     assert lazy_images, "the long homepage must retain deferred images"
     assert all(image.get("decoding") == "async" for image in lazy_images)
+    assert all(image.get("fetchpriority") == "low" for image in lazy_images)
 
 
 def test_lcp_candidate_is_eager_and_high_priority() -> None: