게시일: 2026년 5월 1일
Chrome에서는 Chrome 148부터 Container Timing 성능 API를 위한 오리진 트라이얼을 시작합니다.
최대 콘텐츠 페인트 (LCP)와 같은 측정항목은 가장 큰 콘텐츠의 페인트 시간을 살펴봄으로써 사용자가 페이지를 '로드됨'으로 간주할 가능성이 있는 시점에 대한 개요를 제공합니다. 하지만 사이트에서는 '가장 큰' 부분이 아닌 페이지의 특정 부분이 로드되는 시점에도 관심이 있을 수 있습니다.
요소 타이밍을 사용하면 사이트에서 elementtiming 속성으로 요소를 표시하여 로드되는 시점과 LCP 요소인지 여부를 파악할 수 있습니다. 하지만 LCP와 마찬가지로 개별 요소의 렌더링 시간만 측정할 수 있습니다.
컨테이너 타이밍은 요소 타이밍 개념을 확장하여 '콘텐츠 블록' (또는 '컨테이너')을 측정합니다. 이를 통해 위젯, 카드, 콘텐츠 섹션, 사이드바 등 전체 구성요소가 사용자에게 제공된 시점을 파악할 수 있습니다. Google 애널리틱스 4는 추가 통계를 원하는 사이트에 추가 실적 정보를 제공합니다.
Bloomberg에서 개발하고 Igalia에서 Chrome에 구현한 컨테이너 타이밍은 Chrome 사용자 및 기타 Chromium 기반 브라우저의 플래그 뒤에서 사용할 수 있으며, 사이트에서 오리진 트라이얼을 통해 필드에서 테스트할 수도 있습니다.
오리진 트라이얼은 API 출시의 마지막 단계 중 하나로, 개발자가 기본적으로 출시되기 전에 사이트에서 기능을 사용 설정하여 테스트하고, 예상대로 작동하는지, 유용한지 팀에 알릴 수 있습니다. 또한 개발자는 출시 전에 API 디자인의 변경사항을 제안할 수 있습니다.
Container Timing API 작동 방식
요소 타이밍과 마찬가지로 컨테이너 타이밍은 다양한 HTML 요소에 속성 (containertiming)을 추가하여 이러한 요소를 측정해야 함을 브라우저에 나타내는 방식으로 작동합니다.
<div containertiming="my-component">
<h2>Title</h2>
<div>...</div>
</div>
그러면 PerformanceObserver를 사용하여 다른 성능 측정항목과 동일한 방식으로 해당 컨테이너 내의 페인트를 관찰할 수 있습니다.
<script>
const observer = new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log("Container painted:", entry.identifier);
console.log("First render:", entry.firstRenderTime);
console.log("Latest paint:", entry.startTime);
console.log("Painted area:", entry.size);
console.log("Last painted element:", entry.lastPaintedElement);
}
});
observer.observe({ type: "container", buffered: true });
</script>
새 요소가 컨테이너에 그려지면 업데이트된 정보와 함께 새 성능 항목이 방출됩니다. 페이지 수명 동안 새 요소를 추가할 수 있으므로 단일 완료 지점이 없습니다. 이는 일반적으로 탐색 시 페이지 끝에서 측정되는 LCP와 유사합니다.
그런 다음 이러한 성능 측정항목을 모니터링 및 분석을 위해 분석으로 다시 전송할 수 있습니다.
하위 컨테이너는 containertiming-ignore 속성을 사용하여 무시할 수도 있습니다.
<div containertiming="main-content">
<main>...</main>
<!-- This aside and its children will be ignored -->
<aside containertiming-ignore>...</aside>
</div>
데모
다음 CodePen은 Container Timing API가 작동하는 모습을 보여줍니다.
브라우저가 Container Timing API를 지원하지 않는 경우 다음 동영상에서 작동 방식을 확인할 수 있습니다.
컨테이너 타이밍에 반영되는 업데이트는 무엇인가요?
컨테이너 타이밍의 목적은 컨테이너가 모든 하위 요소와 함께 로드되는 시점을 포착하는 것입니다. 사용자가 컨테이너 또는 페이지와 상호작용할 때 훨씬 나중에 도착할 수 있는 모든 미래 페인트를 측정하기 위한 것이 아닙니다. 이러한 이유로 컨테이너 타이밍은 LCP 및 요소 타이밍과 마찬가지로 '콘텐츠가 포함된 페인트'에 따라 달라지며 콘텐츠가 포함된 페인트로 이미 계산된 요소에 대해서는 새 페인트 항목을 내보내지 않습니다.
예를 들어 컨테이너가 처음에는 배경색만으로 렌더링되거나 콘텐츠가 없는 요소 (예: 스켈레톤 화면)만 포함하는 경우 컨테이너에 콘텐츠가 추가될 때까지 container 항목이 방출되지 않습니다.
업데이트 예시로, 컨테이너의 기존 요소에 있는 텍스트를 업데이트해도 해당 업데이트에 대한 새 container 항목이 생성되지 않습니다. 요소의 콘텐츠 첫 페인트만 고려되기 때문입니다. 하지만 빈 요소에 텍스트가 추가되거나 해당 텍스트에 새 요소가 추가되면 해당 요소의 첫 페인트이므로 새 container 항목이 방출됩니다.
기능 감지 컨테이너 타이밍 지원
containertiming 속성은 지원되지 않는 브라우저에서 문제를 일으키지 않으므로 기능 감지를 할 필요가 없습니다.
PerformanceObserver는 새 항목을 무시하지만 DevTools에서 경고가 발생할 수 있으므로 다음과 같은 코드로 관찰자를 추가하기 전에 기능 감지를 실행하는 것이 좋습니다.
if (typeof PerformanceContainerTiming !== "undefined") {
// Container Timing is supported
}
권장사항
컨테이너 타이밍을 최적으로 사용하기 위해 따라야 할 몇 가지 권장사항이 있습니다.
- 일찍 속성 설정: 완전한 추적을 위해 HTML 문서에
containertiming속성을 추가하거나 요소가 문서에 추가되기 전에 추가합니다. 나중에 JavaScript로 속성을 추가하면 페인트가 누락될 수 있습니다. - 의미 있는 식별자 사용: 분석을 더 쉽게 할 수 있도록
containertiming속성에 설명적인 이름을 선택합니다. - 전략적 배치: 측정항목에 중요한 의미론적 섹션(예:
hero-section,product-grid,checkout-form)에containertiming를 적용합니다. 모든 컨테이너를 측정할 필요는 없습니다. - 관련 없는 콘텐츠 무시: 광고나 장식 요소와 같이 구성요소 측정항목에 영향을 주지 않아야 하는 하위 요소에
containertiming-ignore를 사용합니다.
컨테이너 타이밍을 사용 설정하는 방법
컨테이너 타이밍 API는 Chrome 147부터 chrome://flags/#enable-experimental-web-platform-features 플래그를 사용하여 사용 설정할 수 있으며, 명령줄에서는 --enable-blink-features=ContainerTiming 플래그를 사용하여 사용 설정할 수 있습니다.
Chrome 148부터 사이트에서 오리진 트라이얼 토큰을 등록하고 페이지에 추가하여 기능을 자동으로 사용 설정할 수 있습니다. 이를 통해 실제 사용자를 대상으로 필드에서 API를 테스트할 수 있습니다. 컨테이너 타이밍 측정항목은 분석에 기록하고 분석하여 API가 예상대로 작동하는지 확인하고 유용한 정보를 수집할 수 있습니다.
의견 및 세부정보
컨테이너 타이밍 API에 관한 의견은 GitHub의 문제로 제출해야 합니다.
표준화 프로세스를 거치고 있는 사양도 있습니다. 이 API의 내부 작동 방식에 관심이 있는 경우 Igalia에서 API의 기술적 구현 방식에 관한 게시물을 게시했습니다.
결론
이 API가 출시를 앞두고 있어 기쁘며, 개발자가 이 API를 사용하여 성능 문제에 대한 새로운 통계를 얻을 수 있기를 기대합니다. API에 대한 의견을 수집하고 모든 것이 순조롭게 진행되면 곧 출시할 예정입니다.