La cache back-forward ha aiutato Yahoo! JAPAN News aumenta le entrate del 9% sui dispositivi mobili

Yuriko Hirota
Yuriko Hirota
X LinkedIn

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, soprattutto per i siti web che prevedono molte navigazioni avanti e indietro.

Articolo di web.dev sulla cache back-forward

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

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

Rimozione dei blocchi per la bfcache

La bfcache è disponibile da Chrome 86 ed è disponibile anche su tutti i browser moderni. Tuttavia, per sfruttare appieno la bfcache è necessario rimuovere i potenziali blocchi sul proprio sito web. Alcuni dei principali ostacoli che Yahoo! I problemi riscontrati da JAPAN News sono stati:

  1. Utilizzo dei gestori unload.
  2. Utilizzo della direttiva no-store nelle intestazioni Cache-control.

Puoi verificare la presenza di blocchi principali sul tuo sito web andando su Chrome DevTools > Applicazioni > Cache indietro/avanti. In alternativa, puoi utilizzare l'API notRestoredReasons per ottenere una visione più completa dei blocchi in base all'utilizzo effettivo sul campo.

Ecco come Yahoo! JAPAN News ha rimosso i blocchi:

CCNS è destinato alle pagine che non devono mai essere memorizzate nella cache, in nessuna circostanza. Ciò comporta l'avvertenza che le pagine con CCNS non beneficiano 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 quali sono le 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 a condizione che venga nuovamente convalidata con il server prima di ogni utilizzo.
  • Queste devono 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).

Per scoprire di più sulle opzioni di cache-control, consulta il cache-control diagramma di flusso.

Test A/B per dimostrare l'impatto

Per misurare l'impatto della cache back-forward, Yahoo! JAPAN News ha condotto un test A/B per due settimane. Hanno pubblicato una versione delle loro pagine con le correzioni della cache back-forward in un gruppo e una versione con pagine non idonee per la cache back-forward in un altro. Hanno testato i percorsi URL con un traffico significativo per assicurarsi che il test ottenesse risultati significativi. Non sono state riscontrate altre differenze visive o funzionali tra le pagine.

Ecco un video che confronta il sito web con e senza cache back-forward. Puoi notare che il sito web con bfcache abilitata viene caricato molto più rapidamente durante una navigazione indietro o avanti.

Ciò che è davvero promettente è che il gruppo con bfcache abilitato ha registrato un aumento significativo delle visualizzazioni di pagina e delle entrate pubblicitarie, soprattutto sui dispositivi mobili.

Di seguito sono riportati i dettagli sull'impatto osservato da Yahoo!. JAPAN News con il test A/B della bfcache. Per ulteriori informazioni, consulta il case study.

Metriche Incremento % (dispositivi mobili) Incremento % (computer)
Percentuale di successo della bfcache +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 la navigazione avanti/indietro tra le pagine diventa istantanea con la bfcache, gli utenti tendono a rimanere più a lungo sulle pagine, aumentando così le visualizzazioni di annunci e, di conseguenza, le entrate pubblicitarie.

Esperienza utente fluida

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

In Yahoo! JAPAN News, uno dei principali percorsi degli utenti è la lettura di più articoli:

  1. Vai all'elenco degli articoli.
  2. Fai clic su un articolo da leggere.
  3. Al termine, torna all'elenco degli articoli.
  4. Fai clic su un altro articolo da leggere.

Prima della bfcache, quando gli utenti finivano di leggere un articolo, dovevano attendere il ricaricamento della pagina dell'elenco degli articoli. Questo potrebbe essere un fattore di attrito per gli utenti che vogliono tornare rapidamente all'elenco per scegliere un altro articolo da leggere.

Un'altra fonte di attrito durante la navigazione all'indietro era la posizione di scorrimento. In pratica, il browser tenta di ripristinare la posizione di scorrimento quando si verifica una navigazione all'indietro. Tuttavia, a causa di annunci aggiunti dinamicamente o di altre modifiche al layout, la posizione di scorrimento può essere ripristinata in modo errato. Ciò confonde l'utente o lo porta ad abbandonare la pagina.

Questo problema viene risolto quando la navigazione all'indietro è supportata dalla bfcache: la posizione di scorrimento viene ripristinata immediatamente e correttamente.

Due strisce di pellicola di una navigazione all'indietro. La parte superiore è una striscia di pellicola gestita con la bfcache, che impiega 0,3 secondi, mentre la parte inferiore mostra lo stesso processo gestito senza la bfcache, che impiega 3,3 secondi.

Ora, con la bfcache, l'attrito nel percorso dell'utente non esiste più. Gli utenti possono tornare immediatamente alla pagina dell'elenco degli articoli e sceglierne un altro da leggere senza dover attendere il caricamento della pagina.

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

Un'immagine animata che mostra il flusso di navigazione all'indietro da un articolo alla pagina di elenco degli articoli con e senza bfcache.
Con la cache back-forward, la navigazione all'indietro è più veloce e la posizione di scorrimento viene mantenuta con precisione. Senza la bfcache, questi miglioramenti non sono garantiti.

In breve, i vantaggi della bfcache per Yahoo! JAPAN News include:

  • Aumento delle visualizzazioni di pagina: gli utenti avevano maggiori probabilità di navigare all'interno del sito web quando le pagine venivano memorizzate nella cache con bfcache.
  • Aumento delle entrate: a seguito dell'aumento delle visualizzazioni di pagina per sessione, le impressioni degli annunci sono aumentate, il che ha comportato un incremento del 9% delle entrate su mobile rispetto al gruppo di test senza bfcache.

Implementa la bfcache ora

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

Il team di Chrome esamina continuamente i blocchi della bfcache, in particolare i motivi elencati, in quanto sono motivi comuni per cui la bfcache non viene utilizzata. In futuro, questi potrebbero non impedire l'utilizzo della cache back-forward, ma non è necessario attendere fino ad allora. Puoi trarre vantaggio dalla bfcache esaminando ora i blocchi della bfcache ed evitando questi pattern comuni (e altri meno comuni).