In che modo la cache back-forward ha aiutato Yahoo! JAPAN News aumenta le entrate del 9% sui dispositivi mobili

Yuriko Hirota

La cache back-forward (o bfcache) è un'ottimizzazione del browser che consente una navigazione istantanea avanti e indietro. Migliora notevolmente l'esperienza di navigazione degli utenti, in particolare per i siti web che richiedono molte navigazioni avanti e indietro.
Articolo web.dev su bfcache

Migrazione dei sitelink di Yahoo! JAPAN News, una delle piattaforme di notizie più popolari in Giappone, ha intrapreso un lavoro collaborativo per migliorare la percentuale di hit della cache del bfcache e, di conseguenza, ha riscontrato miglioramenti significativi dell'esperienza utente e dell'attività. In particolare, i risultati del test A/B che hanno condotto hanno mostrato che le pagine che utilizzano la cache back-forward hanno registrato un aumento del 9% delle entrate pubblicitarie.

Questo case study spiega in che modo Yahoo! JAPAN News ha rimosso i blocchi per la cache back-forward e ha migliorato drasticamente l'esperienza utente.

Rimozione dei blocchi per la cache back-forward

bfcache è disponibile da Chrome 86 ed è disponibile anche su tutti i browser moderni. Tuttavia, sfruttare appieno la cache back-forward richiede la rimozione di potenziali blocchi sul sito web di un utente. Alcuni dei principali ostacoli a cui le campagne Yahoo! JAPAN News affrontate:

Utilizzo dei gestori unload
Utilizzo dell'istruzione no-store nelle intestazioni Cache-control

Puoi verificare quali sono i principali blocchi per il tuo sito web andando a Strumenti di sviluppo di Chrome > Applicazioni > Cache back/forward (ulteriori dettagli) oppure utilizzando l'API notRestoredReasons per avere una visione più completa dei blocchi in base all'utilizzo effettivo sul campo.

Ecco come Yahoo! JAPAN News ha rimosso i blocchi:

Gestione dell'unload: utilizza l'evento pagehide invece dell'evento unload, perché unload è molto inaffidabile. Inoltre, permission-policy: unload è stato lanciato in Chrome 115 in modo che i siti web possano rimuovere in modo affidabile i gestori unload per origini specifiche. Chrome ha anche intenzione di ritirare gradualmente i gestori unload.
Cache-control: no-store (o CCNS in breve): la modifica dell'intestazione Cache-control da no-store a no-cache può attivare la cache back-forward. Chrome ha anche intenzione di avviare la memorizzazione nella cache per la cache back-forward anche con un'intestazione no-store in determinate circostanze.

Il CCNS è destinato alle pagine che non devono mai essere memorizzate nella cache in nessuna circostanza. Ciò comporta un'avvertenza che qualsiasi pagina con CCNS non potrà trarre vantaggio da alcuna tecnologia di memorizzazione nella cache, inclusi i server perimetrali CDN e le cache locali.

Se hai un'intestazione CCNS, è un'ottima opportunità per discutere delle strategie Cache-control giuste per il tuo sito web. Ecco le principali differenze tra no-store e no-cache.

`Cache-control: no-store`	`Cache-control: no-cache`
La risposta non può essere archiviata nelle cache. Di conseguenza, la risposta viene recuperata per intero su ogni richiesta. Deve essere utilizzato per le risposte private.	La risposta può essere memorizzata nelle cache purché venga riconvalidata con il server prima di ogni utilizzo. Dovrebbero essere risposte pubbliche che vuoi riconvalidare ogni volta (ad esempio, la home page di un sito web di notizie, anche se un tempo di memorizzazione nella cache molto breve può migliorare le prestazioni e ridurre il lavoro dei server principali).

Se vuoi saperne di più sulle opzioni di Cache-control, questo diagramma di flusso ti sarà di grande aiuto.

Impatto dei numeri della cache back-forward

Per misurare l'impatto della cache, Yahoo! JAPAN News ha condotto un test A/B per due settimane, in cui ha pubblicato una versione delle pagine con le correzioni di bfcache in un gruppo e una versione con pagine non idonee alla cache back-forward in un altro gruppo. Ha scelto i percorsi degli URL con una quantità significativa di traffico in modo che il test potesse ottenere risultati significativi. Non ci sono state altre differenze visive o funzionali tra le 2 versioni.

Ecco un video che confronta il sito web con bfcache e senza bfcache. Puoi notare che il sito web con bfcache attivata viene caricato molto più velocemente durante una navigazione a ritroso o in avanti.

La cosa davvero promettente è che il gruppo con la cache back-forward attivata ha avuto un aumento significativo delle visualizzazioni di pagina e delle entrate pubblicitarie, in particolare sui dispositivi mobili.

Di seguito sono riportati i dettagli sull'impatto osservato da Yahoo! JAPAN News con il test A/B della cache back-forward. Ulteriori informazioni sono disponibili nell'articolo del case study.

Metriche	% di aumento (dispositivi mobili)	% di aumento (computer)
tasso di successo bfcache	+54,03 punti (0,04% → 54,07%)	+47,28 punti (0,02% → 47,30%)
Visualizzazioni di pagina	+2,26%	+0,65%
Entrate pubblicitarie	oltre il 9%	+0,6%

Quando le navigazioni back-forward tra le pagine diventano istantanee grazie a bfcache, gli utenti tendono a rimanere sulle pagine più a lungo e, di conseguenza, a incrementare le visualizzazioni di annunci, con un conseguente incremento delle entrate pubblicitarie.

bfcache migliora l'esperienza utente sul sito web

Quando le pagine si caricano subito, la navigazione è più fluida.

Nell'account motore Yahoo! JAPAN News, uno dei principali percorsi dell'utente è il seguente:

Vai all'elenco degli articoli
Fai clic su un articolo da leggere
Torna all'elenco degli articoli
Fai clic su un altro articolo da leggere

Prima di memorizzare nella cache, gli utenti che avevano letto un articolo (passaggio 2) dovevano attendere il caricamento della pagina dell'elenco degli articoli. Questo potrebbe essere un fattore di attrito per gli utenti che vogliono semplicemente tornare all'elenco degli articoli per scegliere un altro articolo da leggere.

Un'altra fonte di attrito durante la navigazione a ritroso è stata la posizione di scorrimento. In pratica, il browser tenta di ripristinare la posizione di scorrimento quando viene eseguita una navigazione a ritroso. Tuttavia, a causa degli annunci aggiunti dinamicamente o di altre modifiche al layout, la posizione di scorrimento viene spesso ripristinata in modo errato e, di conseguenza, gli utenti potrebbero perdere l'orientamento o persino abbandonare la pagina. Questo non è mai un problema quando la navigazione a ritroso è attivata dalla cache back-forward: la posizione di scorrimento viene ripristinata immediatamente e correttamente.

Due filmati di una navigazione a ritroso da un articolo alla pagina della scheda dell'articolo. La parte superiore è una pellicola del processo gestito con bfcache che richiede 0,3 secondi, mentre la parte inferiore è dello stesso processo gestito senza bfcache, che richiede 3,3 secondi.

Ora, con bfcache, l'attrito nel percorso dell'utente è scomparso: gli utenti possono tornare immediatamente alla pagina dell'elenco degli articoli e scegliere un altro articolo da leggere senza dover attendere il caricamento della pagina dell'elenco degli articoli.

La stessa cosa accade quando gli utenti passano da un articolo all'altro direttamente e viceversa:

Un'immagine animata che mostra il flusso di navigazione a ritroso da un articolo alla pagina dell'elenco dell'articolo con e senza cache bf. Con bfcache, la navigazione a ritroso non solo è più veloce, ma anche la posizione di scorrimento viene mantenuta in modo accurato. Senza bfcache, queste garanzie non possono essere fatte.

In breve, i vantaggi dell'utilizzo di bfcache per Yahoo! JAPAN News include:

Aumento delle visualizzazioni di pagina: gli utenti erano più propensi a navigare all'interno del sito web se le pagine erano memorizzate nella cache con cache back-forward.
Aumento delle entrate: in seguito all'aumento delle visualizzazioni di pagina per sessione, le impressioni degli annunci sono aumentate, determinando un aumento del 9% delle entrate da dispositivo mobile rispetto al gruppo di prova senza cache back-forward.

Conclusione

In breve, bfcache non solo rende il tuo sito web istantaneo, ma può anche ridurre gli attriti nell'esperienza utente complessiva e aumentare il coinvolgimento all'interno del tuo sito web.

Il team di Chrome esamina continuamente i blocchi bfcache, in particolare per i due motivi elencati in questo articolo, perché sono motivi comuni per il mancato utilizzo di bfcache. In futuro, queste funzionalità potrebbero non impedire l'utilizzo della cache back-forward, ma non è necessario attendere fino ad allora. Puoi trarre vantaggio dalla cache back-forward esaminando i blocchi della cache back-forward ed evitando questi pattern comuni e altri meno comuni.