In che modo l'utilizzo dell'API Long Animation Frames (LoAF) e l'adozione di una strategia di rendimento intelligente ha permesso a Taboola di migliorare la reattività del sito web senza compromettere il rendimento dell'annuncio.
Interazione con Next Paint (INP) è una metrica che valuta la reattività di un sito web all'input degli utenti. INP misura il tempo che intercorre tra l'inizio di un'interazione da parte di un utente, ad esempio quando fa clic, tocca o digita, al feedback visivo che ne risulta. INP dovrebbe sostituire il First Input Delay (FID) come metrica di Core Web Vitals a marzo 2024.
Taboola è la piattaforma di scoperta di contenuti leader a livello mondiale, che fornisce 500.000 consigli al secondo sul web aperto. Questi consigli consentono ai 9000 publisher partner esclusivi di Taboola di monetizzare e coinvolgere il proprio pubblico. I publisher visualizzano i consigli nelle proprie 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 riprogettato l'intero motore di rendering e ha utilizzato le API del browser direttamente senza astrazioni per ridurre al minimo il suo impatto su INP.
Questo case study descrive il percorso di Taboola per migliorare INP mediante l'utilizzo della nuova API Long Animation Frames (LoAF) per misurare il suo impatto sulla reattività delle pagine sul campo e le successive iniziative per applicare ottimizzazioni specifiche per migliorare l'esperienza utente.
TBT come proxy INP
Il tempo di blocco totale (TBT) è una metrica basata su lab che identifica il punto in cui il thread principale è stato bloccato per abbastanza tempo da influire probabilmente sulla reattività della pagina. Le metriche dei campi che misurano la reattività, come INP, possono essere influenzate da un valore 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 dei thread principali è ridotto al minimo.
Questa correlazione, unita al ruolo degli editori di Taboola, le preoccupazioni relative a un valore di TBT elevato ha portato Taboola a concentrare l'attenzione sulla riduzione al minimo del suo 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 i tempi di esecuzione di JavaScript al fine di limitarne l'impatto potenziale sui Core Web Vitals. Ha iniziato procedendo nel seguente modo:
- Identificare e ottimizzare gli script problematici sul campo utilizzando l'API Long Tasks.
- Stima dei contributi da TBT utilizzando l'API PageSpeed Insights per valutare 10.000-15.000 URL ogni giorno.
Tuttavia, Taboola ha notato che l'analisi di TBT con questi strumenti presentava alcune limitazioni:
- L'API Long Tasks non può attribuire l'attività al dominio di origine o a un determinato script, il che rende più difficile l'identificazione delle origini delle attività lunghe.
- L'API Long Tasks identifica solo le attività lunghe, anziché una combinazione di attività e modifiche al layout che potrebbe 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 prove dell'origine consentono di accedere a funzionalità nuove o sperimentali, consentendo agli sviluppatori di testare le funzionalità emergenti che i loro 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 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, piuttosto che delle sole attività lunghe, Taboola è riuscita ad analizzare il suo impatto sulla reattività delle pagine sul campo. L'osservazione di LoAF ha consentito a Taboola di:
- Attribuire le voci ad attività Taboola specifiche.
- Osserva i problemi di prestazioni di funzionalità specifiche prima di eseguirne il deployment in produzione.
- 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
loafEntryAnalysisha 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
firstUIEventTimeStampse l'interazione dell'utente viene ritardata a causa di un frame dell'animazione lungo. La durata di blocco più lunga viene considerata come il punteggio INP complessivo. Possiamo anche identificare quando Taboola ha attivato unfirstUIEventTimeStampper calcolare un punteggio Taboola INP.
I dati raccolti con LoAF hanno aiutato Taboola a creare la seguente tabella di attribuzione, che identifica le aree in cui può applicare le opportunità di rendimento.
TRECS Engine: 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 l'esecuzione e il blocco di JavaScript.
TRECS (Taboola Recommendations Extensible Client Service) gestisce il rendering lato client e il codice JS corrente del publisher riducendo al contempo il numero e la dimensione dei file obbligatori necessari per caricare i suggerimenti di Taboola.
Una volta identificate le attività di blocco del rendering mediante LoAF, il "Fader prestazioni" possono suddividere queste attività prima di passare 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 "Performance Fader" esecutore dell'attività:
/**
* 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:
- Usa
runAsPostTask, che sfruttascheduler.postTask()in background (se l'API è disponibile) oppure utilizzasetTimeout. - Questa funzione aggrega le chiamate di funzione in sezioni di codice che causano lunghi frame di animazione e INP. Suddivide queste sezioni di codice in attività più brevi e quindi riduce l'INP.
Metriche aziendali
Grazie a LoAF, Taboola è riuscita a comprendere meglio il suo impatto su INP. Lo strumento ha inoltre evidenziato le opportunità di ottimizzazione degli script che potrebbero essere utilizzate nel 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 editori anonimi nella rete Taboola.
Fortunatamente, le metriche aziendali, come la percentuale di clic sugli annunci e le entrate per 1000 impressioni (RPM), non hanno subito un impatto negativo quando TRECS e Performance Fader sono stati attivati nel riquadro di test. Grazie a questo miglioramento positivo relativo all'INP senza alcun risultato negativo come previsto nei KPI di Google Ads, Taboola migliorerà gradualmente i propri publisher nei confronti del prodotto.
Un'altra esecuzione Lighthouse sullo stesso cliente evidenziato in precedenza dimostra un miglioramento significativo nel tempo di blocco dei thread principali da parte di Taboola quando si utilizza il nuovo motore.
RELEASE.js di ridurre il valore TBT di 485 ms (-70%).
Questo dimostra che l'utilizzo di LoAF per identificare le cause dell'INP e l'implementazione delle successive tecniche di rendimento con il Fader prestazioni consentono ai partner di Taboola di ottenere i massimi risultati in termini di prestazioni di annunci e pagine.
Conclusione
L'ottimizzazione di INP è una procedura complessa, in particolare quando sui siti web partner vengono utilizzati script di terze parti. Prima che l'ottimizzazione possa iniziare, l'attribuzione di INP a script specifici elimina qualsiasi congettura e 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 insieme a una buona strategia di rendimento, ad esempio scheduler.postTask(), LoAF può aiutarti a osservare e comprendere la causa della scarsa reattività della pagina, che a sua volta ti fornisce le informazioni necessarie per migliorare l'INP del 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 Engineering and Product di Taboola per il loro contributo a questo lavoro.