이 글은 https://web.dev/content-visibility/을 번역한 글입니다.
content-visibility는 layout과 painting을 포함한 렌더링을 스킵할 수 있게 해주어 웹페이지 렌더링 퍼포먼스 향상에 도움을 주는 css 속성입니다.
content-visibility 필요없는 부분을 렌더링하지 않기 때문에 초기 로드 속도 향상 및 사용자들의 페이지 인터렉션 경험을 더 우수하게 해줍니다.
contaiment
content-visibility는 the CSS Containment Spec을 바탕으로 개발한 속성이므로 contaiment에 대해 먼저 알아 보겠습니다.
CSS Containment 사양의 목표는 개발자가 페이지의 하위 트리(subtree)를 페이지의 나머지 부분과 분리할 수 있도록 하여 웹 페이지의 성능을 향상시키는 것입니다. 브라우저가 페이지의 일부가 독립적임을 인식하면 렌더링을 최적화 하고 성능을 개선 할 수 있습니다.
위 설명을 보니 왜 content-visibility가 containment에 rely하고 있다고 하는지 이해가 되었습니다.
content-visibility의 렌더링 스킵 로직이 containment를 기반으로 구현되어있는 것으로 보입니다.
containment 속성에는 4가지 선택지가 있습니다.
- size
: 해당 element의 사이즈만 필요하기 때문에 layout 단계를 스킵할 수 있을 때 사용
- layout
: 다른 요소에 영향을 미치지 않기 때문에 layout 단계를 스킵할 수 있을 때 사용
- style
: 해당 element의 스타일 계산을 스킵하고 싶을 때 사용
- paint
: 해당 element와 그 sub elements 의 paint 단계를 스킵하고 싶을 때 사용
하지만 우리는 매번 어떤 값을 선택해야할지 결정하기가 어려울 때가 많습니다.
이를 위해 필요한 것이 바로 content-visibility입니다.
content-visibility는 자동적으로 필요한 containment값을 세팅하여 최적의 브라우저 렌더링 퍼포먼스 향상을 할 수 있도록 합니다.
content-visibility에도 선택할 수 있는 여러 옵션이 있습니다.
그 중 auto가 가장 즉각적인 성능향상을 제공하는 값 중 하나입니다.
content-visibility: auto 는
containment: layout style paint;의 역할을 수행합니다. 그리고 때에 따라 size의 역할도 수행하기도 합니다.
그리고 사용자가 페이지에서 해당 요소를 “just in time”으로 볼 수 있도록 뷰포트에 접근할 때 페인팅과 *hit test를 통해 렌더링을 수행합니다.
*Hit test는 렌더링 프로세스에서 생성된 페인트 레코드 데이터를 사용하여 이벤트가 발생한 지점 좌표 아래에 무엇이 있는지 알아내는 테스트입니다.
주의할 점
브라우저는 건너뛴 하위 트리 중 하나에서 *일부 렌더링이 발생하도록 하는 DOM API를 호출하지 않도록 주의하는 경우에만 렌더링 작업을 건너뛸 수 있습니다.
content-visibility:hidden이 있는 요소의 하위 트리에 대해 이러한 API 중 하나를 호출하면 이를 찾는 데 도움이 되도록 Chromium에서 콘솔 메시지를 인쇄합니다.
*레이아웃/리플로우를 강제하는 요소들
contain-intrinsic-size
contain-intrinsic-size는 컨텐츠의 사이즈 placeholder 역할을 합니다.
해당 속성을 기재하지 않는 경우에 요소가 화면에 렌더된 이후에 화면에 요소사이즈가 반영되면서 스크롤 사이즈가 변동되기 때문에 좋은 유저 경험을 주기가 어려울 것입니다.
따라서 이러한 현상을 방지하기 위한 간이 요소 사이즈 제공이라고 생각하시면 됩니다.
contain-intrinsic-size는 플레이스 홀더 사이즈이기 때문에 해당요소가 화면에 렌더되어 실제 사이즈가 계산된 이후에는 다시 off screen이 되더라도 실제 사이즈가 캐쉬되어 저장됩니다.
이 속성은 인피니트 스크롤 기능을 구현할 때 많은 도움이 될 것입니다.
또한 Chromium 98 이후부터는 auto 값을 선택할 수 있도록 업데이트된 기능이 제공될 예정입니다.
Content-visibility: hidden vs visibility: hidden
기존에 사용했던 visibility: hidden, display: none 외에도 content-visibility: hidden의 옵션이 하나 더 추가되었습니다.
visibility: hidden은 육안으로 보이지 않지만, 클릭이 가능하고 렌더링 상태 업데이트가 필요할 때마다 업데이트 됩니다.
content-visibility: hidden은 렌더링 상태를 유지하면서 요소를 숨기므로 변화가 생길 경우, 화면에 보이는 상황에서만 변화를 업데이트합니다.
content-visibility: hidden는 가상 스크롤러, 레이아웃 계산 및 SPA에 유용하게 사용될 수 있습니다. 화면에 보여지지 않는 뷰들은 content-visibility: hidden를 통해 화면에 보여지지 않는 상태로 남아있으면서도 캐쉬된 상태를 유지할 수 있기 때문입니다. 이는 다시 요소가 화면에 렌더링 되는 것을 더욱 빠르게 해줍니다.
Interaction to Next Paint (INP)에 미치는 효과
INP는 사용자 입력에 안정적으로 반응하는 페이지의 능력을 평가하는 측정항목입니다.
응답성은 렌더링 작업을 포함하여 메인 스레드에서 발생하는 과도한 작업량에 의해 영향을 받을 수 있습니다.
특정 페이지에서 렌더링 작업을 줄일 수 있을 때마다 기본 스레드에 사용자 입력에 더 빠르게 응답할 수 있는 기회가 제공됩니다. 여기에는 렌더링 작업이 포함되며, 적절한 경우 콘텐츠 Content-visibility을 사용하면 특히 대부분의 렌더링 및 레이아웃 작업이 완료되는 시작 중에 렌더링 작업을 줄일 수 있습니다.
렌더링 작업을 줄이는 것은 INP에 직접적인 영향을 미칩니다. 사용자가 오프스크린 요소의 레이아웃 및 렌더링을 연기하기 위해 content-visibility 속성을 적절하게 사용하는 페이지와 상호 작용하려고 하면 메인 스레드가 사용자에게 표시되는 중요한 작업에 응답할 수 있는 기회를 제공하게 됩니다. 이는 일부 상황에서 페이지의 INP를 향상시킬 수 있습니다.
Brwoser support
아직은 크롬과 엣지에서만 지원이 되고 있습니다.
하지만 contain 속성은 대부분의 modern browser에서 지원되고 있습니다.
- content-visibility support
- containment support
다른 브라우저에서는 @support를 이용하는 방식으로 content-visibility의 fallback 처리가 가능합니다.
물론 content-visibility를 사용하지 않고 containment 속성을 바로 사용하는 것도 가능합니다.
마무리
날이 갈수록 더욱 강력해지는 CSS의 힘을 느낄 수 있었던 시간이었습니다. 앞으로 발전해나가는 CSS 속성들을 잘 주시하면서 꾸준히 공부해야겠다고 생각했습니다.
