⚡ Bolt: 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:** 불필요한 번들 다운로드 및 스크립트 실행을 방지하기 위해 사용하지 않는 라이브러리를 식별하고 제거할 것.
+
+## 2026-07-30 - Remove decoding="async" for LCP and above-the-fold SVGs
+**Learning:** `decoding="async"` on above-the-fold SVG images (like the hero image) can delay their display by pushing the decode task off the main thread. This delay negatively impacts Largest Contentful Paint (LCP) performance for critical assets that should be visible as quickly as possible.
+**Action:** Remove `decoding="async"` from important above-the-fold images and keep it only for lazy-loaded off-screen images to prioritize main thread rendering of critical visual elements.

CHANGELOG.md

@@ -1,6 +1,7 @@
 # CHANGELOG
 
 ## [Unreleased]
+- **성능 최적화**: 화면의 초기 핵심 콘텐츠(LCP 요소)가 빠르게 그려질 수 있도록, 사용자 첫 화면에 나타나는 SVG 이미지(헤더 아바타 및 히어로 아트워크)에서 `decoding="async"` 속성을 제거하여 메인 스레드에서의 렌더링 우선순위를 높였습니다.
 - **보안 개선**: 컴포넌트 갤러리의 인라인 스크립트와 스타일을 외부 파일로 분리하고, 엄격한 Content-Security-Policy를 적용해 XSS 방어를 강화했습니다.
 - **성능 회귀 복원**: 오프스크린 `.section` 렌더링을 `content-visibility: auto`로 지연하고, 일반 섹션은 600px·콘텐츠가 큰 DIKW/projects 섹션은 1000px의 `contain-intrinsic-size` placeholder를 유지해 초기 렌더링 비용과 스크롤바 이동을 함께 줄였습니다.
 - **보안 개선**: Trusted Types 기반 CSP 강화: 잠재적인 DOM 기반 XSS 공격을 방지하기 위해 `require-trusted-types-for 'script'` 지시어 추가

index.html

@@ -29,7 +29,8 @@
     <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">
+        <!-- ⚡ Bolt: Removed decoding="async" for SVG/LCP optimization -->
+        <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 +65,8 @@ <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">
+          <!-- ⚡ Bolt: Removed decoding="async" for SVG/LCP optimization -->
+          <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>

tests/test_styles.py

@@ -44,9 +44,9 @@ def test_tall_sections_reserve_larger_intrinsic_block_size():
 
 
 def test_images_decode_without_blocking_rendering():
-    """All site images opt into asynchronous decoding."""
+    """Lazy-loaded site images opt into asynchronous decoding."""
     parser = _ImageParser()
     parser.feed(INDEX.read_text(encoding="utf-8"))
 
     assert parser.images
-    assert all(image.get("decoding") == "async" for image in parser.images)
+    assert all(image.get("decoding") == "async" for image in parser.images if image.get("loading") == "lazy")