긴 페이지 스크롤이 무거울 때는 상품 목록, FAQ, 포트폴리오처럼 섹션이 많은 페이지에서 자주 나옵니다. 화면 밖에 있는 카드까지 처음부터 전부 그리느라 첫 화면이 늦게 뜨고, 스크롤도 버벅입니다.
CSS content-visibility: auto를 섹션 단위로 걸면, 브라우저가 화면 밖 내용은 그리지 않다가 가까워졌을 때 렌더링합니다. 자바스크립트 없이 적용할 수 있어 유지관리가 편합니다.

1. 섹션에 auto를 걸고 높이도 예약하기

긴 목록의 각 카드·섹션 래퍼에 content-visibility: auto를 줍니다. 다만 화면 밖일 때는 안쪽 높이를 모르므로, 스크롤바가 출렁일 수 있습니다. 그래서 contain-intrinsic-size로 대략 높이를 예약합니다. auto 500px처럼 쓰면, 한 번 그려진 뒤에는 실제 높이를 기억해 두는 브라우저가 많습니다.

/* 긴 목록의 각 섹션·카드 */
.section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

높이 추정값은 실제 섹션 평균에 가깝게 맞추면 스크롤 점프가 줄어듭니다. 카드가 작으면 300px, 후기가 길면 700px처럼 페이지 성격에 맞게 조정하세요. 첫 화면(히어로·상단 메뉴)에는 걸지 않는 편이 안전합니다. 바로 보여야 하는 영역까지 미루면 오히려 어색해집니다.

2. 어디에 쓰고, 어디에 쓰면 안 되는지

고객사에서 효과가 잘 나던 곳은 반복되는 큰 블록입니다. 포트폴리오 그리드, FAQ 묶음, 블로그 목록, 시공 사례 갤러리처럼 구조가 비슷한 섹션이 여러 개일 때입니다. 반대로 한 페이지에 섹션이 서너 개뿐이거나, 안의 높이가 들쭉날쭉한 인터랙션 영역에는 이득이 작거나 스크롤이 어색할 수 있습니다.

3. 지원 범위와 실무에서 확인할 점

크롬·엣지 85+, 파이어폭스 125+, 사파리 18+에서 쓸 수 있습니다. 지원하지 않는 브라우저는 속성을 무시하므로 레이아웃이 깨지지는 않습니다. 다만 사파리에서는 섹션을 아주 잘게 나눈 초장문 페이지에서 스크롤이 덜 매끄럽다는 보고가 있어, 적용 뒤에는 아이폰 사파리로 빠르게 훑어 보는 편을 권합니다.

/* 검색·앵커로 바로 점프할 섹션 */
.section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
  /* 고정 헤더 높이만큼 여유 */
  scroll-margin-top: 80px;
}

접근성 측면에서는 화면 밖이어도 DOM과 접근성 트리에는 남습니다. 그래서 스크린 리더가 내용을 못 읽는 문제는 보통 없습니다. 적용 후 확인은 간단합니다. 개발자 도구 Performance에서 첫 로딩 구간의 렌더링 시간을 비교하고, 실제 폰에서 스크롤바 점프와 앵커 링크(#section) 이동이 자연스러운지만 보면 됩니다.