發布日期：2026 年 5 月 1 日
Chrome 將從 Chrome 148 開始，針對 Container Timing 效能 API 推出來源試用。
最大內容繪製 (LCP) 等指標會評估最大內容的繪製時間，提供網頁「載入」時間的概略資訊。不過，網站可能也會對網頁特定部分的載入時間感興趣，而不只是「最大」部分。
網站可使用元素時間，透過 elementtiming 屬性標記元素，瞭解元素載入時間，無論是否為 LCP 元素。不過，與 LCP 相同，TBT 只能測量個別元素的算繪時間。
容器時間會擴充元素時間的概念，用來評估「內容區塊」(或「容器」)。這可讓您瞭解何時向使用者提供完整元件，例如小工具、資訊卡、內容區段、側欄等。這個工具可為網站提供額外的成效資訊，方便您深入瞭解網站成效。
Container Timing 由 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 類似，通常是在離開網頁時測量。
這些成效指標隨後會傳回至 Analytics，以供監控和分析。
您也可以使用 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 會忽略任何新項目，但可能會在開發人員工具中造成警告，因此最佳做法是在新增觀察器之前，先進行功能偵測，例如使用下列程式碼：
if (typeof PerformanceContainerTiming !== "undefined") {
// Container Timing is supported
}
最佳做法
如要充分運用容器時間，請遵循下列最佳做法：
- 提早設定屬性：在 HTML 文件中加入
containertiming屬性，或在將元素加入文件前加入，以完成追蹤。如果之後再透過 JavaScript 新增屬性，可能會導致繪製作業遺漏。 - 使用有意義的 ID：為
containertiming屬性選擇描述性名稱，方便進行分析。 - 策略性放置：將
containertiming套用至對指標有意義的語意區段，例如hero-section、product-grid、checkout-form。並非所有容器都需要測量。 - 忽略不相關的內容：在不應影響元件指標的子項元素 (例如廣告或裝飾元素) 上使用
containertiming-ignore。
如何啟用容器時間？
從 Chrome 147 開始，您可以使用 chrome://flags/#enable-experimental-web-platform-features 標記啟用 Container Timing API，也可以使用 --enable-blink-features=ContainerTiming 標記透過指令列啟用。
從 Chrome 148 開始，網站可以註冊來源試用權杖，並將權杖新增至網頁，自動啟用這項功能。您可以在實際使用者身上測試 API。容器時間指標可記錄在 Analytics 中，並進行分析，以驗證 API 是否正常運作及收集洞察資料。
意見回饋和詳細資料
如要提供 Container Timing API 的意見回饋，請在 GitHub 上回報問題。
此外，一項規格也正在進行標準化程序。如要瞭解這個 API 的內部運作方式，Igalia 已發布文章，說明 API 的技術導入方式。
結論
我們很高興看到這項 API 即將發布，也很期待開發人員能運用這項 API，深入瞭解效能問題。我們期待收集 API 的意見回饋，如果一切順利，很快就會推出這項 API。