Back-forward cache membantu Yahoo! JAPAN News meningkatkan pendapatan sebesar 9% di perangkat seluler

Yuriko Hirota
Yuriko Hirota
X LinkedIn

Back-forward cache (atau bfcache) adalah pengoptimalan browser yang memungkinkan navigasi mundur dan maju secara instan. Fitur ini meningkatkan pengalaman penjelajahan secara signifikan bagi pengguna, terutama untuk situs yang melibatkan banyak navigasi bolak-balik.

Artikel web.dev tentang bfcache

Yahoo! JAPAN News, salah satu platform berita paling populer di Jepang, melakukan upaya terpadu untuk meningkatkan rasio hit bfcache mereka dan mendapatkan peningkatan signifikan dalam pengalaman pengguna dan bisnis sebagai hasilnya. Secara khusus, hasil pengujian A/B yang mereka lakukan menunjukkan bahwa halaman yang menggunakan bfcache mengalami peningkatan pendapatan iklan sebesar 9%.

Studi kasus ini akan menjelaskan cara Yahoo! JAPAN News menghapus pemblokir untuk bfcache, dan bagaimana bfcache secara drastis meningkatkan pengalaman pengguna.

Menghapus pemblokir untuk bfcache

bfcache telah tersedia sejak Chrome 86, dan juga tersedia di semua browser modern. Namun, untuk memanfaatkan bfcache sepenuhnya, Anda harus menghapus potensi pemblokir di situs Anda. Beberapa pemblokir utama yang dihadapi Yahoo! Masalah yang dihadapi JAPAN News adalah:

  1. Penggunaan pengendali unload.
  2. Penggunaan perintah no-store pada header Cache-control.

Anda dapat memeriksa pemblokir utama di situs Anda dengan membuka Chrome DevTools > Applications > Back/forward Cache. Atau, Anda dapat menggunakan notRestoredReasons API untuk mendapatkan tampilan yang lebih komprehensif tentang pemblokir berdasarkan penggunaan sebenarnya di lapangan.

Berikut cara Yahoo! JAPAN News menghapus pemblokirnya:

CCNS ditujukan untuk halaman yang tidak boleh di-cache dalam keadaan apa pun. Namun, perlu diperhatikan bahwa halaman dengan CCNS tidak mendapatkan manfaat dari teknologi caching apa pun, termasuk server edge CDN dan cache lokal.

Jika Anda memiliki header CCNS, ini adalah peluang bagus untuk mendiskusikan strategi Cache-control yang tepat untuk situs Anda. Berikut perbedaan utama antara no-store dan no-cache.

Cache-control: no-store Cache-control: no-cache
  • Respons tidak diizinkan untuk disimpan dalam cache.
  • Akibatnya, respons diambil sepenuhnya pada setiap permintaan.
  • Ini harus digunakan untuk respons pribadi.
  • Respons diizinkan untuk disimpan dalam cache selama divalidasi ulang dengan server sebelum setiap penggunaan.
  • Ini harus berupa respons publik yang ingin Anda divalidasi ulang setiap saat (misalnya, halaman beranda situs berita - meskipun demikian, waktu caching yang sangat singkat dapat meningkatkan performa dan mengurangi beban kerja dari server utama).

Untuk mempelajari lebih lanjut opsi cache-control, tinjau diagram alur cache-control.

Pengujian A/B untuk menunjukkan dampak

Untuk mengukur dampak bfcache, Yahoo! JAPAN News melakukan pengujian A/B selama dua minggu. Mereka menayangkan versi halaman dengan perbaikan bfcache dalam satu grup dan versi dengan halaman yang tidak memenuhi syarat untuk bfcache ke grup lainnya. Mereka menguji jalur URL dengan traffic yang signifikan, untuk memastikan pengujian mencapai hasil yang bermakna. Tidak ada perbedaan visual atau fungsional lainnya di antara halaman.

Berikut video yang membandingkan situs dengan bfcache dan tanpa bfcache. Anda dapat melihat bahwa situs dengan bfcache yang diaktifkan dimuat jauh lebih cepat selama navigasi mundur atau maju.

Yang benar-benar menjanjikan adalah grup dengan bfcache yang diaktifkan mengalami peningkatan signifikan dalam tayangan halaman dan pendapatan iklan, terutama di perangkat seluler.

Berikut detail tentang dampak yang diamati oleh Yahoo! JAPAN News dengan pengujian A/B bfcache mereka. Informasi lebih lanjut dapat ditemukan dalam studi kasus mereka.

Metrik Peningkatan % (seluler) Peningkatan % (desktop)
rasio hit bfcache +54,03 poin (0,04% → 54,07%) +47,28 poin (0,02% → 47,30%)
Kunjungan halaman +2,26% +0,65%
Pendapatan iklan +9,0% +0,6%

Saat navigasi kembali/maju antarhalaman menjadi instan dengan bfcache, pengguna cenderung tetap berada di halaman lebih lama, sehingga meningkatkan penayangan iklan dan menghasilkan peningkatan pendapatan iklan.

Pengalaman pengguna yang lancar

Saat halaman dimuat secara instan, navigasi terasa lebih lancar.

Di Yahoo! JAPAN News, salah satu perjalanan pengguna utamanya adalah membaca beberapa artikel:

  1. Buka daftar artikel.
  2. Klik salah satu artikel untuk dibaca.
  3. Setelah selesai, kembali ke daftar artikel.
  4. Klik artikel lain untuk dibaca.

Sebelum bfcache, saat pengguna selesai membaca artikel, mereka harus menunggu halaman daftar artikel dimuat ulang. Hal ini dapat menjadi faktor penghambat bagi pengguna yang ingin kembali ke daftar dengan cepat untuk memilih artikel lain yang akan dibaca.

Sumber gesekan lain selama navigasi mundur adalah posisi scroll. Pada praktiknya, browser mencoba memulihkan posisi scroll saat navigasi mundur terjadi. Namun, karena iklan yang ditambahkan secara dinamis atau perubahan tata letak lainnya, posisi scroll dapat dipulihkan secara tidak benar. Hal ini menyebabkan pengguna bingung atau bahkan meninggalkan halaman.

Masalah ini teratasi saat navigasi mundur didukung oleh bfcache: posisi scroll segera dipulihkan dengan benar.

Dua filmstrip navigasi mundur. Bagian atas adalah filmstrip yang ditangani dengan bfcache, yang membutuhkan waktu 0,3 detik, sedangkan bagian bawah adalah proses yang sama yang ditangani tanpa bfcache, yang membutuhkan waktu 3,3 detik.

Dengan bfcache, hambatan dalam perjalanan pengguna kini tidak ada lagi. Pengguna dapat langsung kembali ke halaman daftar artikel dan memilih artikel lain untuk dibaca tanpa harus menunggu halaman daftar artikel dimuat.

Hal yang sama terjadi saat pengguna menjelajah dari satu artikel langsung ke artikel lain dan kembali:

Gambar animasi yang menampilkan alur navigasi mundur dari artikel ke halaman listingan artikel dengan dan tanpa bfcache.
Dengan bfcache, navigasi mundur lebih cepat dan posisi scroll dipertahankan secara akurat. Tanpa bfcache, peningkatan ini tidak dijamin.

Singkatnya, manfaat bfcache untuk Yahoo! JAPAN News mencakup:

  • Peningkatan tayangan halaman: Pengguna cenderung menavigasi dalam situs saat halaman di-cache dengan bfcache.
  • Peningkatan pendapatan: Sebagai hasil dari peningkatan tayangan halaman per sesi, tayangan iklan meningkat, yang menghasilkan peningkatan pendapatan sebesar 9% di perangkat seluler, dibandingkan dengan grup pengujian tanpa bfcache.

Menerapkan bfcache sekarang

Singkatnya, bfcache tidak hanya membuat situs Anda menjadi instan, tetapi juga dapat mengurangi gesekan dalam pengalaman pengguna secara keseluruhan dan meningkatkan engagement dalam situs Anda.

Tim Chrome terus-menerus memeriksa pemblokir bfcache, terutama alasan yang tercantum karena merupakan alasan umum bfcache tidak digunakan. Pada masa mendatang, hal ini mungkin tidak mencegah penggunaan bfcache, tetapi Anda tidak perlu menunggu hingga saat itu. Anda dapat memanfaatkan bfcache dengan melihat pemblokir bfcache Anda sekarang dan menghindari pola umum (dan pola lain yang kurang umum) ini.