Il modo in cui l'API Long Animation Frames (LoAF) e l'adozione di una strategia di rendimento intelligente hanno permesso a Taboola di migliorare la reattività del sito 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 degli utenti. L'INP misura il tempo che intercorre tra l'avvio di un'interazione da parte di un utente, ad esempio l'azione di clic, tocco o digitazione, fino al feedback visivo risultante. INP è dovuto alla sostituzione di First Input Delay (FID) come Segnale web essenziale a marzo 2024.
Taboola è la piattaforma di scoperta di contenuti leader a livello mondiale, in grado di fornire 500.000 consigli al secondo sul web aperto. Questi suggerimenti consentono ai 9.000 publisher partner esclusivi di Taboola di monetizzare e coinvolgere il loro pubblico. I publisher eseguono il rendering dei 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 ha investito molto nella riduzione delle dimensioni dei suoi file JavaScript e dei tempi di esecuzione. Taboola ha riprogettato l'intero motore di rendering, oltre a utilizzare direttamente le API del browser senza astrazioni per ridurre al minimo il suo impatto su INP.
Questo case study illustra il percorso di Taboola per migliorare l'INP utilizzando la nuova API LoAF (Long Animation Frames) per misurare il suo impatto sulla reattività della pagina sul campo, nonché i suoi sforzi successivi per applicare ottimizzazioni specifiche per migliorare l'esperienza utente.
TBT come proxy di INP
Tempo di blocco totale (TBT) è una metrica basata su lab che identifica il punto in cui il thread principale è stato bloccato per un tempo abbastanza lungo da influire probabilmente sulla reattività della pagina. Le metriche dei campi che misurano la reattività, come l'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 alle preoccupazioni degli editori di Taboola in merito a un valore di TBT elevato, ha portato Taboola a concentrare la sua 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 il tempo di esecuzione di JavaScript per limitare il suo potenziale impatto sui Segnali web essenziali. Ha iniziato procedendo nel seguente modo:
- Identificare e ottimizzare gli script problematici nel campo utilizzando l'API Long Tasks.
- Stima dei 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 di TBT con questi strumenti presentava alcune limitazioni:
- L'API Long Tasks non può attribuire l'attività al dominio di origine o a un particolare script, 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 del layout che potrebbe causare un ritardo del 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 reale impatto sulla reattività dell'input utente. Le prove dell'origine danno accesso a funzionalità nuove o sperimentali, consentendo agli sviluppatori di testare 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 con successo l'INP senza compromettere alcun KPI(indicatore chiave di prestazione) degli annunci o causare ritardi nelle risorse per i nostri publisher.
Utilizzare il LoAF per valutare l'impatto dell'INP
Un frame dell'animazione lungo si verifica quando un aggiornamento del rendering viene ritardato oltre i 50 millisecondi. Individuando le cause della lentezza degli aggiornamenti dell'interfaccia utente (anziché delle sole attività lunghe), Taboola è stato in grado di analizzare il suo impatto sulla reattività delle pagine nel campo. L'osservazione LoAF ha consentito a Taboola di:
- Attribuisci le voci ad attività Taboola specifiche.
- Osserva i problemi di prestazioni di funzionalità specifiche prima del loro deployment in produzione.
- Raccogli dati aggregati per confrontare diverse versioni del codice nei test A/B e generare report sulle principali metriche di successo.
Il codice JavaScript seguente è una versione semplificata utilizzata in produzione per la raccolta del 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 era un collaboratore principale. - Taboola è considerato un collaboratore principale se più della metà della durata totale della scrittura è causata da Taboola o se l'esecuzione di uno script di Taboola richiede più di 50 millisecondi.
- Viene generato un valore
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 il 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.
TRECS Engine: la nuova strategia di rendimento
Oltre a utilizzare LoAF per comprendere meglio le opportunità di ottimizzazione degli script, Taboola ha riprogettato il suo intero motore di rendering per ridurre significativamente l'esecuzione di JavaScript e i tempi di blocco.
TRECS (Taboola Recommendations Extensible Client Service) gestisce il rendering lato client e il codice JS corrente dell'editore riducendo al contempo il numero e la dimensione dei file obbligatori per caricare i suggerimenti di Taboola.
Una volta identificate le attività di blocco del rendering mediante LoAF, la funzione "Performance Fader" può suddividerle in base alle attività prima di cedere al thread principale utilizzando scheduler.postTask(). Questo design garantisce che le attività cruciali rivolte all'utente, come gli aggiornamenti del rendering, possano essere eseguite il prima possibile, indipendentemente dalle attività esistenti che potrebbero occupare il thread principale.
Ecco lo snippet JS dell'esecuzione dell'attività "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()in background (se l'API è disponibile) oppure torna asetTimeout. - Questa funzione aggrega le chiamate di funzione nelle sezioni di codice che causano lunghi frame dell'animazione e INP. Suddivide queste sezioni di codice in attività più brevi e, di conseguenza, riduce l'INP.
Metriche aziendali
Grazie al LoAF, Taboola è stata in grado di comprendere meglio il suo impatto sulla INP. Lo strumento ha inoltre evidenziato le opportunità di ottimizzazione dello script che possono essere utilizzate nel nuovo motore TRECS.
Per determinare l'impatto di TRECS e del Performance Fader, Taboola ha condotto un test A/B misurando l'INP rispetto al motore esistente, senza alcuno scripting su un panel di editori 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 il cursore del rendimento sono stati attivati nel riquadro di test. Grazie a questo miglioramento positivo dell'INP senza alcun risultato negativo come previsto per i KPI degli annunci, Taboola migliorerà gradualmente la percezione del suo prodotto da parte dei publisher.
Un'altra esecuzione di Lighthouse sullo stesso cliente evidenziato in precedenza mostra un miglioramento significativo del tempo di blocco dei thread principale da parte di Taboola quando si utilizza il nuovo motore.
RELEASE.js a ridurre il TBT di 485 ms (-70%).
Questo dimostra che l'utilizzo di LoAF per identificare le cause dell'INP e l'implementazione delle tecniche di rendimento successive con il fader delle prestazioni consente ai partner di Taboola di ottenere il massimo successo in termini di prestazioni di annunci e pagine.
Conclusione
L'ottimizzazione dell'INP è una procedura complessa, in particolare quando gli script di terze parti vengono utilizzati sui siti web partner. Prima che l'ottimizzazione possa iniziare, l'attribuzione dell'INP a script specifici rimuove congetture e potenziali danni ad altre metriche relative alle prestazioni del sito.L'API LoAF si è dimostrata uno strumento prezioso per identificare e risolvere problemi INP in particolare per le terze parti incorporate, consentendo loro di individuare le opportunità specifiche di miglioramento dell'SDK eliminando al tempo stesso le interferenze da altre tecnologie presenti nella pagina.
Se utilizzata insieme a una buona strategia di rendimento, come l'utilizzo di scheduler.postTask(), la funzionalità LoAF può aiutarti a osservare e comprendere la causa della scarsa reattività delle pagine 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, nonché Dedi Hakak, Anat Dagan e Omri Ariav del team Engineering and Product di Taboola per il loro contributo a questo lavoro.