Teste de origem do Container Timing

Barry Pollard

Jason Williams

José Dapena Paz

Publicado em: 1º de maio de 2026

O Chrome está lançando um teste de origem a partir do Chrome 148 para a API Container Timing Performance.

Métricas como a Largest Contentful Paint (LCP) oferecem uma visão geral de quando uma página provavelmente será considerada "carregada" pelo usuário, analisando o tempo de exibição do maior conteúdo. No entanto, os sites também podem se interessar em saber quando partes específicas da página são carregadas, e não apenas a parte "maior".

O Element Timing permite que os sites marquem elementos com um atributo elementtiming para entender quando eles são carregados, sejam ou não o elemento LCP. No entanto, assim como o LCP, ele é limitado a medir os tempos de renderização de elementos individuais.

O Container Timing estende o conceito de Element Timing para medir "blocos de conteúdo" (ou "contêineres"). Isso permite entender quando um componente inteiro estava disponível para o usuário, como widgets, cards, seções de conteúdo, barras laterais... o que for! Ele fornece informações de performance adicionais para sites que querem os insights extras que ele pode oferecer.

O Container Timing, desenvolvido pela Bloomberg e implementado no Chrome pela Igalia, está disponível por trás de uma flag para usuários do Chrome e outros navegadores baseados no Chromium. Ele também está disponível para sites testarem no campo por meio de um teste de origem.

Um teste de origem é uma das etapas finais do lançamento de uma API em que os desenvolvedores podem ativar o recurso nos sites antes do lançamento padrão para testá-lo e informar à equipe se ele está funcionando conforme o esperado e se é útil. Ele também permite que os desenvolvedores sugiram mudanças no design da API antes do lançamento.

Como a API Container Timing funciona

Assim como o Element Timing, o Container Timing funciona adicionando um atributo (containertiming) a vários elementos HTML para indicar ao navegador que esses elementos precisam ser medidos:

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

Um PerformanceObserver permite observar as exibições nesse contêiner da mesma forma que outras métricas de performance:

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

À medida que novos elementos são exibidos no contêiner, novas entradas de performance são emitidas com informações atualizadas. Como novos elementos podem ser adicionados durante toda a vida útil da página, não há um único ponto de conclusão. Isso é semelhante ao LCP, que normalmente é medido no final da página, ao sair.

Essas métricas de performance podem ser enviadas de volta ao Analytics para monitoramento e análise.

Os contêineres filhos também podem ser ignorados com o atributo containertiming-ignore:

<div containertiming="main-content">

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

</div>

Demonstração

O CodePen a seguir mostra a API Container Timing em ação:

Você também pode conferir isso em ação no vídeo a seguir se o navegador não for compatível com a API Container Timing:

Quais atualizações contam para o Container Timing?

A intenção do Container Timing é capturar quando o contêiner é carregado com todos os elementos filhos. Ele não foi projetado para medir cada exibição futura, muitas das quais podem chegar muito mais tarde à medida que o usuário interage com o contêiner ou a página. Por esse motivo, semelhante ao LCP e ao Element Timing, o Container Timing depende de "exibições de conteúdo" e também não emite novas entradas de exibição para elementos que já foram contabilizados como tendo uma exibição de conteúdo.

Por exemplo, se um contêiner for renderizado inicialmente com apenas uma cor de fundo ou contiver apenas elementos sem conteúdo (por exemplo, telas de esqueleto), nenhuma entrada container será emitida até que algum conteúdo seja adicionado ao contêiner.

Para um exemplo de atualização, a atualização de texto em um elemento existente no contêiner não resultará em uma nova entrada container para essa atualização, porque apenas o primeiro paint de conteúdo de um elemento é considerado. No entanto, se o texto for adicionado a um elemento vazio ou um novo elemento adicional for adicionado a esse texto, uma nova entrada container será emitida, porque essa será a primeira exibição desse elemento.

Como detectar suporte ao Container Timing

O atributo containertiming não causa problemas para navegadores não compatíveis e, portanto, não precisa ser detectado por recursos.

O PerformanceObserver vai ignorar todas as novas entradas, mas elas podem causar avisos no DevTools. Portanto, é recomendável detectar recursos antes de adicionar um observador com um código como:

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

Práticas recomendadas

Há algumas práticas recomendadas a serem seguidas para o uso ideal do Container Timing:

• Defina atributos cedo:adicione o atributo containertiming no documento HTML ou antes que o elemento seja adicionado ao documento para rastreamento completo. A adição do atributo posteriormente com JavaScript pode resultar em exibições perdidas.
• Use identificadores significativos:escolha nomes descritivos para o atributo containertiming para facilitar a análise.
• Posicionamento estratégico:aplique containertiming a seções semânticas importantes para suas métricas, por exemplo, hero-section, product-grid, checkout-form. Nem todos os contêineres precisam ser medidos.
• Ignore conteúdo irrelevante:use containertiming-ignore em elementos filhos que não devem afetar as métricas de componentes, como anúncios ou elementos decorativos.

Como ativar o Container Timing?

A API Container Timing pode ser ativada no Chrome 147 usando a flag chrome://flags/#enable-experimental-web-platform-features e na linha de comando usando a flag --enable-blink-features=ContainerTiming.

A partir do Chrome 148, os sites podem se inscrever em um token de teste de origem e adicioná-lo à página para ativar o recurso automaticamente. Isso permite testar a API no campo em usuários reais. As métricas do Container Timing podem ser registradas no Analytics e analisadas para verificar se a API funciona conforme o esperado e coletar insights.

Feedback e mais detalhes

O feedback sobre a API Container Timing precisa ser levantado como problemas no GitHub.

Também há uma especificação que está passando pelo processo de padronização. Para quem se interessa em saber como essa API funciona internamente, a Igalia publicou um post sobre como a API foi implementada tecnicamente.

Conclusão

É ótimo ver essa API se aproximando do lançamento, e estamos animados para que ela chegue aos desenvolvedores para permitir novos insights sobre problemas de performance. Esperamos receber feedback sobre a API e, se tudo correr bem, lançá-la logo depois.