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 rendimento inteligente permitiu que o Taboola melhorasse os padrões dos editores a capacidade de resposta do site sem comprometer a performance do anúncio.

David Belford

Thierno Thiam

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

O Taboola é a principal plataforma de descoberta de conteúdo do mundo, gerando 500.000 recomendações por segundo na Web aberta. Essas recomendações permitem que os 9.000 parceiros editores exclusivos da Taboola gerem receita e envolvam seu público. Os editores 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á redesenhando todo o mecanismo de renderização, além de usar APIs do navegador diretamente, sem abstrações, para minimizar o impacto no INP.

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

TBT como proxy de INP

O tempo total de bloqueio (TBT, na sigla em inglês) é 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. As métricas de campo que medem a capacidade de resposta, como o INP, podem ser afetadas por um TBT alto. Uma investigação feita por 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, junto com o conjunto de dados dos editores as preocupações com o alto TBT levaram a Taboola a concentrar a atenção na minimização da contribuição para essa métrica.

Usando o TBT como uma métrica substituta da INP, a Taboola começou a monitorar e otimizar o tempo de execução do JavaScript para limitar o possível impacto nas Core Web Vitals. Para começar, ele fez o seguinte:

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

No entanto, Taboola percebeu que a análise do 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, dificultando a identificação de origens de tarefas longas.
• A API Long Tasks identifica apenas tarefas longas, em vez de uma combinação de tarefas e mudanças de layout que poderiam causar um atraso na renderização.

Para enfrentar esses desafios, a Taboola entrou no teste de origem da API Long Animation Frames (LoAF) para tentar entender melhor o impacto real na capacidade de resposta à interação do usuário. Os testes de origem dão acesso a recursos novos ou experimentais, permitindo que os desenvolvedores testem novos recursos que os usuários podem testar 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) do Google Ads nem causar atrasos nos recursos para nossos editores.

Uso do LoAF para avaliar o impacto da INP

Um frame de animação longo ocorre quando uma atualização de renderização é atrasada além de 50 milissegundos. Ao identificar as causas das atualizações lentas na 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. Observar o LoAF permitiu que Taboola:

1. Atribui entradas para tarefas específicas do Taboola.
2. Observe problemas de desempenho em recursos específicos antes de serem implantados na produção.
3. Reúna dados agregados para comparar versões de código diferentes em testes A/B e gere 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 do 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 });

• O uso da função loafEntryAnalysis permitiu ao Taboola identificar entradas em que é um grande colaborador.
• O Taboola é considerado um grande colaborador se mais da metade da duração total do script for causada pelo Taboola, ou se um script Taboola levar mais de 50 milissegundos para ser executado.
• Uma firstUIEventTimeStamp será gerada se a interação do usuário atrasar devido a um frame de animação longo. A duração mais longa de bloqueio é considerada a pontuação de INP geral. Também podemos identificar quando o Taboola acionou um firstUIEventTimeStamp para calcular uma pontuação de INP do Taboola.

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

Mecanismo TRECS: a nova estratégia de rendimento

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

O TRECS (serviço de cliente extensível de recomendações Taboola) mantém a renderização do lado do cliente e o código JS atual do editor, além de reduzir o número e o tamanho dos arquivos obrigatórios necessários para carregar as recomendações do Taboola.

Depois que as tarefas de bloqueio de renderização são identificadas com o LoAF, o "esmaecimento de desempenho" pode dividir essas tarefas antes de chegar à linha de execução principal usando scheduler.postTask(). Esse design garante que trabalhos essenciais voltados ao usuário, como atualizações de renderização, possam ser executados o mais rápido possível, independentemente de tarefas existentes que possam estar ocupando a linha de execução principal.

Aqui está o snippet JS de "Performance Fader" executor de tarefas:

/**
* 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 retorna para setTimeout.
• Essa função une chamadas de função em seções de código que geram frames de animação longos e INP. Ele divide essas seções de código em tarefas mais curtas, o que reduz o INP.

Métricas de negócios

Graças ao LoAF, a Taboola conseguiu entender melhor seu impacto na 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 dos TRECS e do Performance Fder, a Taboola realizou um teste A/B medindo o INP em relação ao mecanismo atual sem que um script tenha gerado resultados em um painel de editores parceiros.

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

Felizmente, as métricas de negócios, como taxa de cliques do anúncio e receita por 1.000 impressões (RPM), não foram afetadas negativamente quando os TRECS e o esmaecimento de desempenho foram ativados no painel de teste. Com essa melhoria positiva na INP sem nenhum resultado negativo como esperado nos KPIs do Google Ads, a Taboola vai melhorar gradualmente 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 pelo Taboola ao usar o novo mecanismo.

Isso demonstra que o uso do LoAF para identificar as causas da INP e da implantação das técnicas de rendimento subsequentes com o Performance Fader permite que os parceiros da Taboola alcancem o sucesso máximo no desempenho do anúncio e da página.

Conclusão

Otimizar o INP é um processo complexo, especialmente quando scripts de terceiros são usados em sites parceiros. Antes que a otimização possa começar, a atribuição de INP a scripts específicos elimina qualquer suposições e possíveis danos a outras métricas de desempenho do site.A API LoAF provou ser uma ferramenta valiosa para identificar e resolver problemas de INP especialmente para terceiros incorporados, permitindo identificar as oportunidades específicas de melhoria do SDK e, ao mesmo tempo, eliminar a interferência de outras tecnologias presentes na página.

Quando usado em conjunto com uma boa estratégia de rendimento, como o uso de scheduler.postTask(), o LoAF pode ajudar você a observar e entender a causa da baixa capacidade de resposta da página, o que, por sua vez, fornece as informações necessárias para melhorar o INP do seu site.

Um agradecimento especial a Gilberto Cocchi, Noam Rosenthal e Rick Viscomi, do Google, e Dedi Hakak, Anat Dagan e Omri Ariav, da equipe de engenharia e produto da Taboola, pela contribuição deles para este trabalho.