Opublikowano: 1 maja 2026 r.
W Chrome 148 rozpoczyna się testowanie interfejsu Container Timing Performance API.
Dane takie jak największe wyrenderowanie treści (LCP) zapewniają ogólny wgląd w to, kiedy strona może być uznana przez użytkownika za "wczytaną", na podstawie czasu wyrenderowania największej części treści. Witryny mogą jednak być zainteresowane tym, kiedy wczytują się poszczególne części strony, a nie tylko jej „największa” część.
Element Timing umożliwia witrynom oznaczanie elementów za pomocą atrybutu elementtiming, aby dowiedzieć się, kiedy się one wczytują, niezależnie od tego, czy są elementami LCP. Podobnie jak LCP, ogranicza się jednak do pomiaru czasu renderowania poszczególnych elementów.
Container Timing rozszerza koncepcję Element Timing, aby mierzyć „bloki treści” (lub „kontenery”). Dzięki temu możesz dowiedzieć się, kiedy cały komponent był dostępny dla użytkownika, np. widżety, karty, sekcje treści, paski boczne itp. Zapewnia dodatkowe informacje o skuteczności witryn, które chcą uzyskać dodatkowe statystyki.
Container Timing, opracowany przez Bloomberg i zaimplementowany w Chrome przez Igalia, jest dostępny za flagą dla użytkowników Chrome i innych przeglądarek opartych na Chromium. Jest też dostępny dla witryn do testowania w terenie w ramach testowania origin.
Testowanie origin to jeden z ostatnich etapów wdrażania interfejsu API. Deweloperzy mogą włączyć tę funkcję w swoich witrynach, zanim zostanie ona domyślnie uruchomiona, aby ją przetestować i poinformować zespół, czy działa zgodnie z oczekiwaniami i czy jest przydatna. Umożliwia też deweloperom sugerowanie zmian w projekcie interfejsu API przed jego uruchomieniem.
Jak działa interfejs Container Timing API
Podobnie jak Element Timing, Container Timing działa przez dodanie atrybutu (containertiming) do różnych elementów HTML, aby wskazać przeglądarce, że te elementy powinny być mierzone:
<div containertiming="my-component">
<h2>Title</h2>
<div>...</div>
</div>
A PerformanceObserver umożliwia następnie obserwowanie wyrenderowań w tym kontenerze w taki sam sposób jak w przypadku innych danych o skuteczności:
<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>
Gdy w kontenerze są renderowane nowe elementy, emitowane są nowe wpisy dotyczące skuteczności z aktualnymi informacjami. Ponieważ nowe elementy można dodawać przez cały czas trwania strony, nie ma jednego punktu zakończenia. Jest to podobne do LCP, które jest zwykle mierzone na końcu strony, gdy użytkownik ją opuszcza.
Te dane o skuteczności można następnie wysyłać do narzędzi analitycznych w celu monitorowania i analizy.
Kontenery podrzędne można też ignorować za pomocą atrybutu containertiming-ignore:
<div containertiming="main-content">
<main>...</main>
<!-- This aside and its children will be ignored -->
<aside containertiming-ignore>...</aside>
</div>
Prezentacja
Poniższy CodePen pokazuje działanie interfejsu Container Timing API:
Jeśli Twoja przeglądarka nie obsługuje interfejsu Container Timing API, możesz też zobaczyć jego działanie na tym filmie:
Jakie aktualizacje są uwzględniane w Container Timing?
Celem Container Timing jest rejestrowanie momentu, w którym kontener jest wczytywany ze wszystkimi elementami podrzędnymi. Nie ma na celu mierzenia każdego przyszłego wyrenderowania, z których wiele może nastąpić znacznie później, gdy użytkownik będzie wchodzić w interakcję z kontenerem lub stroną. Z tego powodu, podobnie jak LCP i Element Timing, Container Timing zależy od „wyrenderowań treści” i nie emituje nowych wpisów dotyczących wyrenderowania w przypadku elementów, które zostały już uznane za wyrenderowane.
Jeśli na przykład kontener jest początkowo renderowany tylko z kolorem tła lub zawiera tylko elementy bez treści (np. ekrany szkieletowe), nie zostanie wyemitowany żaden wpis container, dopóki do kontenera nie zostaną dodane treści.
W przypadku aktualizacji, np. aktualizacji tekstu w istniejącym elemencie w kontenerze, nie spowoduje to utworzenia nowego wpisu container dla tej aktualizacji, ponieważ pod uwagę brane jest tylko pierwsze wyrenderowanie treści elementu. Jeśli jednak tekst zostanie dodany do pustego elementu lub do tego tekstu zostanie dodany nowy element, zostanie wyemitowany nowy wpis container, ponieważ będzie to pierwsze wyrenderowanie tego elementu.
Wykrywanie obsługi Container Timing
Atrybut containertiming nie powoduje problemów w przeglądarkach, które go nie obsługują, więc nie trzeba go wykrywać.
PerformanceObserver będzie ignorować wszystkie nowe wpisy, ale mogą one powodować ostrzeżenia w Narzędziach deweloperskich, dlatego przed dodaniem obserwatora warto wykryć obsługę za pomocą kodu takiego jak:
if (typeof PerformanceContainerTiming !== "undefined") {
// Container Timing is supported
}
Sprawdzone metody
Aby optymalnie korzystać z Container Timing, warto stosować te sprawdzone metody:
- Wcześniejsze ustawianie atrybutów: aby zapewnić pełne śledzenie, dodaj atrybut
containertimingw dokumencie HTML lub zanim element zostanie dodany do dokumentu. Dodanie atrybutu później za pomocą JavaScript może spowodować pominięcie wyrenderowań. - Używanie znaczących identyfikatorów: wybierz opisowe nazwy atrybutu
containertiming, aby ułatwić analizę. - Strategiczne umieszczanie: stosuj
containertimingdo sekcji semantycznych, które są ważne dla Twoich danych, np.hero-section,product-grid,checkout-form. Nie trzeba mierzyć każdego kontenera. - Ignorowanie nieistotnych treści: używaj
containertiming-ignorew elementach podrzędnych, które nie powinny wpływać na dane komponentu, np. reklamy lub elementy dekoracyjne.
Jak włączyć Container Timing?
Interfejs Container Timing API można włączyć w Chrome 147 za pomocą flagi chrome://flags/#enable-experimental-web-platform-features oraz w wierszu poleceń za pomocą flagi --enable-blink-features=ContainerTiming.
Od Chrome 148 witryny mogą zarejestrować się, aby otrzymać token testowania origin, i dodać go do strony, aby automatycznie włączyć tę funkcję. Umożliwi to testowanie interfejsu API w terenie na prawdziwych użytkownikach. Dane Container Timing można rejestrować w narzędziach analitycznych i analizować, aby sprawdzić, czy interfejs API działa zgodnie z oczekiwaniami, oraz uzyskać dodatkowe informacje.
Opinie i więcej informacji
Opinie na temat interfejsu Container Timing API należy zgłaszać jako problemy w GitHub.
Trwa też proces standaryzacji specyfikacji. Osoby zainteresowane tym, jak ten interfejs API działa wewnętrznie, mogą przeczytać post opublikowany przez Igalia na temat technicznej implementacji interfejsu API.
Podsumowanie
Cieszymy się, że ten interfejs API jest już prawie gotowy do udostępnienia, i nie możemy się doczekać, aż deweloperzy będą mogli z niego korzystać, aby uzyskiwać nowe informacje o problemach z wydajnością. Czekamy na opinie na temat interfejsu API i, jeśli wszystko pójdzie dobrze, wkrótce go udostępnimy.