From c4dcc7ea05d9a9043f03099f0ba1be71ff74c95a Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Mon, 20 Jul 2026 14:00:42 +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]=20=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20SV?= =?UTF-8?q?G=20decoding=3D"async"=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit SVG 이미지 및 LCP 이미지에 부여된 불필요한 `decoding="async"` 속성을 제거하여 브라우저 파싱 및 렌더링 성능을 최적화했습니다. [What] - `index.html` 내 SVG 이미지들과 fetchpriority="high"인 LCP 이미지에서 `decoding="async"` 속성 제거 - 코드 상에 최적화 의도를 기록한 ⚡ Bolt 주석 추가 - `tests/test_styles.py`에서 래스터 이미지에만 `decoding="async"`를 검사하도록 수정 - `.jules/bolt.md`에 관련된 성능 안티 패턴 학습 내용 기록 [Why] - SVG 파일은 디코딩(decoding) 과정이 없고 파싱(parsing)만 이루어지므로 `decoding="async"`가 무의미합니다. - 특히 LCP 이미지에 `decoding="async"`를 설정하면 초기 렌더링을 지연시킬 위험이 있는 안티 패턴입니다. [Impact] - 의미 없는 DOM 속성을 줄여 마크업 크기가 미세하게 감소 - LCP 이미지의 의도치 않은 렌더링 지연(디코딩 연기) 방지로 Time to First Paint (TTFP) 및 Largest Contentful Paint (LCP) 지표 개선 기대 [Measurement] - 전체 pytest(`tests/`) 통과 확인 완료 - `index.html` 내 SVG 이미지들에 해당 속성이 제거되고 명시적인 주석이 추가되었는지 `grep`으로 확인 완료 --- .jules/bolt.md | 4 ++++ CHANGELOG.md | 1 + index.html | 14 +++++++++----- tests/test_styles.py | 6 ++++-- 4 files changed, 18 insertions(+), 7 deletions(-) diff --git a/.jules/bolt.md b/.jules/bolt.md index c10fb9b..0a10c2c 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-10-25 - SVG 및 LCP 이미지의 불필요한 decoding="async" 속성 제거 +**Learning:** SVG 이미지는 디코딩(decoding) 과정이 없으며 파싱(parsing)만 일어나기 때문에 `decoding="async"` 속성이 무의미합니다. 또한, LCP 이미지(fetchpriority="high")의 경우 렌더링을 지연시킬 수 있는 안티 패턴이 될 수 있습니다. +**Action:** `decoding="async"`는 화면 밖(off-screen) 또는 지연 로드(lazy load)되는 래스터(raster) 이미지에만 적용하여 불필요한 속성 부여를 피합니다. diff --git a/CHANGELOG.md b/CHANGELOG.md index 56ad628..0626fc2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # CHANGELOG ## [Unreleased] +- **성능 개선**: SVG 이미지와 LCP 이미지에서 불필요하고 렌더링 지연을 유발할 수 있는 `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..a99cae9 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,8 @@
- + + Contextual Wisdom Lab