From d95bc5a1f9f631a8b419d2d8b9588271076a0aa2 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Thu, 2 Jul 2026 14:17:57 +0000 Subject: [PATCH 1/4] Optimize CSS rendering with content-visibility --- .jules/bolt.md | 3 +++ CHANGELOG.md | 1 + styles.css | 3 +++ 3 files changed, 7 insertions(+) diff --git a/.jules/bolt.md b/.jules/bolt.md index 8de11f5..5cc9d67 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 optimization +**Learning:** Applying `content-visibility: auto` on long landing pages significantly reduces initial layout and paint times by delaying the rendering of off-screen sections, but requires `contain-intrinsic-size` to prevent scrollbar jumping. +**Action:** Always consider `content-visibility` for pages with multiple heavy, independent vertical sections below the fold. diff --git a/CHANGELOG.md b/CHANGELOG.md index e5fc107..571ca7d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ # CHANGELOG ## [Unreleased] +- **성능 개선**: `styles.css`의 `.section` 요소에 `content-visibility: auto;`를 적용하여 오프스크린 렌더링 성능을 최적화했습니다. - **성능 개선**: `i18n.js`에서 초기 로드 시 기본 언어가 한국어(ko)인 경우 불필요한 DOM 순회 및 텍스트 업데이트를 생략하도록 개선했습니다. - **테스트 추가**: 다국어 처리 로직의 무결성을 검증하기 위해 `test_i18n.html` 테스트 파일을 추가했습니다. diff --git a/styles.css b/styles.css index 3cca9f9..120cf92 100644 --- a/styles.css +++ b/styles.css @@ -297,6 +297,9 @@ 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: auto 600px; } .section-heading { From d122a2700689172caa7b856491dbcfc1dd261b59 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Thu, 2 Jul 2026 21:42:38 +0000 Subject: [PATCH 2/4] Optimize CSS rendering with content-visibility From 41d898968d2f50dad7c7794776a7382b61cd6239 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Fri, 3 Jul 2026 06:57:12 +0000 Subject: [PATCH 3/4] Optimize CSS rendering with content-visibility --- .jules/bolt.md | 6 +++--- CHANGELOG.md | 2 +- styles.css | 8 ++++++++ 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/.jules/bolt.md b/.jules/bolt.md index 5cc9d67..87e8725 100644 --- a/.jules/bolt.md +++ b/.jules/bolt.md @@ -4,6 +4,6 @@ ## 2024-06-27 - 초기 언어 로드 시 불필요한 DOM 탐색 제거 **Learning:** 초기 로드 시 요청된 언어가 HTML의 기본 언어(ko)와 동일한 경우, 모든 DOM 텍스트 노드를 탐색하고 치환하는 불필요한 작업을 생략하면 성능이 향상됨을 확인했습니다. **Action:** `isInitialDefault` 조건을 추가하여 초기 로드 시 불필요한 DOM 순회 코드가 실행되지 않도록 개선했습니다. -## 2024-05-24 - content-visibility optimization -**Learning:** Applying `content-visibility: auto` on long landing pages significantly reduces initial layout and paint times by delaying the rendering of off-screen sections, but requires `contain-intrinsic-size` to prevent scrollbar jumping. -**Action:** Always consider `content-visibility` for pages with multiple heavy, independent vertical sections below the fold. +## 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 571ca7d..3cb3e91 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # CHANGELOG ## [Unreleased] -- **성능 개선**: `styles.css`의 `.section` 요소에 `content-visibility: auto;`를 적용하여 오프스크린 렌더링 성능을 최적화했습니다. +- **성능 개선**: `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 120cf92..d796bf7 100644 --- a/styles.css +++ b/styles.css @@ -299,9 +299,17 @@ h1 { 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; } From f41f768218a8e8008cfd3233d5fde36460ee25fe Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Fri, 3 Jul 2026 15:21:20 +0000 Subject: [PATCH 4/4] Optimize CSS rendering with content-visibility