게시일: 2024년 10월 30일
2024년 초에 Interaction to Next Paint (INP)를 Core Web Vitals 측정항목으로 도입하면서 렌더링 성능에 대한 관심이 높아졌습니다. INP의 일부는 사용자가 페이지와의 상호작용을 시작한 후 브라우저가 다음 프레임을 그리는 데 필요한 작업에 중점을 둡니다. 웹사이트의 INP를 낮게 유지하면 사용자가 상호작용에 최대한 빠르고 원활하게 응답하는 것처럼 느낄 수 있습니다.
또한 페이지가 로드될 때 실행되어야 하는 렌더링 작업도 중요합니다. 이 작업은 상호작용이 시작되는 시점부터 지연될 수 있습니다. 페이지 수명 주기 중 이 중요한 부분에서 발생하는 작업의 양을 줄이는 방법을 찾아보는 것이 좋습니다. CSS content-visibility 속성은 이를 실행하는 한 가지 방법입니다. 2024년 9월부터 이 속성이 기준으로 새로 제공된다는 반가운 소식을 전해드립니다.
content-visibility는 표시 영역에 도달할 때까지 요소의 렌더링을 연기하도록 사용자 에이전트에 지시하는 CSS 속성입니다. DOM 요소가 많은 페이지의 경우 페이지의 초기 로드에서 렌더링 작업이 줄어들므로 유용할 수 있습니다. 대신 사용자가 이를 확인해야 하는 직전에 작업이 실행됩니다.
content-visibility: auto를 적용하면 초기 로드 시 렌더링 성능이 7배 향상됩니다. 자세한 내용을 알아보려면 계속 읽어보세요.
화면 밖에 있는 요소에 이 최적화를 사용 설정하려면 웹사이트의 CSS에서 요소에 content-visibility: auto 규칙을 적용합니다.
.render-me-later {
content-visibility: auto;
}
content-visibility는 CSS 컨테이너의 contain 속성에 정의된 일부 동작에 따라 작동합니다. CSS 포함의 목표는 DOM 트리의 일부를 격리하는 것입니다. 이렇게 하면 렌더링 작업의 범위를 DOM 트리의 특정 부분으로 제한할 수 있으므로 DOM 트리의 하위 집합에 대해서만 레이아웃이 무효화되고 다시 실행됩니다. 렌더링 성능에 이를 적용하려면 contain 속성의 다양한 값과 이를 효과적으로 사용하는 방법을 상당히 잘 알고 있어야 합니다.
content-visibility: auto가 요소에 적용되면 요소는 contain 속성에서 제공하는 일부 속성을 자동으로 사용합니다. 그 결과 영향을 받는 요소는 처음에 높이가 0px로 렌더링되며, 이는 실제로 렌더링되지 않는 것을 의미합니다.
하지만 이 방법에는 몇 가지 부작용이 있습니다. 예를 들어 사용자가 이전에 렌더링되지 않은 요소 쪽으로 스크롤하면 페이지의 스크롤바가 변경되고 높이가 변경될 수 있습니다. 이러한 요소는 사용자가 볼 수 있도록 제때 렌더링됩니다. 이 문제를 완화하려면 contain-intrinsic-size 속성을 적용하세요.
content-visibility가 최근에 기준으로 새로 제공되었으므로 아직 새 속성을 사용하도록 업데이트하지 않은 브라우저를 사용하는 사용자에 관해 우려할 수 있습니다. content-visibility는 CSS 속성이므로 너무 걱정하지 마세요. 이를 이해하는 브라우저는 이를 사용하고, 그렇지 않은 브라우저는 사용하지 않습니다. 즉, content-visibility를 지원하는 브라우저에서 얻을 수 있는 성능 이점 외에도 페이지가 대체로 동일하게 작동할 것으로 예상할 수 있습니다.
content-visibility는 부가적인 이점을 제공합니다. 페이지 로드 중에 렌더링 작업을 줄이는 데 사용할 수 있는 경우 페이지에 가장 필요한 시점에 최대한 많은 프로세싱 성능을 사용할 수 있도록 content-visibility를 사용하는 것이 좋습니다. 이제 이 유용한 기능을 기준점 새로 사용할 수 있으므로 사용자가 필요할 때까지 방지되는 렌더링 작업의 이점을 누릴 수 있도록 자유롭게 사용하세요.