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.
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:
- Atribui entradas para tarefas específicas do Taboola.
- Observe problemas de desempenho em recursos específicos antes de serem implantados na produção.
- 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 umfirstUIEventTimeStamp
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 usascheduler.postTask()
em segundo plano (se a API estiver disponível), ou retorna parasetTimeout
. - 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.