From c138307d7465db6de55003921dc4d9c7b0513541 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 1 Aug 2026 13:56:00 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Bolt:=20[=EC=84=B1=EB=8A=A5=20?=
=?UTF-8?q?=EA=B0=9C=EC=84=A0]=20LCP=20=EC=B5=9C=EC=A0=81=ED=99=94?=
=?UTF-8?q?=EB=A5=BC=20=EC=9C=84=ED=95=9C=20above-the-fold=20SVG=20?=
=?UTF-8?q?=EB=B9=84=EB=8F=99=EA=B8=B0=20=EB=94=94=EC=BD=94=EB=94=A9=20?=
=?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.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..c89f4ff 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-08-01 - LCP SVGs and decoding="async"
+**Learning:** Adding `decoding="async"` to critical, above-the-fold SVG images (like hero images and logos) can actually delay the Largest Contentful Paint (LCP) because it forces the browser to decode the image off the main thread, adding overhead.
+**Action:** Remove `decoding="async"` from LCP SVGs to allow synchronous rendering on the main thread, improving perceived load time.
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 56ad628..9ccb38e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
# CHANGELOG
## [Unreleased]
+- **성능 최적화**: LCP 최적화를 위해 첫 화면에 즉시 노출되는(Above-the-fold) 핵심 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 @@
본문으로 건너뛰기
+
+