content-visibility 속성

웹 개발에서 성능 최적화는 사용자 경험을 좌우하는 중요한 요소 중 하나다.

특히 복잡한 레이아웃이나 방대한 콘텐츠가 있는 페이지에서는 렌더링 비용을 줄이는 것이 핵심 과제인데 이러한 문제를 해결하기 위해 CSS에서는 content-visibility라는 강력한 속성이 있다.

 

1. content-visibility 속성이란?
   - 브라우저가 Element의 콘텐츠를 언제 렌더링할지 제어할 수 있도록 도와주는 CSS 속성
   - 기본적으로 DOM에 있는 요소들은 뷰포트에 보이지 않아도 레이아웃 계산(Layout), 스타일 계산(Paint), 렌더링(Rendering)을 수행. 이 과정은 특히 복잡한 DOM 구조일 경우 성능 병목을 일으킬 수 있음
2. 속성 값
   - visible (기본값): 원래 기존 동작대로 동작
   - hidden: 렌더링되지 않음, display: none과 비슷하게 동작하지만, 레이아웃의 영역은 유지됨
   - auto: 브라우저는 Element가 뷰포트에 들어올 때까지만 콘텐츠 렌더링을 지연시킨다. 레이아웃 크기는 유지되기 때문에 스크롤바의 위치도 변함 없다. 그러나 내부 콘텐츠에는 접근할 수 없으므로 자바스크립트에서 이벤트(offsetHeight, getBoundingClientRect())가 지연되거나 무시될 가능성이 있고, SEO에서 콘텐츠가 인식되지 않을 수 있다. 
   
   
3. contain-intrinsic-size와 같이 사용
   렌더링이 지연되면 브라우저는 크기를 정확히 알 수 없는데 이 문제를 해결하기 위한 속성이다. 미리 크기를 알려주면 Element가 뷰포트에 들어왔을 때 크기만큼 자연스럽게 보여준다.
   
   
4. 24년 9월에 크롬, 엣지, 사파리, 파이어폭스는 최신 버전이라면 사용 가능하지만, 너무 오래된 기기나 브라우저는 지원하지 않는다.

.lazy-section {
  content-visibility: auto;
  contain-intrinsic-size: 300px;
}

 

content-visibility와 contain-intrinsicintrinsic-size 속성을 함께 사용하게 되면 사용자가 스크롤을 하지 않은 상태에서는 렌더링되지 않기 때문에 초기에 로딩이 빠르게 된다.