From af074bf14ddc4116270c68145f19c3d2641a39ce Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Thu, 23 Jul 2026 14:08:50 +0000
Subject: [PATCH 1/7] chore: optimize above-the-fold image decoding for LCP
- Remove `decoding="async"` from critical SVG images in `index.html`
- Update `test_styles.py` to expect async decoding only on lazy-loaded images
- Update `.jules/bolt.md` and `CHANGELOG.md`
---
.jules/bolt.md | 4 ++++
CHANGELOG.md | 1 +
index.html | 6 ++++--
tests/test_styles.py | 5 +++--
4 files changed, 12 insertions(+), 4 deletions(-)
diff --git a/.jules/bolt.md b/.jules/bolt.md
index c10fb9b..a3f41a2 100644
--- a/.jules/bolt.md
+++ b/.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-23 - Above-the-fold 이미지 디코딩 최적화
+**Learning:** LCP에 해당하는 Above-the-fold 이미지에 `decoding="async"`를 설정하면 디코딩 작업이 지연되어 오히려 LCP 렌더링 시간이 늘어날 수 있다.
+**Action:** 향후 lazy load 되는 이미지가 아닌 첫 화면의 중요한 SVG/LCP 이미지에는 `decoding="async"`를 적용하지 않도록 한다.
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 56ad628..e590ee0 100644
--- a/CHANGELOG.md
+++ b/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'` 지시어 추가
diff --git a/index.html b/index.html
index c40fea3..0dacf4a 100644
--- a/index.html
+++ b/index.html
@@ -29,7 +29,8 @@
본문으로 건너뛰기