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. Özellikle çok sayıda ileri geri gezinme 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 çalışma yürüttü 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 olayda, 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 potansiyel 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ırma: unload etkinliği çok güvenilir olmadığından 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 Permissions-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 başlığı olsa bile bfcache için önbelleğe almaya başlamayı da planlıyor.

CCNS, hiçbir koşulda ö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 önbelleğe depolanmasına izin verilmez. Sonuç olarak, yanıt her istekte tam 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 bu durumda bile çok kısa bir önbelleğe alma süresi performansı artırabilir ve ana sunuculardan iş yükünü azaltabilir).

Cache-control seçenekleri hakkında daha fazla bilgi edinmek istiyorsanız bu akış şemasını inceleyebilirsiniz.

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. 2 sürüm arasında görsel veya işlevsel başka 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.

En umut verici sonuç ise bfcache'in etkin olduğu grupta, özellikle mobil cihazlarda sayfa görüntüleme sayısında ve reklam gelirinde önemli bir artış elde edilmesidir.

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 gezinme anında gerçekleşir. Bu sayede kullanıcılar sayfalarda daha uzun süre kalır. Böylece reklam görüntülemeleri artar ve reklam geliri de artar.

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ı yolculuğu şu şekildedir:

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 kullanılmadan ö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. Geri gezinme bfcache tarafından desteklendiğinde bu durum hiçbir zaman sorun oluşturmaz: Kaydırma konumu hemen ve doğru şekilde geri yüklenir.

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

bfcache sayesinde artık kullanıcı yolculuğundaki aksaklıklar ortadan kalktı. Kullanıcılar, 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 başka bir makaleye ve geri geldiğinde de aynı şey olur:

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ığından 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. Gelecekte bu önlemler bfcache kullanımını engellemeyebilir ancak o zamana kadar beklemeniz gerekmez. bfcache engelleyicilerinize bakarak ve bu yaygın ve daha az yaygın olan kalıplardan kaçınarak bfcache'ten yararlanabilirsiniz.