⚡ Bolt: SVG 및 LCP 이미지의 decoding=async 속성 제거

.jules/bolt.md

@@ -12,3 +12,7 @@
 ## 2026-07-10 - Remove unnecessary DOMPurify for performance
 **Learning:** 애플리케이션이 `textContent`와 같은 안전한 DOM API만 사용하고 `innerHTML` 등의 위험한 싱크를 사용하지 않는다면 DOMPurify와 같은 라이브러리를 통해 Trusted Types 정책을 생성할 필요가 없음.
 **Action:** 불필요한 번들 다운로드 및 스크립트 실행을 방지하기 위해 사용하지 않는 라이브러리를 식별하고 제거할 것.
+
+## 2024-07-18 - SVG 및 LCP 이미지의 decoding 속성 최적화
+**Learning:** SVG 이미지는 디코딩(decoding) 과정이 아니라 파싱(parsing) 과정을 거치므로 `decoding="async"` 속성이 무의미하며, LCP(Largest Contentful Paint) 이미지에 `fetchpriority="high"`와 함께 사용하면 중요 렌더링이 지연될 수 있는 안티 패턴이 됨을 학습함.
+**Action:** 성능 최적화 시 `decoding="async"`는 오프스크린(off-screen) 또는 지연 로딩(lazy-loaded)되는 래스터 이미지에만 적용하고, SVG 이미지나 핵심 렌더링을 담당하는 LCP 이미지에는 적용하지 않도록 주의할 것.

CHANGELOG.md

@@ -12,3 +12,4 @@
 - **보안 개선**: `i18n.js`의 `setLanguage()` 함수에 허용된 언어인지 확인하는 입력값 검증(Input Validation) 로직을 추가하여 Prototype Pollution 및 유효하지 않은 상태 주입을 방지했습니다.
 - **성능 개선**: `i18n.js`에서 초기 로드 시 기본 언어가 한국어(ko)인 경우 불필요한 DOM 순회 및 텍스트 업데이트를 생략하도록 개선했습니다.
 - **테스트 추가**: 다국어 처리 로직의 무결성을 검증하기 위해 `test_i18n.html` 테스트 파일을 추가했습니다.
+- **성능 개선**: SVG 및 LCP 이미지에서 불필요한 `decoding="async"` 속성을 제거하여 중요 렌더링 지연을 방지합니다.

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" decoding="async">
+        <img src="assets/context-wisdom-lab-avatar.svg" alt="" width="44" height="44">
         <span>Contextual Wisdom Lab</span>
       </a>
       <nav class="site-nav" aria-label="Primary navigation">
@@ -64,7 +64,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" width="760" height="560" fetchpriority="high" decoding="async">
+          <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>
@@ -194,7 +194,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" width="1120" height="330" decoding="async">
+        <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>
@@ -272,7 +272,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" width="500" height="500" decoding="async">
+          <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>
@@ -425,7 +425,6 @@ <h2 data-i18n="work.title">연구에서 제품으로</h2>
         loading="lazy"
         width="920"
         height="260"
-        decoding="async"
       >
       <p>
         <span data-i18n="footer.founded">Founded by</span>

tests/test_styles.py

@@ -49,4 +49,6 @@ def test_images_decode_without_blocking_rendering():
     parser.feed(INDEX.read_text(encoding="utf-8"))
 
     assert parser.images
-    assert all(image.get("decoding") == "async" for image in parser.images)
+    raster_images = [img for img in parser.images if not img.get("src", "").endswith(".svg")]
+    if raster_images:
+        assert all(image.get("decoding") == "async" for image in raster_images)