From ef8347042ec7ab99bd17dba9a73e7832a6735839 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 1 Jul 2026 14:57:37 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Bolt:=20Add=20content-visibility=20?=
 =?UTF-8?q?to=20off-screen=20elements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add content-visibility and contain-intrinsic-size to .section and .site-footer
- Reduces initial layout duration
- Update .jules/bolt.md with learning
---
 .jules/bolt.md | 3 +++
 styles.css     | 6 ++++++
 2 files changed, 9 insertions(+)

diff --git a/.jules/bolt.md b/.jules/bolt.md
index 8de11f5..e2c6fb1 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-06-27 - content-visibility를 이용한 초기 렌더링 성능 최적화
+**Learning:** 초기 로드 시 화면 바깥에 위치한 요소들(.section, .site-footer)로 인해 초기 Layout 시간과 Style Recalculation 시간이 불필요하게 소요됨을 확인했습니다.
+**Action:** `content-visibility: auto` 속성을 적용해 브라우저가 화면 바깥 요소의 렌더링을 지연시키도록 하고, `contain-intrinsic-size`를 지정하여 스크롤 점프를 방지하도록 최적화합니다.
diff --git a/styles.css b/styles.css
index 3cca9f9..1a4c15f 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: Skip off-screen rendering to reduce initial layout time */
+  content-visibility: auto;
+  contain-intrinsic-size: auto 500px;
 }
 
 .section-heading {
@@ -638,6 +641,9 @@ h1 {
   gap: 28px;
   padding: 42px clamp(20px, 5vw, 72px);
   background: var(--white);
+  /* ⚡ Bolt: Skip off-screen rendering to reduce initial layout time */
+  content-visibility: auto;
+  contain-intrinsic-size: auto 200px;
 }
 
 .site-footer img {