Ursprungstest für Container Timing

Barry Pollard
Jason Williams
José Dapena Paz

Veröffentlicht am 1. Mai 2026

Chrome startet ab Chrome 148 einen Ursprungstest für die Container Timing Performance API.

Messwerte wie Largest Contentful Paint (LCP) bieten einen allgemeinen Überblick darüber, wann eine Seite vom Nutzer wahrscheinlich als "geladen" angesehen wird. Dazu wird die Renderingzeit des größten Inhaltsteils betrachtet. Websites sind jedoch möglicherweise auch daran interessiert, wann bestimmte Teile der Seite geladen werden, und nicht nur der „größte“ Teil.

Element Timing ermöglicht es Websites, Elemente mit einem elementtiming Attribut zu markieren, um zu verstehen, wann sie geladen werden, unabhängig davon, ob sie das LCP-Element sind. Wie LCP ist es jedoch auf die Messung der Renderingzeiten einzelner Elemente beschränkt.

Container Timing erweitert das Konzept von Element Timing, um „Inhaltsblöcke“ (oder „Container“) zu messen. So können Sie sehen, wann eine gesamte Komponente für den Nutzer verfügbar war, z. B. Widgets, Karten, Inhaltsabschnitte, Seitenleisten usw. Es bietet zusätzliche Leistungsinformationen für Websites, die diese zusätzlichen Informationen nutzen möchten.

Container Timing wurde von Bloomberg entwickelt und von Igalia in Chrome implementiert. Es ist für Chrome-Nutzer und andere Chromium-basierte Browser über ein Flag verfügbar. Außerdem können Websites es über einen Ursprungstest im Feld testen.

Ein Ursprungstest ist einer der letzten Schritte vor der Einführung einer API. Entwickler können die Funktion auf ihren Websites aktivieren, bevor sie standardmäßig eingeführt wird, um sie zu testen und dem Team mitzuteilen, ob sie wie erwartet funktioniert und nützlich ist. Außerdem können Entwickler vor der Einführung Änderungen am API-Design vorschlagen.

Funktionsweise der Container Timing API

Wie Element Timing funktioniert Container Timing, indem verschiedenen HTML-Elementen ein Attribut (containertiming) hinzugefügt wird, um dem Browser mitzuteilen, dass diese Elemente gemessen werden sollen:

<div containertiming="my-component">
  <h2>Title</h2>
  <div>...</div>
</div>

Ein PerformanceObserver können Sie dann Renderingvorgänge in diesem Container auf dieselbe Weise beobachten wie andere Leistungsmesswerte:

<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>

Wenn neue Elemente im Container gerendert werden, werden neue Leistungseinträge mit aktualisierten Informationen ausgegeben. Da während der Lebensdauer der Seite neue Elemente hinzugefügt werden können, gibt es keinen einzelnen Abschlusspunkt. Das ist ähnlich wie bei LCP, das in der Regel am Ende der Seite gemessen wird, wenn der Nutzer die Seite verlässt.

Diese Leistungsmesswerte können dann zur Überwachung und Analyse an Analytics zurückgesendet werden.

Untergeordnete Container können auch mit dem Attribut containertiming-ignore ignoriert werden:

<div containertiming="main-content">

  <main>...</main>
  
  <!-- This aside and its children will be ignored -->
  <aside containertiming-ignore>...</aside>

</div>

Demo

Im folgenden CodePen sehen Sie die Container Timing API in Aktion:

Demo von Container Timing (Quelle)

Wenn Ihr Browser die Container Timing API nicht unterstützt, können Sie sich das auch im folgenden Video ansehen:

Video der Demo von Container Timing (Quelle)

Welche Aktualisierungen werden für Container Timing berücksichtigt?

Mit Container Timing soll erfasst werden, wann der Container mit allen untergeordneten Elementen geladen wird. Es ist nicht vorgesehen, jeden einzelnen zukünftigen Renderingvorgang zu messen. Viele davon erfolgen möglicherweise erst viel später, wenn der Nutzer mit dem Container oder der Seite interagiert. Aus diesem Grund hängt Container Timing wie LCP und Element Timing von „Contentful Paints“ ab. Außerdem werden keine neuen Renderingeinträge für Elemente ausgegeben, die bereits als Contentful Paint gezählt wurden.

Wenn ein Container beispielsweise anfänglich nur mit einer Hintergrundfarbe gerendert wird oder nur Elemente ohne Inhalt enthält (z. B. Skeleton Screens), wird erst dann ein container-Eintrag ausgegeben, wenn dem Container Inhalt hinzugefügt wird.

Bei einer Aktualisierung wird durch das Aktualisieren von Text in einem vorhandenen Element im Container kein neuer container-Eintrag für diese Aktualisierung erstellt, da nur der erste Renderingvorgang von Inhalt für ein Element berücksichtigt wird. Wenn jedoch einem leeren Element Text hinzugefügt wird oder ein zusätzliches neues Element für diesen Text hinzugefügt wird, wird ein neuer container-Eintrag ausgegeben, da dies der erste Renderingvorgang dieses Elements ist.

Unterstützung für Container Timing erkennen

Das Attribut containertiming verursacht keine Probleme für Browser, die es nicht unterstützen, daher muss es nicht erkannt werden.

Der PerformanceObserver ignoriert alle neuen Einträge. Sie können jedoch Warnungen in den Entwicklertools verursachen. Daher ist es empfehlenswert, die Unterstützung zu erkennen, bevor Sie einen Observer mit Code wie dem folgenden hinzufügen:

if (typeof PerformanceContainerTiming !== "undefined") {
  // Container Timing is supported
}

Best Practices

Es gibt einige Best Practices, die Sie für eine optimale Nutzung von Container Timing beachten sollten:

  • Attribute früh festlegen:Fügen Sie das Attribut containertiming im HTML-Dokument oder bevor das Element dem Dokument hinzugefügt wird hinzu, um eine vollständige Nachverfolgung zu ermöglichen. Wenn Sie das Attribut später mit JavaScript hinzufügen, werden möglicherweise Renderingvorgänge nicht erfasst.
  • Aussagekräftige IDs verwenden:Wählen Sie beschreibende Namen für das Attribut containertiming, um die Analyse zu erleichtern.
  • Strategische Platzierung:Wenden Sie containertiming auf semantische Abschnitte an, die für Ihre Messwerte wichtig sind, z. B. hero-section, product-grid, checkout-form. Nicht jeder Container muss gemessen werden.
  • Irrelevante Inhalte ignorieren:Verwenden Sie containertiming-ignore für untergeordnete Elemente, die sich nicht auf die Messwerte Ihrer Komponente auswirken sollen, z. B. Anzeigen oder dekorative Elemente.

Container Timing aktivieren

Die Container Timing API kann ab Chrome 147 mit dem Flag chrome://flags/#enable-experimental-web-platform-features und über die Befehlszeile mit dem Flag --enable-blink-features=ContainerTiming aktiviert werden.

Ab Chrome 148 können sich Websites für ein Ursprungstest-Token registrieren und es ihrer Seite hinzufügen, um die Funktion automatisch zu aktivieren. So können Sie die API im Feld mit echten Nutzern testen. Container Timing-Messwerte können in Analytics erfasst und analysiert werden, um zu prüfen, ob die API wie erwartet funktioniert, und um Erkenntnisse zu gewinnen.

Feedback und weitere Informationen

Feedback zur Container Timing API sollte als Problem auf GitHub gemeldet werden.

Außerdem wird derzeit eine Spezifikation im Standardisierungsprozess bearbeitet. Für alle, die sich für die interne Funktionsweise dieser API interessieren, hat Igalia einen Beitrag zur technischen Implementierung der API veröffentlicht.

Fazit

Wir freuen uns, dass die Veröffentlichung dieser API bevorsteht, und sind gespannt darauf, sie Entwicklern zur Verfügung zu stellen, damit sie neue Einblicke in Leistungsprobleme erhalten. Wir freuen uns auf Feedback zur API und werden sie, wenn alles gut läuft, kurz darauf veröffentlichen.