diff --git a/.jules/bolt.md b/.jules/bolt.md index c10fb9b..c8c4639 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:** 불필요한 번들 다운로드 및 스크립트 실행을 방지하기 위해 사용하지 않는 라이브러리를 식별하고 제거할 것. + +## 2024-07-14 - SVG 및 LCP 이미지의 잘못된 decoding="async" 적용 방지 +**Learning:** LCP(Largest Contentful Paint) 대상 이미지나 SVG 파일에 `decoding="async"`를 적용하면 렌더링이 지연되어 오히려 성능 저하를 일으키는 안티패턴이 됩니다. SVG는 디코딩이 아닌 파싱 과정을 거치며, LCP 이미지는 렌더링을 지연시키지 않아야 합니다. +**Action:** 오프스크린이거나 지연 로드되는 래스터 이미지에만 `decoding="async"`를 적용하고, SVG 및 우선순위가 높은 LCP 이미지에는 적용하지 않도록 합니다. diff --git a/CHANGELOG.md b/CHANGELOG.md index 56ad628..1b5c6f5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # CHANGELOG ## [Unreleased] +- **성능 최적화**: SVG 파일 및 최상단 LCP(Largest Contentful Paint) 대상 이미지에서 불필요한 `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..29a71ea 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,7 @@