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 la navigazione immediata 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

Campagna Yahoo! JAPAN News, una delle piattaforme di notizie più popolari in Giappone, ha intrapreso un impegno concertato per migliorare il tasso di hit della cache bf e ha registrato notevoli miglioramenti dell'esperienza utente e dell'attività. Nello specifico, i risultati del test A/B hanno dimostrato che le pagine che utilizzano bfcache hanno registrato un aumento del 9% delle entrate pubblicitarie.

Questo case study spiega come Yahoo! JAPAN News ha rimosso i blocchi per bfcache e come bfcache ha migliorato drasticamente l'esperienza utente.

Rimozione dei blocchi per bfcache

bfcache è disponibile da Chrome 86 ed è disponibile anche su tutti i browser moderni. Tuttavia, per sfruttare al meglio bfcache è necessario rimuovere i potenziali blocchi sul sito web. Ecco alcuni dei principali fattori che impediscono a Yahoo! JAPAN News ha riscontrato i seguenti problemi:

Utilizzo di gestori unload
Utilizzo della direttiva no-store nelle intestazioni Cache-control

Puoi verificare quali sono i principali blocchi per il tuo sito web andando su Chrome Dev Tools > Applications > Back/forward Cache (ulteriori dettagli) o 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:

Gestori di eventi di unload: utilizza l'evento pagehide anziché unload, poiché quest'ultimo è 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 prevede inoltre 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 bfcache. Chrome prevede inoltre di iniziare a memorizzare nella cache per bfcache anche con un'intestazione no-store in determinate circostanze.

CCNS è destinato a pagine che non devono mai essere memorizzate nella cache in alcuna circostanza. Tieni presente che qualsiasi pagina con CCNS non potrà usufruire di alcuna tecnologia di memorizzazione nella cache, inclusi i server edge CDN e le cache locali.

Se hai un'intestazione CCNS, questa è 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 memorizzata nelle cache. Di conseguenza, la risposta viene recuperata per intero a ogni richiesta. Deve essere utilizzato per le risposte private.	La risposta può essere memorizzata nelle cache purché venga convalidata di nuovo con il server prima di ogni utilizzo. Dovrebbero essere risposte pubbliche che vuoi convalidare ogni volta (ad esempio la home page di un sito web di notizie, anche se in questo caso un tempo di memorizzazione nella cache molto breve può migliorare le prestazioni e scaricare il lavoro dai server principali).

Se vuoi saperne di più sulle opzioni Cache-control, questo diagramma di flusso è molto utile.

Impatto di bfcache in numeri

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

Ecco un video che confronta il sito web con e senza la cache bfcache. Puoi vedere che il sito web con la cache bfcache abilitata si carica molto più velocemente durante la navigazione a ritroso o in avanti.

È molto promettente il fatto che il gruppo con bfcache abilitato abbia registrato 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 suo test A/B bfcache. Ulteriori informazioni sono disponibili nell'articolo del case study.

Metriche	% di incremento (dispositivo mobile)	% incremento (computer)
Percentuale di hit della cache bf	+54,03 punti (0,04% → 54,07%)	+47,28 punti (0,02% → 47,30%)
Visualizzazioni di pagina	+2,26%	+0,65%
Entrate pubblicitarie	+9,0%	+0,6%

Quando le navigazioni avanti/indietro tra le pagine diventano istantanee con bfcache, gli utenti tendono a rimanere sulle pagine più a lungo, aumentando così le visualizzazioni degli annunci e le entrate pubblicitarie.

bfcache migliora l'esperienza utente fluida sul sito web

Quando le pagine si caricano all'istante, la navigazione è più fluida.

In 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 bfcache, quando gli utenti terminavano la lettura di un articolo (passaggio 2), dovevano attendere il ricaricamento della pagina dell'elenco di articoli. Questo potrebbe essere un fattore di attrito per gli utenti che vogliono semplicemente tornare all'elenco di articoli per scegliere un altro articolo da leggere.

Un'altra fonte di attrito durante la navigazione a ritroso era la posizione di scorrimento. In pratica, il browser tenta di ripristinare la posizione di scorrimento quando si verifica una navigazione a ritroso. Tuttavia, a causa di annunci aggiunti dinamicamente o di altre modifiche al layout, la posizione di scorrimento viene spesso ripristinata in modo errato, il che potrebbe portare gli utenti a perdere l'orientamento o persino ad abbandonare la pagina. Questo non rappresenta mai un problema quando la navigazione a ritroso si basa su bfcache: la posizione di scorrimento viene ripristinata immediatamente e correttamente.

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

Ora, con bfcache, le difficoltà nel percorso dell'utente sono state eliminate: gli utenti possono tornare immediatamente alla pagina dell'elenco di articoli e scegliere un altro articolo da leggere senza dover attendere il caricamento della pagina.

Lo stesso accade quando gli utenti passano direttamente da un articolo all'altro e viceversa:

Un'immagine animata che mostra il flusso di navigazione a ritroso da un articolo alla pagina della scheda dell'articolo con e senza bfcache. Con bfcache, la navigazione a ritroso non è solo più veloce, ma la posizione di scorrimento viene mantenuta con precisione. Senza bfcache, non è possibile fornire queste garanzie.

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 nel sito web quando le pagine venivano memorizzate nella cache con bfcache.
Aumento delle entrate: come risultato dell'aumento delle visualizzazioni di pagina per sessione, le impressioni degli annunci sono aumentate, il che ha portato a un aumento del 9% delle entrate sui dispositivi mobili rispetto al gruppo di test senza bfcache.

Conclusione

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

Il team di Chrome esamina continuamente i blocchi di bfcache, in particolare i due motivi elencati in questo articolo, in quanto sono i motivi più comuni per cui bfcache non viene utilizzato. In futuro, queste misure potrebbero non impedire l'utilizzo di bfcache, ma non è necessario attendere fino ad allora. Puoi trarre vantaggio dalla cache bf esaminando i blocchi della cache bf ed evitando questi pattern comuni e altri meno comuni.