Content Visibility 렌더링 성능 극대화

Content Visibility API로 웹 렌더링 성능 극대화하기

최근 브라우저들은 대규모 DOM을 가진 페이지에서도 부드러운 스크롤과 빠른 초기 렌더링을 제공하기 위해 다양한 최적화 기능을 도입하고 있습니다. 그중에서도 content-visibility는 브라우저가 보이지 않는 영역의 렌더링을 건너뛰도록 지시할 수 있는 강력한 CSS 속성입니다.
이 기능은 특히 다음과 같은 경우에 효과가 큽니다.

• 스크롤이 긴 페이지
• 수백 개 이상의 카드, 목록, 게시물 등이 있는 UI
• 이미지와 텍스트가 반복되는 대규모 콘텐츠 블록
  아래에서 해당 기능이 어떤 방식으로 동작하는지, 그리고 어떻게 적용하는지 살펴보겠습니다.

content-visibility란?

content-visibility 속성은 브라우저가 요소의 렌더링을 지연할 수 있도록 도와주는 CSS 속성입니다. 기본적으로 실제로 화면에 나타나기 전까지는 레이아웃과 페인팅 등을 생략할 수 있습니다.
주요 값은 다음과 같습니다.

• auto: 요소가 화면에 나타나기 전까지 렌더링 생략
• hidden: 요소 렌더링을 완전히 비활성화
• visible: 기본값, 항상 렌더링
  대부분의 성능 최적화는 auto 값을 사용해 구현합니다.

사용 예시

.card-list > .card {
  content-visibility: auto;
  contain-intrinsic-size: 300px;
}

contain-intrinsic-size는 요소가 처음 렌더링되기 전까지 브라우저가 가상 크기를 추정할 수 있도록 도와줍니다. 이를 지정하지 않으면 실제 크기를 계산할 수 없어 최적화 효과가 제한됩니다.
위 설정을 적용하면 .card 요소는 스크롤로 화면에 등장할 때까지 렌더링되지 않으며, 초기 로딩 속도가 크게 향상됩니다.

동작 방식 간단 정리

1. 브라우저는 요소의 실제 콘텐츠를 렌더링하지 않고 공간만 확보합니다.
2. 사용자가 스크롤로 해당 요소를 보기 직전에 레이아웃/페인트 작업이 수행됩니다.
3. 화면에 보여야 할 때만 실제 렌더링이 진행되므로 페이지 전체의 초기 렌더링 부담이 감소합니다.
   즉, 렌더링을 필요한 순간까지 늦춰 브라우저 리소스를 절약하는 기능입니다.

성능 이점

• 초기 렌더링 속도 향상
• 스크롤 시 렌더링 부담 감소
• CPU 사용량 절약
• 모바일 기기에서의 배터리 효율 증가
  실제로 Google 개발자 문서에서는 content-visibility: auto만 적용해도 최대 7배 빠른 렌더링 성능 향상을 측정했다고 소개합니다.

주의할 점

• 요소의 예상 크기를 지정하지 않으면 레이아웃 이동(CLS)이 발생할 수 있음
• 매우 동적인 요소에는 적합하지 않을 수 있음
• CSS만으로 적용되기 때문에 JS 이벤트를 연결하는 시점에 주의해야 함

결론

content-visibility는 CSS만으로 브라우저 렌더링 비용을 크게 절약할 수 있는 강력한 기능입니다. 특히 콘텐츠가 많은 페이지나 무한 스크롤이 있는 웹 앱에서 눈에 띄는 성능 향상을 기대할 수 있습니다.
지금 바로 적용해보고 웹의 부드러움을 체감해 보세요!