Geri-ileri önbellek, Yahoo! JAPAN News, mobilde gelirini% 9 artırdı

Yuriko Hirota
Yuriko Hirota
X

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 olası engelleyicileri kaldırmanız gerekir. Yahoo! JAPAN News'in karşılaştığı sorunlar:

  1. unload işleyicilerinin kullanımı.
  2. Cache-control üstbilgilerinde no-store yönergesi kullanılması.

Chrome Geliştirici Araçları > Uygulamalar > Geri/ileri önbelleği'ne giderek web sitenizdeki önemli engelleri kontrol edebilirsiniz. Alternatif olarak, alandaki gerçek kullanıma dayalı olarak engelleyiciler hakkında daha kapsamlı bir görünüm elde etmek için notRestoredReasons API'yi kullanabilirsiniz.

Yahoo! JAPAN News, engellemelerini kaldırdı:

CCNS, hiçbir koşulda asla ö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ğı 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 için cache-control akış diyagramını inceleyin.

Etkiyi göstermek için A/B testi

Bfcache'in etkisini ölçmek için Yahoo! JAPAN News iki hafta boyunca bir A/B testi yaptı. Sayfalarının bfcache düzeltmelerini içeren bir sürümünü bir gruba, bfcache için uygun olmayan sayfaların yer aldığı bir sürümünü ise başka bir gruba yayınladılar. Testin anlamlı sonuçlar elde etmesini sağlamak için önemli miktarda trafiğe sahip URL yollarını test ettiler. Sayfalar 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 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 olaylarında 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şmeye başladığında, kullanıcılar sayfalarda daha uzun süre kalma eğilimi gösterir. Bu da reklam görüntüleme sayısını artırarak reklam gelirinin artmasına neden olur.

Sorunsuz kullanıcı deneyimi

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

Yahoo! JAPAN News'de kullanıcıların en çok yaptığı işlemlerden biri birden fazla makale okumaktır:

  1. Makale listesini ziyaret edin.
  2. Okumak istediğiniz makaleyi tıklayın.
  3. İşlem tamamlandığında makale listesine dönün.
  4. Okumak için başka bir makaleyi tıklayın.

bfcache kullanılmadan önce, kullanıcılar bir makaleyi okumayı bitirdiğinde makale listesi sayfasının tekrar yüklenmesini beklemek zorunda kalıyordu. Bu durum, okumak için başka bir makale seçmek üzere listeye hızlıca 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 yanlış şekilde geri yüklenebilir. Bu durum, kullanıcıların kafasını karıştırır ve hatta sayfayı terk etmelerine neden olur.

Geri gezinme bfcache tarafından desteklendiğinde bu sorun çözülür: Kaydırma konumu hemen ve doğru şekilde geri yüklenir.

Geri gezinme işleminin iki film şeridi. Üstteki film şeridi, bfcache ile işlenir ve 0, 3 saniye sürer. Alttaki film şeridi ise aynı işlem bfcache olmadan işlenir ve 3, 3 saniye sürer.

Artık bfcache sayesinde 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 daha hızlıdır ve kaydırma konumu doğru şekilde korunur. bfcache olmadan bu iyileştirmelerin garantisi yoktur.

Kısaca, Yahoo! JAPAN News'e şunlar dahildir:

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

Bfcache'i hemen uygulayın

Ö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'in kullanılmamasının yaygın nedenleri olduğu için özellikle listelenen nedenler olmak üzere bfcache engelleyicilerini sürekli olarak inceliyor. Gelecekte bu değişiklikler bfcache kullanımını engellemeyebilir ancak o zamana kadar beklemeniz gerekmez. Şu anda bfcache engelleyicilerinize göz atarak ve bu yaygın (ve daha az yaygın olan diğer) kalıplardan kaçınarak bfcache'ten yararlanabilirsiniz.