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

Yuriko Hirota

Geri-ileri önbellek (veya bfcache), hızlı geri ve ileri gezinmeyi sağlayan bir tarayıcı optimizasyonudur. Özellikle çok sayıda geri ve ileri 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ı artırmak üzere büyük bir çaba sarf ederek sonuçta kullanıcı deneyimini ve iş anlamında önemli iyileşmeler sağladı. Özellikle, yaptıkları A/B testinin sonuçları, bfcache kullanan sayfaların reklam gelirinde% 9 artış sağladığını gösterdi.

Bu örnek olayda, Yahoo! JAPAN News, bfcache'i engelleyenleri ve bfcache'ın kullanıcı deneyimini nasıl büyük ölçüde iyileştirdiğini kaldırdı.

Bfcache için engelleyicileri kaldırma

bfcache Chrome 86'dan bu yana kullanılmakta olup tüm modern tarayıcılarda da kullanılabilmektedir. Ancak, bfcache'den tam olarak yararlanmak için web sitesindeki potansiyel engelleyicileri kaldırmak gerekir. Yahoo! JAPAN Haberlerle ilgili şu şekilde karşılaşılmıştır:

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

Chrome Geliştirici Araçları > Uygulamalar > Geri-ileri Önbellek'e (diğer ayrıntılar) giderek veya alandaki gerçek kullanıma dayalı olarak engelleyicilerin daha kapsamlı bir görünümünü elde etmek için notRestoredReasons API'yi kullanarak web sitenizin hangi ana engelleri içerdiğini kontrol edebilirsiniz.

Yahoo! JAPAN News, engelleyicileri 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 permission-policy: unload Chrome 115'te kullanıma sunulmuştur. Chrome, unload işleyicilerini de kademeli olarak kullanımdan kaldırmayı planlamaktadır.
Cache-control: no-store (veya kısaca CCNS): no-store olan Cache-control üstbilgisinin no-cache olarak değiştirilmesi bfcache'i etkinleştirebilir. Chrome, belirli durumlarda no-store üstbilgisi olsa bile bfcache için önbelleğe almayı planlamayı da planlamaktadır.

CCNS, hiçbir koşulda önbelleğe alınmaması gereken sayfalar için tasarlanmıştır. Bu durumda, CCNS kullanan sayfaların CDN uç sunucuları ve yerel önbellekler dahil herhangi bir önbelleğe alma teknolojisinden yararlanamayacağına dikkat edin.

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

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

Cache-control seçenekleri hakkında daha fazla bilgi edinmek istiyorsanız bu akış şeması size yardımcı olabilir.

Bfcache'ın sayılara etkisi

Bfcache'ın etkisini ölçmek için, Yahoo! JAPAN News, 2 hafta boyunca sayfalarının bfcache düzeltmelerini içeren bir sürümünü bir gruba, sayfaları bfcache için uygun olmayan bir sürümünü ise bir başka gruba sundu. 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 başka hiçbir fark yoktur.

Burada, web sitesini bfcache ile ve bfcache olmadan karşılaştıran bir video gösterilmektedir. Bfcache etkinleştirilmiş olan bir web sitesinin geri veya ileri gezinme sırasında önemli ölçüde daha hızlı yüklendiğini görebilirsiniz.

Bfcache'ın etkin olduğu grubun, özellikle mobil cihazlarda sayfa görüntüleme sayısı ve reklam gelirinde önemli bir artış elde etmesi gerçekten umut verici.

Yahoo! JAPAN News'e göndermeleri için bfcache A/B testi gerçekleştirin. (Daha fazla bilgiyi kendi örnek olay makalesinde bulabilirsiniz.)

Metrikler	Artış yüzdesi (mobil)	Artış %'si (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 ani hale geldiğinde kullanıcılar sayfalarda daha uzun süre kalma eğilimindedir. Bu da reklam görüntüleme sayısını artırarak reklam gelirinin artmasına neden olur.

bfcache web sitesindeki sorunsuz kullanıcı deneyimini iyileştirdi

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

Yahoo! JAPAN Haberler'e yönelik olarak ana kullanıcı yolculuklarından biri şu şekildedir:

Makale listesine git
Okumak için bir makaleyi tıklayın
Makale listesine dön
Okumak için başka bir makaleyi tıklayın

Bfcache'den önce, kullanıcılar bir makaleyi okumayı bitirdiklerinde (2. adım), makale listesi sayfasının tekrar yüklenmesini beklemeleri gerekiyordu. Bu, makale listesine geri dönüp okuyacak başka bir makale seçmek isteyen kullanıcılar için bir engel unsuru olabilir.

Geriye doğru gezinme sırasında yaşanan diğer bir sorun kaynağı da kaydırma konumuydu. Pratikte tarayıcı, geriye doğru 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ış bir şekilde geri yüklenir. Bu da kullanıcıların yerlerini kaybetmelerine, hatta sayfadan ayrılmalarına neden olabilir. Geriye gezinme bfcache tarafından sağlandığında bu hiçbir zaman soruna neden olmaz: Kaydırma konumu hemen ve doğru bir şekilde geri yüklenir.

Bir makaleden makale liste sayfasına geri gitmeyi gösteren iki film şeridi. En üstte, bfcache ile işlenen işlemin 0,3 saniye sürmesi, alt kısmı ise 3,3 saniye süren bfcache olmadan gerçekleştirilen aynı işlemin film şerididir.

Artık bfcache ile kullanıcı yolculuğundaki sıkıntılar ortadan kalktı. Kullanıcılar, makale listesi sayfasının yüklenmesini beklemek zorunda kalmadan hemen makale listesi sayfasına geri dönüp okuyacak başka bir makale seçebilir.

Kullanıcılar bir makaleden doğrudan bir başka makaleye göz attıklarında da aynı şey gerçekleşir:

Bir makaleden makale listeleme sayfasına bfcache içeren ve içermeyen geri gezinme akışını gösteren animasyonlu resim. Bfcache ile geriye doğru gezinme yalnızca daha hızlı olmakla kalmaz, aynı zamanda kaydırma konumu da doğru bir şekilde korunur. Bfcache olmadan bu garantiler yapılamaz.

Özetle, Yahoo! Japan için bfcache kullanmanın faydaları JAPAN Haberler şunları içerir:

Sayfa görüntüleme sayısında artış: 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ının artmasıyla birlikte reklam gösterimi de arttı. Bu da, bfcache içermeyen test grubuna kıyasla mobil cihazlarda% 9 gelir artışıyla sonuçlandı.

Sonuç

Kısacası, bfcache yalnızca web sitenizi hızlı hale getirmekle kalmaz, aynı zamanda genel kullanıcı deneyimindeki sorunları azaltıp web sitenizdeki etkileşimi artırabilir.

Chrome ekibi sürekli olarak bfcache engelleyicilerini incelemektedir. Özellikle de bu makalede listelenen iki neden. Bunlar, bfcache'ın kullanılmamasının yaygın nedenleridir. Gelecekte bunlar bfcache kullanımını engellemeyebilir ancak bu tarihe kadar beklemeniz gerekmez. Bfcache engelleyicilerinize bakarak ve bu yaygın ve daha az yaygın olan diğer kalıplardan kaçınarak bfcache'den yararlanabilirsiniz.