Hyvä mağazasında Cloudflare ile güvenli tam sayfa önbellekleme

Hızlı bir tema işe yarar, ama önbelleğe alınmış bir sayfa daha çok işe yarar. En hızlı sunucu yanıtı, PHP'ye hiç ulaşmayan yanıttır.

Hyvä mağazaları önbelleklemeye çok uygundur; çünkü HTML yalındır ve kişisel veriler ayrı yüklenir. Ancak bu, her önbellek kuralını güvenli yapmaz.

Bu yazıda, önünde Cloudflare bulunan bir Hyvä mağazasında tam sayfa önbelleklemeye nasıl yaklaştığımızı ve gördüğümüz hataları anlatıyoruz.

İki önbellek katmanı, iki ayrı görev

Ziyaretçi ile PHP arasında genellikle iki katman bulunur:

• Magento’nun tam sayfa önbelleği. Magento, oluşturulmuş sayfaları saklar ve uygulamanın tamamını çalıştırmadan sunar. Önbellek altyapısı olarak Redis veya Valkey kullanıyoruz. Varnish de yaygın bir seçenektir.
• CDN. Cloudflare sunucunun önünde durur, TLS bağlantısını ziyaretçiye yakın bir noktada sonlandırır ve statik dosyaları önbelleğe alır.

Magento’nun önbelleği mağaza görünümlerini, para birimlerini ve müşteri gruplarını bilir. Siz söylemedikçe Cloudflare bunları bilmez.

Bu yüzden temel katman Magento’nun tam sayfa önbelleğidir; HTML’in uçta önbelleğe alınması ise bunun üzerine eklenen isteğe bağlı bir adımdır.

Hyvä önbelleklemeyi neden kolaylaştırır

Önbelleğe alınmış bir sayfa, onu alan herkes için aynı görünmelidir. Mini sepet veya müşteri adı gibi kişisel her şey sonradan eklenmelidir.

Magento bunu, müşteri bölümleri (customer sections) olarak da bilinen kişisel içerikle çözer. Luma bunları Knockout ve RequireJS üzerinden yükler.

Hyvä aynı bölüm verilerini kendi küçük JavaScript koduyla yükler ve ardından bir private-content-loaded olayı tetikler. Alpine.js bileşenleri bu olayı dinler ve kişisel bölümleri doldurur.

<div x-data="{ count: 0 }"
     @private-content-loaded.window="count = $event.detail.data.cart?.summary_count || 0">
    <span x-text="count"></span>
</div>

Sonuç: bütünüyle önbelleğe alınabilen bir sayfa ve ardından kişisel bölümler için yapılan hafif bir istek.

Özel şablonlar bu kalıba uymalıdır. Bir geliştirici müşteri verisini doğrudan bir PHTML şablonuna yazdırırsa o blok önbelleği bozar ya da daha kötüsü, bir müşterinin verisini başka bir müşteriye gösterir.

Cloudflare'in her zaman önbelleğe alması gerekenler

Statik dosyalar ve medya işin kolay kısmıdır; en az riskle en büyük kazancı sağlar.

• Şu klasördeki statik içerik: pub/static. Canlı modda (production mode) adresler dağıtılmış sürüm numarasını içerir; bu yüzden uzun önbellek süreleri kullanabilirsiniz.
• Şu klasördeki ürün ve tema görselleri: pub/media. Bunları uzun süre önbellekte tutun ve tam bir görsel yeniden boyutlandırmasından sonra temizleyin.
• Yazı tipleri. Kendi sunucunuzda barındırdığınız yazı tipleri statik içeriğin parçasıdır ve onunla birlikte önbelleğe alınır.

Bir Hyvä mağazasında bu, sayfanın yaptığı isteklerin büyük bölümünü kapsar; çünkü Hyvä sayfası zaten görece az istek yapar.

HTML'i uçta (edge) güvenle önbelleğe almak

Cloudflare varsayılan olarak HTML'i önbelleğe almaz. Bunu önbellek kurallarıyla açabilirsiniz, ancak o zaman normalde Magento'nun üstlendiği sorumlulukları siz devralırsınız.

Bu yolu seçerseniz, en azından şu kurallar şarttır:

• Kişisel veya işlemsel her şey için bypass. Sepet, ödeme sayfası, müşteri hesabı, istek listesi, yönetim paneli, REST ve GraphQL uç noktaları ile müşteri bölümü istekleri asla uçtan sunulmamalıdır.
• Ziyaretçinin bağlamı farklıysa bypass. Magento, X-Magento-Vary çerezini bağlam varsayılandan farklı olduğunda ayarlar; örneğin oturum açıldığında ya da başka bir para birimi kullanıldığında. Bu çerezi taşıyan istekler kaynak sunucuya gitmelidir.
• Yalnızca GET isteklerini önbelleğe alın ve yalnızca başarılı yanıt dönenleri.
• Mağaza görünümlerini ayrı tutun. Diller aynı alan adını paylaşıyorsa, adres mağaza görünümünü açıkça belirtmelidir; aksi halde bir dildeki sayfalar diğer dildeki ziyaretçilere sunulur.
• HTML için kısa süreler. Fiyatlar ve stoklar değişir. Uçtaki kısa önbellek süresi, bir temizleme atlandığında oluşacak zararı sınırlar.

Bu kuralları sürdürmek size fazla geliyorsa HTML’i uç önbelleğin dışında tutun. İyi ayarlanmış bir sunucuda Magento’nun kendi önbelleği zaten hızlıdır; işin büyük kısmını da uçtaki statik dosyalar üstlenir.

Önbellek temizleme: herkesin unuttuğu kısım

Magento, Cloudflare önbelleğini kendiliğinden temizlemez. Eklediğiniz her önbelleğin ona uygun bir temizleme rutini olmalıdır.

• Her dağıtımdan sonra Magento önbelleğini temizleyin, Cloudflare önbelleğini boşaltın ve ardından önemli sayfaları ön ısıtın.
• Tam bir görsel yeniden boyutlandırmasından sonra alan adı bazında temizleyin. Bir keresinde görseller, yeniden boyutlandırma önbelleği oluşmadan CDN'e alınmıştı ve biz temizleyene kadar CDN eski yanıtı sunmaya devam etti.
• Fiyat veya stok değişikliklerinden sonra etkilenen HTML'in süresinin dolmasını sağlayın; ya kısa önbellek süreleriyle ya da hedefli bir temizlemeyle.

Dağıtım adımlarımızı şu yazıda anlatıyoruz: Hyvä mağazalarında canlı mod ve dağıtım.

Makul bir varsayılan kurulum

Çoğu Hyvä mağazasında hızlı ve hata yapması zor bir kurulumla başlıyoruz; HTML'in uçta önbelleğe alınmasını ancak net bir gerekçe olduğunda ekliyoruz.

• Magento tam sayfa önbelleği açık; altyapı olarak Redis veya Valkey ve tüm kataloğa yetecek kadar bellek.
• Statik içerik ve medya uçta önbellekte; uzun sürelerle.
• HTML Cloudflare üzerinden geçiriliyor ve Magento önbelleğine iletiliyor; böylece mağaza görünümleri, para birimleri ve müşteri grupları Magento tarafından yönetiliyor.
• Her temizlemeden sonra ön ısıtma (warm-up) ana sayfa, ana kategoriler ve en çok satan ürünler için.
• Önbellek isabet oranlarının izlenmesi hem Magento'da hem Cloudflare'de; böylece bozuk bir kural hemen fark edilir.

Bu yapı, uçtan yanlış sayfa sunma riskine girmeden çoğu ziyaretçi için ilk bayta kadar geçen süreyi (TTFB) düşük tutar.

Özel eklentiler de kontrol edilmeli. Sık kullanılan bir blokta önbelleği kapatan ya da her yanıta çerez ekleyen bir modül, önbellekli bir mağazayı sessizce önbelleksiz hale getirebilir.

Karşılaştığımız tuzaklar

• Uçta yok sayılan başlık (header) tabanlı mantık. Cloudflare’in giriş seviyesi planı görsel önbelleğini Accept başlığına göre ayırmadığı için nginx’teki WebP eşleştirmemiz hiçbir işe yaramadı. Bunun yerine bu mantığı Magento’ya taşıdık; ayrıntılar şu yazıda: Cloudflare arkasında WebP görsel sunmak.
• Testleri etkileyen güvenlik kuralları. nginx yapılandırmamız bot kullanıcı aracılarını (user agent) engelliyor. Kendini tanıtan test araçları 403 alıyor; bu da hızlı bir sayfa gibi görünüyor ama gerçek bir sonuç değil.
• Gerçek adres yerine kaynak sunucuyu test etmek. Önbelleği temizleyip ısıttıktan sonra her zaman CDN arkasındaki herkese açık adresi test edin.

SSS

Bir Hyvä mağazası için Varnish gerekli mi?

Şart değil. Magento’nun yerleşik tam sayfa önbelleği, Redis veya Valkey ile birlikte, doğru boyutlandırılmış bir sunucuda iyi çalışır. Varnish de geçerli bir seçenektir, özellikle trafik yüksekse.

Tüm HTML'i Cloudflare'de önbelleğe almak güvenli mi?

Yalnızca kişisel sayfalar, oturum açmış ziyaretçiler ve diğer bağlamlar için sıkı bypass kuralları ve güvenilir bir temizleme rutini varsa. Bunlar yoksa HTML önbelleklemeyi Magento'da tutun.

Önbelleğe alınmış bir sayfada mini sepet neden hala istek yapıyor?

Bu bilinçli bir tasarım. Hyvä müşteri bölümlerini sayfadan sonra yükler; böylece HTML herkes için önbelleğe alınabilir ve yalnızca kişisel bölümler her ziyaretçi için ayrıca çekilir.

Önbellek, CDN ve temizleme rutinleriyle Hyvä için optimize edilmiş sunucuları şu hizmetimizin parçası olarak kuruyoruz: Hyvä paketlerimiz. Yalnızca hosting için şuna göz atın: Magento 2 hosting.