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.
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ò influire sulla capacità di una pagina di rispondere rapidamente all'input utente, Taboola ha investito molto per ridurre le dimensioni e i tempi di esecuzione dei file JavaScript. 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, unita alle preoccupazioni dei publisher di Taboola in merito a un TBT elevato, ha portato Taboola a concentrarsi sulla minimizzazione del proprio contributo a questa metrica.
RELEASE.js bloccano il thread principale per 691 millisecondi.
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 su Core Web Vitals. Hanno iniziato 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 sorgenti 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) per comprendere meglio il suo impatto reale sulla reattività all'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 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 degli INP
Un frame di animazione lungo si verifica quando un aggiornamento del rendering è in ritardo oltre i 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:
- Attribuire le voci ad attività Taboola specifiche.
- Osserva i problemi di prestazioni in funzionalità specifiche prima che vengano implementate in produzione.
- Raccogli i dati aggregati per confrontare diverse versioni di codice nei test A/B e genera report sulle metriche di successo chiave.
Il seguente codice JavaScript è una versione semplificata utilizzata in produzione per raccogliere i dati 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
loafEntryAnalysisha consentito a Taboola di identificare le voci in cui è un contributore principale. - Taboola è considerato un contributore 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
firstUIEventTimeStampse l'interazione dell'utente è ritardata a causa di un frame di animazione lungo. La durata del blocco più lunga viene considerata come il punteggio INP complessivo. Possiamo anche identificare quando Taboola ha attivato unfirstUIEventTimeStampper 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 ridisegnato 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 utilizzando LoAF, "Performance Fader" può suddividerle prima di cedere il controllo al thread principale utilizzando scheduler.postTask(). Questo design garantisce che le attività cruciali rivolte agli utenti, come gli aggiornamenti del rendering, possano essere eseguite il prima possibile, indipendentemente dalle eventuali 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 utilizzascheduler.postTask()sotto il cofano (se l'API è disponibile) o passa asetTimeout. - 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 ha potuto comprendere meglio il proprio impatto sull'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 script su un panel 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. Con questo miglioramento positivo dell'INP senza alcun risultato negativo come previsto nei KPI di Google Ads, Taboola migliorerà gradualmente la percezione del proprio prodotto da parte dei publisher.
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.
RELEASE.js a ridurre il TBT di 485 ms (-70%).
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 rimuove qualsiasi supposizione e potenziale danno ad altre metriche sul rendimento del sito.L'API LoAF si è dimostrata uno strumento prezioso per identificare e risolvere i problemi di INP, in particolare per i fornitori di terze parti incorporati, consentendo loro di individuare le opportunità di miglioramento specifiche dell'SDK, eliminando al contempo le interferenze di 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.