Como o provedor de recomendações de conteúdo Taboola usou o LoAF para melhorar o INP em até 36% para os sites parceiros editores.

Como o uso da API Long Animation Frames (LoAF) e a adoção de uma estratégia de geração inteligente permitiram que a Taboola melhorasse a capacidade de resposta do site dos editores sem comprometer a performance dos anúncios.

David Belford

Thierno Thiam

A Interaction to Next Paint (INP) é uma métrica que avalia a capacidade de resposta de um site à entrada do usuário. O INP mede o tempo entre o início de uma interação do usuário (como clicar, tocar ou digitar) e o feedback visual resultante. A INP vai substituir o First Input Delay (FID) como uma Core Web Vital em março de 2024.

A Taboola é a principal plataforma de descoberta de conteúdo do mundo, gerando 500.000 recomendações por segundo na Web aberta. Com essas recomendações,os 9.000 parceiros editores exclusivos da Taboola podem gerar receita e envolver o público. Os publishers renderizam recomendações nas páginas usando JavaScript.

Como o JavaScript de terceiros pode afetar a capacidade de uma página de responder rapidamente à entrada do usuário, a Taboola investiu muito na redução do tamanho dos arquivos JavaScript e do tempo de execução. A Taboola está reformulando todo o mecanismo de renderização e usando APIs do navegador diretamente, sem abstrações, para minimizar o impacto no INP.

Este estudo de caso aborda a jornada da Taboola para melhorar o INP usando a nova API Long Animation Frames (LoAF) para medir o impacto na capacidade de resposta da página no campo e os esforços subsequentes para aplicar otimizações específicas e melhorar a experiência do usuário.

TBT como um proxy de INP

O Tempo total de bloqueio (TBT) é uma métrica baseada em laboratório que identifica onde a linha de execução principal foi bloqueada por tempo suficiente para afetar a capacidade de resposta da página. Métricas de campo que medem a capacidade de resposta, como o INP, podem ser afetadas por um TBT alto. Uma investigação de Annie Sullivan sobre a correlação entre TBT e INP em dispositivos móveis indica que os sites têm mais chances de alcançar boas pontuações de INP quando o tempo de bloqueio da linha de execução principal é minimizado.

Essa correlação, aliada às preocupações dos editores da Taboola com o alto TBT, fez com que a empresa se concentrasse em minimizar a contribuição dela para essa métrica.

Usando o TBT como uma métrica substituta para a INP, a Taboola começou a monitorar e otimizar o tempo de execução do JavaScript para limitar o impacto potencial nas Core Web Vitals. Eles começaram fazendo o seguinte:

• Identificar e otimizar scripts problemáticos no campo usando a API Long Tasks.
• Estimar as contribuições de TBT usando a API PageSpeed Insights para avaliar de 10.000 a 15.000 URLs por dia.

No entanto, a Taboola percebeu que analisar o TBT com essas ferramentas tinha algumas limitações:

• A API Long Tasks não consegue atribuir a tarefa ao domínio de origem ou a um script específico, o que dificulta a identificação das fontes de tarefas longas.
• A API Long Tasks identifica apenas tarefas longas, e não uma combinação de tarefas e mudanças de layout que podem causar um atraso na renderização.

Para enfrentar esses desafios, a Taboola participou do teste de origem da API Long Animation Frames (LoAF) (em inglês) para entender melhor o impacto real na capacidade de resposta à entrada do usuário. Os testes de origem dão acesso a recursos novos ou experimentais, permitindo que os desenvolvedores testem recursos emergentes que os usuários podem experimentar por um tempo limitado.

É essencial destacar que o aspecto mais difícil desse desafio foi melhorar o INP sem comprometer nenhum KPI(indicador principal de desempenho) dos anúncios ou causar atrasos nos recursos para nossos editores.

Usar o LoAF para avaliar o impacto do INP

Um frame de animação longo ocorre quando uma atualização de renderização é adiada por mais de 50 milissegundos. Ao identificar as causas das atualizações lentas da interface do usuário, em vez de apenas tarefas longas, a Taboola conseguiu analisar o impacto na capacidade de resposta da página no campo. Ao observar o LoAF, a Taboola conseguiu:

1. Atribuir entradas a tarefas específicas do Taboola.
2. Observe problemas de desempenho em recursos específicos antes que eles sejam implantados na produção.
3. Reúna dados agregados para comparar diferentes versões de código em testes A/B e gerar relatórios sobre as principais métricas de sucesso.

O JavaScript a seguir é uma versão simplificada usada na produção para coletar LoAF e isolar o impacto da Taboola.

function loafEntryAnalysis (entry) {
  if (entry.blockingDuration === 0) {
    return;
  }

  let taboolaIsMajor = false;
  const hasInteraction = entry.firstUIEventTimestamp > 0;
  let taboolaDuration = 0;
  const nonTaboolaLoafReport = {};
  const taboolaLoafReport = {};

  entry.scripts.forEach((script) => {
    const taboolaScriptBlockingDuration = handleLongAnimationFrameScript(script, taboolaLoafReport, nonTaboolaLoafReport);
    taboolaDuration += taboolaScriptBlockingDuration;

    if (taboolaScriptBlockingDuration > 0 || taboolaDuration > entry.duration / 2) {
      taboolaIsMajor = true;
    }
  });

  generateToboolaLoafReport(taboolaLoafReport, nonTaboolaLoafReport, hasInteraction, taboolaIsMajor);

  if (hasInteraction) {
    const global = _longAnimationFramesReport.global;
    global.inpBlockingDuration = Math.max(global.inpBlockingDuration, entry.blockingDuration);

    if (taboolaIsMajor) {
      global.taboolaInpBlockingDuration = Math.max(global.taboolaInpBlockingDuration, entry.blockingDuration);
    }
  }
}

const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    loafEntryAnalysis(entry);
  }
});

observer.observe({ type: 'long-animation-frame', buffered: true });

• Usando a função loafEntryAnalysis, a Taboola conseguiu identificar entradas em que ela é uma das principais contribuidoras.
• A Taboola é considerada uma grande contribuinte se mais da metade da duração total do script for causada por ela ou se um script da Taboola levar mais de 50 milissegundos para ser executado.
• Um firstUIEventTimeStamp é gerado se a interação do usuário for atrasada devido a um Long Animation Frame. A duração de bloqueio mais longa é considerada a pontuação geral de INP. Também podemos identificar quando a Taboola acionou um firstUIEventTimeStamp para calcular uma pontuação de INP da Taboola.

Os dados coletados com a LoAF ajudaram a Taboola a criar a tabela de atribuição a seguir, que identifica áreas em que é possível aplicar oportunidades de geração de receita.

Mecanismo TRECS: a nova estratégia de geração de receita

Além de usar o LoAF para entender melhor as oportunidades de otimização de script, a Taboola está reformulando todo o mecanismo de renderização para minimizar significativamente o tempo de execução e bloqueio do JavaScript.

O TRECS (Taboola Recommendations Extensible Client Service) mantém a renderização do lado do cliente e o código JS atual do editor, reduzindo o número e o tamanho dos arquivos obrigatórios necessários para carregar as recomendações da Taboola.

Depois que as tarefas de bloqueio de renderização são identificadas usando o LoAF, o "Performance Fader" pode dividir essas tarefas antes de ceder à linha de execução principal usando scheduler.postTask(). Esse design garante que o trabalho essencial voltado ao usuário, como renderização de atualizações, possa ser executado o mais rápido possível, independentemente de tarefas que possam estar ocupando a linha de execução principal.

Confira o snippet JS do executor de tarefas "Performance Fader":

/**
* Send a task to run using the Fader. The task will run using the browser Scheduler, by the configuration settings, or immediately.
* @param task
* @param isBlocker
*/
function sendTaskToFader (task, isBlocker = true) {
  const publisherFaderChoice = fillOptimizationGlobals(); // Loading publisher choice
  const applyYielding = publisherFaderChoice === OptimizationFaderType.Responsiveness;

  if (applyYielding) {
    return runAsPostTask(task, isBlocker);
  }

  return runImmediately(task);
}

/**
* Yielding method using scheduler.postTask and falling back to setTimeout when it's not availabe based on the publisher choice
*/
function runAsPostTask (task, isBlocker = true) {
  if ('scheduler' in window && 'postTask' in scheduler) {
    const priority = isBlocker ? 'user-blocking': 'background';

    return window?.scheduler?.postTask(task, { priority });
  }

  const publisherChoiceEnableFallback = fillPublisherChoices();

  if (publisherChoiceEnableFallback) {
    return new Promise(resolve => {
      window.setTimeout(() => {
        resolve(task());
      }, 0);
    });
  }

  return runImmediately(task);
}

A função sendTaskToFader:

• Usa runAsPostTask, que usa scheduler.postTask() em segundo plano (se a API estiver disponível), ou volta para setTimeout.
• Essa função encapsula chamadas de função em seções de código que causam frames de animação longos e INP. Ele divide essas seções de código em tarefas mais curtas e, assim, reduz o INP.

Métricas da empresa

Graças ao LoAF, a Taboola conseguiu entender melhor o impacto no INP. A ferramenta também destacou oportunidades de otimização de script que podem ser usadas como parte do novo mecanismo TRECS.

Para determinar o impacto do TRECS e do Performance Fader, a Taboola realizou um teste A/B medindo o INP em relação ao mecanismo atual sem script em um painel de parceiros editores.

A tabela a seguir mostra os resultados do INP em milissegundos no 75º percentil de quatro editores anônimos na rede da Taboola.

Felizmente, as métricas de negócios, como taxa de cliques do anúncio e receita por mil impressões (RPM), não foram afetadas negativamente quando o TRECS e o Performance Fader foram ativados no painel de teste. Com essa melhoria positiva no INP sem nenhum resultado negativo, como esperado, nos KPIs do Google Ads, a Taboola vai melhorar gradualmente a percepção dos publishers sobre o produto.

Outra execução do Lighthouse no mesmo cliente destacado anteriormente demonstra uma melhoria significativa no tempo de bloqueio da linha de execução principal pela Taboola ao usar o novo mecanismo.

Isso demonstra que usar o LoAF para identificar causas de INP e implantar as técnicas de geração subsequentes com o Performance Fader permite que os parceiros da Taboola alcancem o máximo de sucesso na performance de anúncios e páginas.

Conclusão

Otimizar o INP é um processo complexo, principalmente quando scripts de terceiros são usados em sites de parceiros. Antes de começar a otimização, a atribuição do INP a scripts específicos elimina qualquer especulação e possível dano a outras métricas de desempenho do site.A API LoAF provou ser uma ferramenta valiosa para identificar e resolver problemas de INP, principalmente para terceiros incorporados, permitindo que eles identifiquem oportunidades específicas de melhoria do SDK e eliminem a interferência de outras tecnologias presentes na página.

Quando usado em conjunto com uma boa estratégia de concessão, como o uso de scheduler.postTask(), o LoAF ajuda a observar e entender a causa da baixa capacidade de resposta da página. Isso fornece as informações necessárias para melhorar o INP do seu site.

Agradecemos a Gilberto Cocchi, Noam Rosenthal e Rick Viscomi do Google, além de Dedi Hakak, Anat Dagan e Omri Ariav da equipe de engenharia e produtos da Taboola pela contribuição neste trabalho.