diff --git a/.jules/bolt.md b/.jules/bolt.md index 8de11f5..87e8725 100644 --- a/.jules/bolt.md +++ b/.jules/bolt.md @@ -4,3 +4,6 @@ ## 2024-06-27 - 초기 언어 로드 시 불필요한 DOM 탐색 제거 **Learning:** 초기 로드 시 요청된 언어가 HTML의 기본 언어(ko)와 동일한 경우, 모든 DOM 텍스트 노드를 탐색하고 치환하는 불필요한 작업을 생략하면 성능이 향상됨을 확인했습니다. **Action:** `isInitialDefault` 조건을 추가하여 초기 로드 시 불필요한 DOM 순회 코드가 실행되지 않도록 개선했습니다. +## 2024-05-24 - content-visibility 최적화 +**Learning:** 긴 랜딩 페이지에 `content-visibility: auto`를 적용하면 화면 밖 섹션의 렌더링을 지연시켜 초기 Layout 및 Paint 시간을 크게 줄일 수 있습니다. 단, 스크롤바 점프를 방지하기 위해 반드시 `contain-intrinsic-size`를 함께 사용해야 합니다. +**Action:** 스크롤을 내려야 보이는 독립적이고 무거운 섹션이 많은 페이지에는 항상 `content-visibility` 적용을 고려해야 합니다. diff --git a/CHANGELOG.md b/CHANGELOG.md index e5fc107..3cb3e91 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ # CHANGELOG ## [Unreleased] +- **성능 개선**: `styles.css`의 `.section` 요소에 `content-visibility: auto;` 및 `contain-intrinsic-size: auto 600px;`를 적용하여 오프스크린 렌더링 성능을 최적화했습니다. - **성능 개선**: `i18n.js`에서 초기 로드 시 기본 언어가 한국어(ko)인 경우 불필요한 DOM 순회 및 텍스트 업데이트를 생략하도록 개선했습니다. - **테스트 추가**: 다국어 처리 로직의 무결성을 검증하기 위해 `test_i18n.html` 테스트 파일을 추가했습니다. diff --git a/styles.css b/styles.css index 3cca9f9..d796bf7 100644 --- a/styles.css +++ b/styles.css @@ -297,7 +297,18 @@ h1 { .section { padding: clamp(72px, 10vw, 132px) clamp(20px, 5vw, 72px); border-top: 1px solid var(--line); -} + /* ⚡ Bolt: Off-screen sections are skipped for layout and paint */ + content-visibility: auto; + contain-intrinsic-size: 600px; /* fallback for older browsers */ + contain-intrinsic-size: auto 600px; +} + +/* ⚡ Bolt: Adjust intrinsic sizes per section to prevent scroll jumps */ +.section.principles { contain-intrinsic-size: auto 800px; } +.section.dikw { contain-intrinsic-size: auto 900px; } +.section.evidence { contain-intrinsic-size: auto 450px; } +.section.naruon { contain-intrinsic-size: auto 450px; } +.section.projects { contain-intrinsic-size: auto 700px; } .section-heading { max-width: 900px;