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 yielding 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 la reattività 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 un clic, un tocco o una digitazione, e il feedback visivo risultante. A marzo 2024, INP sostituirà First Input Delay (FID) come metrica di Core Web Vitals.

Taboola è la piattaforma di scoperta di contenuti leader al mondo, che genera 500.000 consigli al secondo sul web aperto. Questi consigli consentono ai 9000 partner editori 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ò influire sulla capacità di una pagina di rispondere rapidamente all'input utente, Taboola ha investito molto nella riduzione delle dimensioni dei file JavaScript e del tempo di esecuzione. Taboola ha riprogettato l'intero motore di rendering e utilizza le API del browser direttamente senza astrazioni per ridurre al minimo l'impatto sull'INP.

Questo case study descrive il percorso di Taboola per migliorare l'INP utilizzando la nuova API Long Animation Frames (LoAF) per misurare il suo impatto sulla reattività della pagina sul campo e gli sforzi successivi per applicare ottimizzazioni specifiche per migliorare l'esperienza utente.

TBT come proxy di INP

Il Total Blocking Time (TBT) è una metrica basata su test di laboratorio che identifica i punti in cui il thread principale è stato bloccato per un periodo di tempo sufficiente a influire probabilmente sulla reattività della pagina. Le metriche di campo che misurano la reattività, come 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, unita alle preoccupazioni degli editori di Taboola in merito a un TBT elevato, ha portato Taboola a concentrarsi sulla riduzione al minimo del proprio 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. Hanno iniziato svolgendo le seguenti operazioni:

• 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 al giorno.

Tuttavia, Taboola ha notato che l'analisi del 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à all'input dell'utente. Le origin trials consentono di accedere a funzionalità nuove o sperimentali, permettendo agli sviluppatori di testare le funzionalità emergenti che i loro utenti possono provare per un periodo di tempo limitato.

È essenziale sottolineare che l'aspetto più difficile di questa sfida è stato migliorare l'INP senza compromettere alcun KPI(indicatore chiave di prestazione) di Google Ads o causare ritardi nelle risorse per i nostri publisher.

Utilizzo di LoAF per valutare l'impatto di INP

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

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

Il seguente codice JavaScript è una versione semplificata utilizzata in produzione per raccogliere LoAF e 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 è un importante collaboratore.
• Taboola è considerato un collaboratore principale 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 di animazione lungo. La durata di 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 è possibile 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 significativamente il tempo di esecuzione e blocco di JavaScript.

TRECS (Taboola Recommendations Extensible Client Service) mantiene il rendering lato client e il codice JS attuale dell'editore, 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 utilizzando LoAF, "Performance Fader" può suddividerle prima di cedere il controllo al thread principale utilizzando scheduler.postTask(). Questo design garantisce che il lavoro cruciale rivolto agli utenti, come il rendering degli aggiornamenti, 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 a sua volta utilizza scheduler.postTask() (se l'API è disponibile) o setTimeout.
• Questa funzione racchiude le chiamate di funzione in sezioni di codice che causano frame di animazione lunghi e INP. Suddivide queste sezioni di codice in attività più brevi, riducendo così l'INP.

Metriche aziendali

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

Per determinare l'impatto di TRECS e del cursore delle prestazioni, Taboola ha condotto un test A/B che misurava l'INP rispetto al motore esistente senza script su un panel di partner editori.

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 e le entrate per 1000 impressioni (RPM), non hanno subito un impatto negativo quando TRECS e il cursore del rendimento sono stati attivati nel pannello di test. Con questo miglioramento positivo dell'INP senza alcun risultato negativo come previsto sugli indicatori chiave di rendimento di Google Ads, Taboola migliorerà gradualmente la percezione dei suoi editori in merito al suo prodotto.

Un altro test Lighthouse eseguito sullo stesso cliente evidenziato in precedenza dimostra un miglioramento significativo del tempo di blocco del thread principale da parte di Taboola quando viene utilizzato il nuovo motore.

Ciò dimostra che l'utilizzo di LoAF per identificare le cause di INP e l'implementazione delle successive tecniche di yielding con Performance Fader consentono ai partner di Taboola di ottenere il massimo successo in termini di prestazioni di annunci e pagine.

Conclusione

L'ottimizzazione dell'INP è un processo complesso, soprattutto quando vengono utilizzati script di terze parti sui siti web dei partner. Prima che l'ottimizzazione possa iniziare, l'attribuzione dell'INP a script specifici elimina qualsiasi congettura e potenziale danno ad altre metriche delle prestazioni del sito.L'API LoAF si è dimostrata uno strumento prezioso per identificare e risolvere i problemi di INP, in particolare per le terze parti incorporate, consentendo loro di individuare le opportunità di miglioramento specifiche dell'SDK ed eliminando le interferenze di altre tecnologie presenti nella pagina.

Se utilizzato insieme a una buona strategia di rendimento, ad esempio l'utilizzo di scheduler.postTask(), LoAF può aiutarti a osservare e comprendere la causa della scarsa reattività della pagina, il che a sua volta ti fornisce 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.