Geri-ileri Önbellek Yahoo! JAPAN News, Mobil Cihazlarda Geliri% 9 Artırdı

Yuriko Hirota

Geri/ileri önbellek (veya bfcache), hızlı ileri ve geri gezinmeyi sağlayan bir tarayıcı optimizasyonudur. Bu özellik, özellikle de birçok web sitesi arasında gezinmeyi içeren web sitelerinde kullanıcıların göz atma deneyimini önemli ölçüde iyileştirir.
bfcache ile ilgili web.dev makalesi

Yahoo! Japonya'daki en popüler haber platformlarından biri olan JAPAN News, bfcache isabet oranını iyileştirmek için yoğun bir çaba gösterdi ve bunun sonucunda kullanıcı deneyiminde ve işletmede önemli iyileştirmeler elde etti. Daha açık belirtmek gerekirse, yaptıkları A/B testinin sonuçları, bfcache kullanan sayfalarda reklam gelirinde %9 artış olduğunu gösterdi.

Bu örnek olay incelemesinde, Yahoo! JAPAN News, bfcache için engellemeleri kaldırdı ve bfcache'in kullanıcı deneyimini nasıl büyük ölçüde iyileştirdiğini açıkladı.

bfcache için engelleyenleri kaldırma

bfcache, Chrome 86'dan beri kullanılabilmektedir ve tüm modern tarayıcılarda da kullanılabilir. Ancak bfcache'ten tam olarak yararlanmak için web sitenizdeki olası engelleyicileri kaldırmanız gerekir. Yahoo! JAPAN News'in karşılaştığı sorunlar:

unload işleyicilerinin kullanımı
Cache-control üstbilgilerinde no-store yönergesinin kullanılması

Web siteniz için hangi önemli engelleyicilerin bulunduğunu kontrol etmek üzere Chrome Geliştirici Araçları > Uygulamalar > Geri/ileri önbelleği'ne gidebilir (daha fazla bilgi) veya alandaki gerçek kullanıma dayalı olarak engelleyicilerle ilgili daha kapsamlı bir görünüm elde etmek için notRestoredReasons API'yi kullanabilirsiniz.

Yahoo! JAPAN News, engellemelerini kaldırdı:

İşleyicileri Kaldırın: unload etkinliği çok güvenilir olmadığı için unload etkinliği yerine pagehide etkinliğini kullanın. Ayrıca, web sitelerinin belirli kaynaklar için unload işleyicilerini güvenilir bir şekilde kaldırabilmesi amacıyla permission-policy: unload, Chrome 115'te kullanıma sunuldu. Chrome, unload işleyicileri için desteği kademeli olarak sonlandırmayı da planlıyor.
Cache-control: no-store (veya kısaca CCNS): Cache-control başlığını no-store yerine no-cache olarak değiştirerek bfcache'i etkinleştirebilirsiniz. Chrome, belirli durumlarda no-store üst bilgisi olsa bile bfcache için önbelleğe almaya başlamayı da planlıyor.

CCNS, hiçbir koşulda hiçbir zaman önbelleğe alınmaması gereken sayfalar için tasarlanmıştır. Bununla birlikte, CCNS içeren sayfaların CDN uç sunucuları ve yerel önbellekler dahil olmak üzere hiçbir önbelleğe alma teknolojisinden yararlanamayacağı da unutulmamalıdır.

CCNS başlığınız varsa bu, web siteniz için doğru Cache-control stratejilerinin neler olduğunu tartışmak için mükemmel bir fırsattır. no-store ile no-cache arasındaki temel farklar aşağıda belirtilmiştir.

`Cache-control: no-store`	`Cache-control: no-cache`
Yanıtın önbelleklerde depolanmasına izin verilmiyor. Sonuç olarak, yanıt her istekte eksiksiz olarak getirilir. Bu, gizli yanıtlar için kullanılmalıdır.	Yanıtın, her kullanımdan önce sunucuyla yeniden doğrulandığı sürece önbelleğe kaydedilmesine izin verilir. Bu, her seferinde yeniden doğrulanmasını istediğiniz herkese açık yanıtlar olmalıdır (örneğin, bir haber web sitesinin ana sayfası; ancak çok kısa bir önbelleğe alma süresi bile performansı artırabilir ve ana sunuculardan iş yükünü artırabilir).

Cache-control seçenekleri hakkında daha fazla bilgi edinmek istiyorsanız bu akış şeması çok faydalıdır.

bfcache'in etkisi sayılarla

Bfcache'in etkisini ölçmek için Yahoo! JAPAN News, 2 hafta boyunca bir A/B testi yaptı. Bu testte, sayfalarının bfcache düzeltmelerini içeren bir sürümünü bir gruba, bfcache için uygun olmayan sayfalar içeren bir sürümünü ise başka bir gruba yayınladı. Testin anlamlı sonuçlar elde edebilmesi için önemli miktarda trafiğe sahip URL yollarını seçtiler. İki sürüm arasında görsel veya işlevsel olarak başka hiçbir fark yoktu.

Web sitesinin bfcache ile ve bfcache olmadan karşılaştırmasını gösteren bir videoyu burada bulabilirsiniz. Bfcache'in etkin olduğu web sitesinin, geri veya ileri gezinme sırasında önemli ölçüde daha hızlı yüklendiğini görebilirsiniz.

Ancak bfcache'nin etkinleştirildiği grubun özellikle mobil cihazlarda sayfa görüntüleme sayısında ve reklam gelirinde önemli bir artış elde etmesi gerçekten umut verici.

Yahoo! tarafından gözlemlenen etkiyle ilgili ayrıntıları aşağıda bulabilirsiniz. JAPAN News'in bfcache A/B testi. (Daha fazla bilgiyi örnek olay makalelerinde bulabilirsiniz).

Metrikler	Artış yüzdesi (mobil)	Artış yüzdesi (masaüstü)
bfcache isabet oranı	+54,03 puan (%0,04 → %54,07)	+47,28 puan (%0,02 → %47,30)
Sayfa görüntülemeleri	+%2,26	+%0,65
Reklam geliri	+%9,0	+%0,6

Bfcache ile sayfalar arasında geri-ileri gezinmeler anlık hale geldiğinde, kullanıcılar sayfalarda daha uzun süre kalma eğilimi gösterir. Bu da reklam görüntülemelerini artırarak reklam gelirinin artmasına yol açar.

bfcache, web sitesinde sorunsuz bir kullanıcı deneyimi sunar

Sayfalar anında yüklendiğinde gezinme daha sorunsuz olur.

Yahoo! JAPAN News'in önemli kullanıcı yolculuklarından biri aşağıdaki gibidir:

Makale listesine gidin
Okumak istediğiniz makaleyi tıklayın
Makale listesine geri dön
Okumak için başka bir makaleyi tıklayın

bfcache'den önce kullanıcılar bir makaleyi okumayı bitirdiğinde (2. adım), makale listesi sayfasının tekrar yüklenmesini beklemek zorunda kalıyordu. Bu durum, okumak için başka bir makale seçmek üzere makale listesine geri dönmek isteyen kullanıcılar için can sıkıcı olabilir.

Geriye doğru gezinme sırasındaki bir diğer sorun kaynağı da kaydırma konumuydu. Uygulamada, tarayıcı geri gezinme yapıldığında kaydırma konumunu geri yüklemeye çalışır. Ancak dinamik olarak eklenen reklamlar veya diğer düzen değişiklikleri nedeniyle kaydırma konumu genellikle yanlış şekilde geri yüklenir. Bu da kullanıcıların yönünü kaybetmesine veya hatta sayfayı terk etmesine neden olabilir. Geriye gezinme bfcache tarafından desteklendiğinde bu hiçbir zaman soruna yol açmaz: Kaydırma konumu hemen ve doğru bir şekilde geri yüklenir.

Bir makaleden makale girişi sayfasına geri gitme işleminin iki film şeridi. Üstteki resim, bfcache ile işlenen sürecin 0,3 saniye süren film şerididir. Alttaki resim ise aynı sürecin bfcache olmadan işlenmesinin 3,3 saniye sürdüğünü gösterir.

bfcache sayesinde kullanıcı yolculuğundaki aksaklıklar ortadan kalktı. Kullanıcılar artık makale listesi sayfasının yüklenmesini beklemek zorunda kalmadan anında makale listesi sayfasına geri dönebilir ve okumak için başka bir makale seçebilir.

Kullanıcılar bir makaleden doğrudan diğerine gidip geri döndüğünde de aynı durum söz konusudur:

Bir makaleden makale listeleme sayfasına geri gitme akışını bfcache ile ve bfcache olmadan gösteren animasyonlu resim. Bfcache ile geriye doğru gezinme yalnızca daha hızlı değil, aynı zamanda kaydırma konumu da doğru şekilde korunur. bfcache olmadan bu garantiler verilemeyecektir.

Özetlemek gerekirse, Yahoo! JAPAN News'e şunlar dahildir:

Artan sayfa görüntülemeleri: Sayfalar bfcache ile önbelleğe alındığında kullanıcıların web sitesinde gezinme olasılığı daha yüksekti.
Artan gelir: Oturum başına sayfa görüntüleme sayısı arttığı için reklam gösterimi de arttı. Bu da bfcache'i kullanmayan test grubuna kıyasla mobilde gelirde %9 artış sağladı.

Sonuç

Özetlemek gerekirse bfcache, yalnızca web sitenizi anında sunmakla kalmaz, genel kullanıcı deneyimindeki sürtünmeyi azaltabilir ve web sitenizdeki etkileşimi artırabilir.

Chrome ekibi, bfcache engelleyicilerini sürekli olarak inceliyor. Özellikle de bfcache'in kullanılmamasının yaygın nedenleri olduğu için bu makalede listelenen iki nedeni inceliyor. Bu sorunlar gelecekte bfcache kullanımını engellemeyebilir ancak bu zamana kadar beklemek gerekmez. bfcache engelleyicilerinize bakarak ve bu yaygın ve daha az yaygın olan kalıplardan kaçınarak bfcache'ten yararlanabilirsiniz.