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

Yuriko Hirota
Yuriko Hirota
X

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 di web.dev sulla cache 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 condotto hanno mostrato 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 ha spiegato in che modo 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:

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

Puoi controllare la presenza di blocchi principali sul tuo sito web andando a 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:

Il CCNS è destinato alle pagine che non devono mai essere memorizzate nella cache, in nessuna circostanza. Tuttavia, 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 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).

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

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 pagine con le correzioni di bfcache in un gruppo e una versione con pagine non idonee per bfcache in un altro. Hanno testato percorsi URL con traffico significativo per garantire che il test abbia ottenuto 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 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 test A/B di bfcache. Puoi trovare ulteriori informazioni nel relativo 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 la navigazione avanti/indietro tra le pagine diventa istantanea con bfcache, gli utenti tendono a rimanere sulle pagine più a lungo, aumentando così le visualizzazioni degli annunci e 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, prevede la lettura di più articoli:

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

Prima di bfcache, quando gli utenti terminavano la lettura di un articolo, dovevano attendere il nuovo caricamento della pagina dell'elenco di 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 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 può essere ripristinata in modo errato. Ciò genera confusione negli utenti o addirittura li porta ad abbandonare la pagina.

Questo problema viene risolto quando la navigazione a ritroso è basata su bfcache: la posizione di scorrimento viene ripristinata immediatamente e correttamente.

Due filmati di una navigazione a ritroso. La parte superiore è una sequenza di immagini gestita con bfcache, che richiede 0,3 secondi, mentre la parte inferiore è la stessa procedura gestita senza bfcache, che richiede 3,3 secondi.

Ora, con bfcache, i problemi nel percorso dell'utente non ci sono più. 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 è più veloce e la posizione di scorrimento viene mantenuta con precisione. Senza bfcache, questi miglioramenti non sono garantiti.

In breve, i vantaggi 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: a seguito dell'aumento delle visualizzazioni di pagina per sessione, le impressioni degli annunci sono aumentate, con un conseguente aumento delle entrate su mobile del 9% rispetto al gruppo di test senza bfcache.

Implementa subito la cache bfcache

In breve, bfcache non solo rende il tuo sito web istantaneo, ma può anche ridurre la frizione 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 motivi elencati perché sono motivi comuni per cui bfcache non viene utilizzato. In futuro, queste misure potrebbero non impedire l'utilizzo della cache back-forward, ma non è necessario attendere fino ad allora. Puoi trarre vantaggio da bfcache controllando i tuoi blocchi bfcache ora ed evitando questi pattern comuni (e altri meno comuni).