⚡ Bolt: [성능 개선] content-visibility 적용을 통한 렌더링 지연 및 초기 로딩 속도 개선

.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` 적용을 고려해야 합니다.

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` 테스트 파일을 추가했습니다.

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;