Skip to content

⚡ Bolt: [performance improvement] content-visibility 적용을 통한 초기 렌더링 지연시간 최적화 #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
seonghobae wants to merge 1 commit into
base: main
Choose a base branch
from
Open

⚡ Bolt: [performance improvement] content-visibility 적용을 통한 초기 렌더링 지연시간 최적화 #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .jules/bolt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`를 지정하여 스크롤 점프를 방지하도록 최적화합니다.
6 changes: 6 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down