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

Yuriko Hirota
Yuriko Hirota
X

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 bersama untuk meningkatkan rasio hit bfcache mereka dan hasilnya, mereka mendapatkan peningkatan pengalaman pengguna dan bisnis yang signifikan. 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 digunakan Yahoo! JAPAN News adalah:

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

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

Berikut cara Yahoo! JAPAN News telah menghapus pemblokirnya:

CCNS ditujukan untuk halaman yang tidak boleh di-cache, dalam keadaan apa pun. Hal ini disertai dengan peringatan bahwa halaman dengan CCNS tidak mendapatkan manfaat dari teknologi cache, 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 adalah 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 validasi ulang setiap saat (misalnya, halaman beranda situs berita - meskipun waktu caching yang sangat singkat dapat meningkatkan performa dan mengurangi beban kerja dari server utama).

Untuk mempelajari opsi cache-control lebih lanjut, tinjau diagram alir 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 di satu grup dan versi dengan halaman yang tidak memenuhi syarat untuk bfcache ke grup lain. Mereka menguji jalur URL dengan traffic yang signifikan, untuk memastikan pengujian mencapai hasil yang berarti. Tidak ada perbedaan visual atau fungsional lainnya antara kedua halaman tersebut.

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

Yang sangat menjanjikan adalah grup yang mengaktifkan bfcache mengalami peningkatan jumlah kunjungan halaman dan pendapatan iklan yang signifikan, terutama di perangkat seluler.

Berikut detail tentang dampak yang diamati oleh Yahoo! JAPAN News dengan pengujian A/B bfcache mereka. Informasi selengkapnya dapat ditemukan di studi kasusnya.

Metrik Peningkatan % (perangkat 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 di antara halaman menjadi instan dengan bfcache, pengguna cenderung tetap berada di halaman lebih lama, sehingga meningkatkan penayangan iklan, yang menyebabkan peningkatan pendapatan iklan.

Pengalaman pengguna yang lancar

Saat halaman dimuat dengan cepat, navigasi akan terasa lebih lancar.

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

  1. Buka daftar artikel.
  2. Klik 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 lagi. Hal ini dapat menjadi faktor hambatan bagi pengguna yang ingin kembali ke daftar dengan cepat untuk memilih artikel lain yang akan dibaca.

Sumber hambatan lain selama navigasi mundur adalah posisi scroll. Dalam 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 dengan tidak benar. Hal ini menyebabkan kebingungan pengguna atau bahkan mereka meninggalkan halaman.

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

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

Sekarang dengan bfcache, hambatan dalam perjalanan pengguna akan hilang. 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 menjelajahi 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! Berita JAPAN mencakup:

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

Terapkan bfcache sekarang

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

Tim Chrome terus memeriksa pemblokir bfcache, terutama alasan yang tercantum karena merupakan alasan umum bfcache tidak digunakan. Di 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 sekarang dan menghindari pola umum ini (dan pola lainnya yang kurang umum).