In che modo il fornitore di suggerimenti di contenuti Taboola ha utilizzato LoAF per migliorare INP fino al 36% per i suoi siti web partner dei publisher.

In che modo l'utilizzo dell'API Long Animation Frames (LoAF) e l'adozione di una strategia di rendimento intelligente hanno consentito a Taboola di migliorare la reattività dei siti web dei publisher senza compromettere il rendimento degli annunci.

David Belford

Thierno Thiam

Interaction to Next Paint (INP) è una metrica che valuta l'adattabilità di un sito web all'input utente. L'INP misura il tempo che intercorre tra l'inizio di un'interazione da parte dell'utente, ad esempio quando fa clic, tocca o digita, e il feedback visivo che ne deriva. A marzo 2024, INP sostituirà First Input Delay (FID) come metrica di Core Web Vitals.

Taboola è la piattaforma di discovery dei contenuti leader a livello mondiale, che genera 500.000 consigli ogni secondo sul web aperto. Questi consigli consentono ai 9000 publisher partner esclusivi di Taboola di monetizzare e coinvolgere i propri segmenti di pubblico. I publisher visualizzano i consigli sulle loro pagine utilizzando JavaScript.

Poiché JavaScript di terze parti può incidere sulla capacità di una pagina di rispondere rapidamente all'input dell'utente, Taboola è stato molto investito nella riduzione delle dimensioni dei file JavaScript e del tempo di esecuzione. Taboola ha ridisegnato l'intero motore di rendering e utilizza direttamente le API del browser senza astrazione per ridurre al minimo l'impatto sull'INP.

Questo caso studio illustra il percorso di Taboola per migliorare l'INP utilizzando la nuova API Long Animation Frames (LoAF) per misurarne l'impatto sulla reattività della pagina sul campo e i successivi sforzi per applicare ottimizzazioni specifiche per migliorare l'esperienza utente.

TBT come proxy di INP

Total Blocking Time (TBT) è una metrica basata su laboratorio che identifica il punto in cui il thread principale è stato bloccato per un periodo di tempo sufficientemente lungo da influire sulla reattività della pagina. Le metriche dei campi che misurano la reattività, come l'INP, possono essere influenzate da un TBT elevato. Un'indagine di Annie Sullivan sulla correlazione tra TBT e INP sui dispositivi mobili indica che i siti hanno maggiori probabilità di ottenere buoni punteggi INP quando il tempo di blocco del thread principale è ridotto al minimo.

Questa correlazione, insieme alle preoccupazioni degli editori di Taboola in merito a un valore di TBT elevato, ha portato Taboola a concentrare l'attenzione sulla riduzione al minimo del suo contributo a questa metrica.

Utilizzando TBT come metrica proxy per INP, Taboola ha iniziato a monitorare e ottimizzare il tempo di esecuzione di JavaScript per limitarne il potenziale impatto sui Core Web Vitals. Ha iniziato procedendo nel seguente modo:

• Identificazione e ottimizzazione degli script problematici sul campo utilizzando l'API Long Tasks.
• Stimare i contributi TBT utilizzando l'API PageSpeed Insights per valutare da 10.000 a 15.000 URL ogni giorno.

Tuttavia, Taboola ha notato che l'analisi dei TBT con questi strumenti presentava alcune limitazioni:

• L'API Long Tasks non può attribuire l'attività al dominio di origine o a uno script specifico, il che rende più difficile identificare le origini delle attività lunghe.
• L'API Long Tasks identifica solo le attività lunghe, anziché una combinazione di attività e modifiche al layout che potrebbero causare un ritardo nel rendering.

Per affrontare queste sfide, Taboola ha partecipato alla prova dell'origine dell'API Long Animation Frames (LoAF) nel tentativo di comprendere meglio il suo impatto reale sulla reattività dell'input degli utenti. Le Origin trials consentono di accedere a funzionalità nuove o sperimentali, consentendo agli sviluppatori di testare le funzionalità emergenti che gli utenti possono provare per un periodo di tempo limitato.

È essenziale evidenziare che l'aspetto più difficile di questa sfida è stato quello di migliorare con successo l'INP senza compromettere alcun KPI(indicatore chiave di prestazione) degli annunci o causare ritardi nelle risorse per i nostri publisher.

Utilizzo di LoAF per valutare l'impatto degli INP

Un lungo frame dell'animazione si verifica quando un aggiornamento del rendering viene ritardato oltre 50 millisecondi. Identificando le cause degli aggiornamenti lenti dell'interfaccia utente, anziché solo le attività lunghe, Taboola è stata in grado di analizzare l'impatto sulla reattività della pagina sul campo. L'osservazione del LoAF ha consentito a Taboola di:

1. Attribuire le voci ad attività Taboola specifiche.
2. Osserva i problemi di prestazioni di funzionalità specifiche prima di eseguirne il deployment in produzione.
3. Raccogli dati aggregati per confrontare diverse versioni del codice nei test A/B e report sulle metriche chiave di successo.

Il seguente JavaScript è una versione semplificata utilizzata in produzione per raccogliere il LoAF al fine di isolare l'impatto di 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 });

• L'utilizzo della funzione loafEntryAnalysis ha consentito a Taboola di identificare le voci in cui contribuisce maggiormente.
• Taboola è considerato un fattore importante se più della metà della durata totale dello script è causata da Taboola o se l'esecuzione di uno script Taboola richiede più di 50 millisecondi.
• Viene generato un firstUIEventTimeStamp se l'interazione dell'utente viene ritardata a causa di un frame dell'animazione lungo. La durata del blocco più lunga viene considerata come il punteggio INP complessivo. Possiamo anche identificare quando Taboola ha attivato un firstUIEventTimeStamp per calcolare un punteggio INP di Taboola.

I dati raccolti con LoAF hanno aiutato Taboola a creare la seguente tabella di attribuzione, che identifica le aree in cui può applicare opportunità di rendimento.

Motore TRECS: la nuova strategia di rendimento

Oltre a utilizzare LoAF per comprendere meglio le opportunità di ottimizzazione degli script, Taboola ha riprogettato l'intero motore di rendering per ridurre al minimo il tempo di esecuzione e di blocco di JavaScript.

TRECS (Taboola Recommendations Extensible Client Service) mantiene il rendering lato client e il codice JS corrente del publisher, riducendo al contempo il numero e le dimensioni dei file obbligatori necessari per caricare i consigli di Taboola.

Una volta identificate le attività di blocco del rendering mediante LoAF, il "fader delle prestazioni" può suddividerle prima di cedere al thread principale utilizzando scheduler.postTask(). Questo design garantisce che il lavoro cruciale rivolto agli utenti, come gli aggiornamenti del rendering, possa essere eseguito il prima possibile, indipendentemente dalle attività esistenti che potrebbero occupare il thread principale.

Ecco lo snippet JS del task runner "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);
}

La funzione sendTaskToFader:

• Utilizza runAsPostTask, che utilizza scheduler.postTask() sotto il cofano (se l'API è disponibile) o passa a setTimeout.
• Questa funzione inserisce le chiamate di funzione in sezioni di codice che causano frame di animazione e INP lunghi. Suddivide queste sezioni di codice in attività più brevi e, di conseguenza, riduce l'INP.

Metriche aziendali

Grazie a LoAF, Taboola è riuscita a comprendere meglio il suo impatto su INP. Lo strumento ha anche evidenziato opportunità di ottimizzazione degli script che potrebbero essere utilizzate nell'ambito del nuovo motore TRECS.

Per determinare l'impatto di TRECS e del Performance Fader, Taboola ha condotto un test A/B per misurare l'INP rispetto al motore esistente senza alcun rendimento su un gruppo di publisher partner.

La tabella seguente mostra i risultati INP in millisecondi al 75° percentile di quattro publisher anonimi nella rete Taboola.

Fortunatamente, le metriche aziendali, come la percentuale di clic sugli annunci e le entrate per 1000 impressioni (RPM), non sono state interessate negativamente quando sono stati attivati TRECS e il cursore del rendimento nel panel di test. Grazie a questo miglioramento positivo relativo all'INP senza alcun risultato negativo come previsto nei KPI di Google Ads, Taboola migliorerà gradualmente la percezione dei suoi publisher del prodotto.

Un altro report Lighthouse eseguito sullo stesso cliente evidenziato in precedenza mostra un miglioramento significativo del tempo di blocco del thread principale di Taboola quando si utilizza il nuovo motore.

Ciò dimostra che l'utilizzo di LoAF per identificare le cause di INP e l'implementazione delle successive tecniche di rendimento con il Performance Fader consente ai partner di Taboola di ottenere il massimo rendimento degli annunci e delle pagine.

Conclusione

L'ottimizzazione dell'INP è un processo complesso, in particolare quando vengono utilizzati script di terze parti sui siti web partner. Prima che l'ottimizzazione possa iniziare, l'attribuzione di INP a script specifici elimina le congetture e i potenziali danni ad altre metriche relative alle prestazioni del sito.L'API LoAF ha dimostrato di essere uno strumento prezioso per identificare e risolvere i problemi INP, in particolare per le terze parti incorporate, consentendo loro di individuare le opportunità specifiche di miglioramento dell'SDK, eliminando l'interferenza da altre tecnologie presenti nella pagina.

Se utilizzata in combinazione con una buona strategia di rendimento, ad esempio l'utilizzo di scheduler.postTask(), la LoAF può aiutarti a osservare e comprendere la causa della scarsa reattività della pagina, fornendoti le informazioni necessarie per migliorare l'INP del tuo sito web.

Un ringraziamento speciale a Gilberto Cocchi, Noam Rosenthal e Rick Viscomi di Google e a Dedi Hakak, Anat Dagan e Omri Ariav del team di ingegneria e prodotto di Taboola per il loro contributo a questo lavoro.