Испытание происхождения Container Timing

Barry Pollard

Jason Williams

José Dapena Paz

Опубликовано: 1 мая 2026 г.

Chrome запускает пробную версию API Container Timing для анализа производительности , начиная с Chrome 148.

Такие метрики, как Largest Contentful Paint (LCP), дают общее представление о том, когда страница, вероятно, будет считаться «загруженной» пользователем, анализируя время отрисовки самого большого фрагмента контента. Однако сайты могут также интересоваться временем загрузки отдельных частей страницы, а не только «самой большой» её частью.

Функция Element Timing позволяет сайтам помечать элементы атрибутом elementtiming , чтобы понимать, когда они загружаются, независимо от того, являются ли они элементами LCP или нет. Однако, как и LCP, она ограничена измерением времени рендеринга отдельных элементов.

Container Timing расширяет концепцию Element Timing, измеряя время загрузки «блоков контента» (или «контейнеров»). Это позволяет понять, когда весь компонент был доступен пользователю, например, виджеты, карточки, разделы контента, боковые панели... что угодно! Это предоставляет дополнительную информацию о производительности для сайтов, которые хотят получить более глубокое понимание ситуации.

Технология Container Timing, разработанная Bloomberg и реализованная в Chrome компанией Igalia, доступна пользователям Chrome и других браузеров на основе Chromium за специальным флагом, а также для тестирования на сайтах в рамках пробного периода.

Пробный период — это один из заключительных этапов запуска API, на котором разработчики могут включить функцию на своих сайтах до её запуска по умолчанию, чтобы протестировать её и сообщить команде, работает ли она должным образом и оказывается ли полезной. Это также позволяет разработчикам предлагать любые изменения в дизайне API до запуска.

Как работает API синхронизации контейнеров

Подобно Element Timing, Container Timing работает путем добавления атрибута ( containertiming ) к различным HTML-элементам, чтобы указать браузеру, что эти элементы следует измерять:

<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 (Low Continuous Performance Point), который обычно измеряется в конце страницы, при переходе на другую страницу.

Затем эти показатели производительности можно отправить обратно в аналитическую службу для мониторинга и анализа.

Дочерние контейнеры также можно игнорировать с помощью атрибута containertiming-ignore :

<div containertiming="main-content">

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

</div>

Демо

В следующем примере на CodePen показана работа API Container Timing:

Если ваш браузер не поддерживает API Container Timing, вы также можете увидеть это в действии в следующем видео:

Какие обновления учитываются в Container Timing?

Цель Container Timing — зафиксировать момент загрузки контейнера со всеми дочерними элементами. Он не предназначен для измерения каждой последующей отрисовки — многие из которых могут произойти гораздо позже, когда пользователь будет взаимодействовать с контейнером или страницей. По этой причине, подобно LCP и Element Timing, Container Timing зависит от «отрисовок, содержащих контент» и не генерирует новые записи об отрисовке для элементов, которые уже были учтены как имеющие отрисовку, содержащую контент.

Например, если контейнер изначально отображается только с фоновым цветом или содержит только элементы, не являющиеся содержимым (например, каркасные экраны), то запись container не будет генерироваться до тех пор, пока в контейнер не будет добавлено какое-либо содержимое.

Например, при обновлении текста в существующем элементе контейнера новая запись в container не появится, поскольку учитывается только первая отрисовка содержимого элемента. Однако, если текст добавляется к пустому элементу или к этому тексту добавляется новый элемент, то будет создана новая запись container , поскольку это будет первая отрисовка этого элемента.

Поддержка определения параметров синхронизации контейнеров.

Атрибут containertiming не вызовет проблем для браузеров, не поддерживающих эту функцию, поэтому его не нужно определять с помощью функции обнаружения.

PerformanceObserver будет игнорировать любые новые записи, но они могут вызывать предупреждения в инструментах разработчика, поэтому рекомендуется проверять наличие новых функций перед добавлением наблюдателя с помощью такого кода:

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

Передовые методы

Для оптимального использования Container Timing следует придерживаться ряда рекомендаций:

• Задавайте атрибуты заранее: добавьте атрибут containertiming в HTML-документ или до добавления элемента в документ для полного отслеживания. Добавление атрибута позже с помощью JavaScript может привести к пропуску отрисовки.
• Используйте осмысленные идентификаторы: выбирайте описательные имена для атрибута containertiming , чтобы упростить аналитику.
• Стратегическое размещение: применяйте containertiming к семантическим разделам, важным для ваших метрик, например, hero-section , product-grid , checkout-form . Не каждый контейнер нуждается в измерении.
• Игнорируйте нерелевантный контент: используйте containertiming-ignore для дочерних элементов, которые не должны влиять на метрики вашего компонента, таких как реклама или декоративные элементы.

Как включить Container Timing?

API Container Timing можно включить в Chrome версии 147, используя флаг chrome://flags/#enable-experimental-web-platform-features а также из командной строки, используя флаг --enable-blink-features=ContainerTiming .

Начиная с Chrome 148, сайты могут зарегистрироваться для получения пробного токена источника и добавить его на свою страницу, чтобы автоматически включить эту функцию. Это позволяет тестировать API в реальных условиях на реальных пользователях. Метрики Container Timing можно записывать в аналитику и анализировать, чтобы проверить, работает ли API должным образом, и получить ценные сведения.

Отзывы и дополнительная информация

Отзывы об API синхронизации контейнеров следует оставлять в виде запросов на GitHub .

Также ведется работа над спецификацией, которая проходит процесс стандартизации. Для тех, кто интересуется внутренней работой этого API, компания Igalia опубликовала статью о технической реализации API .

Заключение

Здорово, что этот API приближается к релизу, и мы рады предоставить его разработчикам, чтобы они могли получить новые данные о проблемах с производительностью. Мы с нетерпением ждем отзывов об API и, если все пойдет хорошо, запускаем его вскоре после этого.