From acea8b7e693c0e6ed21faac489d43831c7874737 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Fri, 31 Jul 2026 13:57:40 +0000 Subject: [PATCH] =?UTF-8?q?LCP=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=A0=8C?= =?UTF-8?q?=EB=8D=94=EB=A7=81=20=EC=B5=9C=EC=A0=81=ED=99=94=20(`decoding?= =?UTF-8?q?=3D"async"`=20=EC=A0=9C=EA=B1=B0)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 뷰포트 상단에 위치한 핵심 이미지(Hero 아트, 로고 등)에서 `decoding="async"` 속성을 제거하여 브라우저 메인 스레드가 이미지 디코딩을 백그라운드로 미루지 않고 즉시 처리하도록 변경했습니다. 이를 통해 Largest Contentful Paint (LCP) 지표를 개선합니다. --- .jules/bolt.md | 4 ++++ CHANGELOG.md | 1 + index.html | 6 ++++-- tests/test_styles.py | 6 ++++-- 4 files changed, 13 insertions(+), 4 deletions(-) diff --git a/.jules/bolt.md b/.jules/bolt.md index c10fb9b..1d52f93 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-31 - Remove decoding="async" from LCP images +**Learning:** `decoding="async"` on above-the-fold critical images (like LCP or hero images) can unintentionally delay their rendering, degrading Largest Contentful Paint (LCP) performance as the browser yields the main thread before decoding them. +**Action:** Remove `decoding="async"` from non-lazy, critical above-the-fold SVG/images to prioritize their rendering, while keeping it on off-screen lazy-loaded images. diff --git a/CHANGELOG.md b/CHANGELOG.md index 56ad628..29ef811 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # CHANGELOG ## [Unreleased] +- **성능 개선**: LCP(Largest Contentful Paint) 성능 향상을 위해 뷰포트 내 핵심 SVG 이미지(`fetchpriority="high"`)에서 `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 @@
- + + Contextual Wisdom Lab