Ön Uç Önbellekleme Stratejileri: HTTP Önbelleği ve Service Worker Önbelleği

Web geliştirme dünyasında, web sitesi performansını optimize etmek büyük önem taşır. Yavaş bir web sitesi, kullanıcıların hayal kırıklığına uğramasına, daha yüksek hemen çıkma oranlarına ve nihayetinde işletmeniz üzerinde olumsuz bir etkiye yol açabilir. Daha önce alınmış kaynakları depolama ve yeniden kullanma tekniği olan önbellekleme, web sitesi hızını artırmada ve sunucu yükünü azaltmada hayati bir rol oynar. Bu makale, iki temel ön uç önbellekleme stratejisine kapsamlı bir genel bakış sunmaktadır: HTTP önbellekleme ve Service Worker önbellekleme.

Önbellekleme Temellerini Anlamak

Önbellekleme, HTML, CSS, JavaScript, resimler ve diğer varlıklar gibi kaynakların kopyalarını kullanıcıya daha yakın bir yerde saklamayı içerir. Bir kullanıcı bir kaynak talep ettiğinde, tarayıcı veya bir önbellekleme aracısı önce önbelleğe alınmış bir kopyanın mevcut olup olmadığını kontrol eder. Eğer mevcutsa ("önbellek isabeti"), kaynak önbellekten sunulur ve kaynak sunucusuna bir yolculuk yapmaktan kaçınılır. Bu, gecikmeyi önemli ölçüde azaltır ve yükleme sürelerini iyileştirir.

Tarayıcı önbelleği, proxy önbelleği ve sunucu tarafı önbelleği dahil olmak üzere çeşitli önbellekleme seviyeleri vardır. Bu makale, özellikle tarayıcının yerleşik HTTP önbelleğinden ve daha gelişmiş Service Worker önbelleğinden nasıl yararlanılacağına odaklanarak ön uç önbelleklemeye odaklanmaktadır.

HTTP Önbellekleme: Tarayıcı Yeteneklerinden Yararlanma

HTTP önbellekleme, tarayıcının kaynakları depolamak ve geri almak için yerleşik mekanizmasıdır. Bir isteğe yanıt olarak sunucu tarafından gönderilen HTTP başlıkları tarafından kontrol edilir. Bu başlıklar, tarayıcıya bir kaynağın ne kadar süreyle önbelleğe alınacağı ve hangi koşullar altında geçerli kabul edilmesi gerektiği konusunda talimatlar verir.

Önemli HTTP Önbellek Başlıkları

• Cache-Control: Bu, HTTP önbelleklemesini kontrol etmek için en önemli başlıktır. Aşağıdakiler gibi çeşitli yönergeleri belirtmenize olanak tanır:
• max-age=saniye: Bir kaynağın taze kabul edildiği maksimum süreyi belirtir. Bu süreden sonra, tarayıcının önbelleği sunucuyla yeniden doğrulaması gerekir. Örnek: Cache-Control: max-age=3600 (1 saat boyunca önbelleğe al).
• s-maxage=saniye: max-age'e benzer, ancak özellikle CDN'ler gibi paylaşılan önbellekler için geçerlidir. Örnek: Cache-Control: max-age=3600, s-maxage=86400 (tarayıcıda 1 saat, CDN'de 1 gün boyunca önbelleğe al).
• public: Yanıtın, paylaşılan önbellekler de dahil olmak üzere herhangi bir önbellek tarafından önbelleğe alınabileceğini belirtir.
• private: Yanıtın yalnızca tarayıcı tarafından önbelleğe alınabileceğini ve paylaşılan önbellekler tarafından alınamayacağını belirtir. Kullanıcıya özel veriler için kullanışlıdır.
• no-cache: Tarayıcıyı, hala taze olsa bile kullanmadan önce önbelleği sunucuyla yeniden doğrulamaya zorlar.
• no-store: Tarayıcının yanıtı hiçbir şekilde önbelleğe almasını engeller.
• Expires: Kaynağın süresinin dolduğu mutlak bir tarih ve saati belirten daha eski bir başlıktır. Genellikle her ikisi de mevcutsa Cache-Control, Expires'in yerini alır. Örnek: Expires: Wed, 21 Oct 2024 07:28:00 GMT
• ETag: Bir kaynağın belirli bir sürümü için benzersiz bir tanımlayıcıdır. Tarayıcı, yeniden doğrulama sırasında If-None-Match istek başlığında ETag'i gönderir. Kaynak değişmemişse, sunucu 304 Not Modified yanıtı döndürerek tarayıcının önbelleğe alınmış sürümü kullanabileceğini belirtir.
• Last-Modified: Kaynağın en son ne zaman değiştirildiğini belirtir. Tarayıcı, yeniden doğrulama sırasında If-Modified-Since istek başlığında Last-Modified tarihini gönderir. ETag'e benzer şekilde, kaynak değişmemişse sunucu 304 Not Modified yanıtı döndürebilir.

Pratik HTTP Önbellekleme Örnekleri

Örnek 1: Statik varlıkları önbelleğe alma (resimler, CSS, JavaScript):

Nadiren değişen statik varlıklar için uzun bir max-age değeri ayarlayabilirsiniz:

            Cache-Control: public, max-age=31536000  

            

              
                Copy
              
            
          

Bu, tarayıcıya kaynağı bir yıl (31.536.000 saniye) boyunca önbelleğe almasını ve herhangi bir önbellek tarafından (public) önbelleğe alınabileceğini söyler.

Örnek 2: Yeniden doğrulama ile dinamik içeriği önbelleğe alma:

Daha sık değişen dinamik içerikler için, yeniden doğrulama amacıyla ETag veya Last-Modified ile birlikte no-cache kullanabilirsiniz:

            Cache-Control: no-cache, must-revalidate
ETag: "unique-etag-value"

            

              
                Copy
              
            
          

Bu, tarayıcıyı kullanmadan önce önbelleği sunucuyla yeniden doğrulamaya zorlar. Sunucu daha sonra kaynağın değişip değişmediğini belirlemek için ETag'i kullanabilir ve değişmemişse 304 Not Modified yanıtı döndürebilir.

Örnek 3: Sürümlenmiş varlıkları sunma:

Yaygın bir uygulama, varlık dosya adına bir sürüm numarası eklemektir (ör. style.v1.css). Varlık değiştiğinde, sürüm numarasını güncelleyerek tarayıcıyı yeni sürümü indirmeye zorlarsınız. Bu, güncel olmayan içerik sunma endişesi olmadan varlıkları agresif bir şekilde önbelleğe almanıza olanak tanır.

HTTP Önbellekleme için En İyi Uygulamalar

• CDN kullanın: İçerik Dağıtım Ağları (CDN'ler), web sitenizin içeriğini coğrafi olarak kullanıcılara daha yakın birden fazla sunucuya dağıtır. Bu, özellikle dünyanın farklı yerlerindeki kullanıcılar için gecikmeyi azaltır ve yükleme sürelerini iyileştirir. Popüler CDN'ler arasında Cloudflare, Akamai ve Amazon CloudFront bulunur. Japonya'daki bir web sitesinin Avrupa'daki bir sunucudan resim yüklemesi, Asya'da sunucuları olan bir CDN'den büyük ölçüde fayda sağlayacaktır.
• Tarayıcı önbelleklemesinden yararlanın: Sunucunuzu tüm kaynaklarınız için uygun HTTP önbellek başlıklarını gönderecek şekilde yapılandırın.
• Önbellek temizleme teknikleri kullanın: Değiştiklerinde tarayıcıları güncellenmiş kaynakları indirmeye zorlamak için sürüm oluşturma veya sorgu parametreleri gibi teknikler kullanın.
• Önbellek performansını izleyin: Önbellek isabet oranlarını izlemek ve iyileştirilecek alanları belirlemek için tarayıcı geliştirici araçlarını ve sunucu tarafı analitiklerini kullanın.

Service Worker Önbelleği: Gelişmiş Kontrol ve Çevrimdışı Yetenekler

Service Worker'lar, ana tarayıcı iş parçacığından ayrı olarak arka planda çalışan JavaScript dosyalarıdır. Tarayıcı ile ağ arasında bir proxy görevi görerek ağ isteklerini engellemenize ve gelişmiş önbellekleme stratejileri uygulamanıza olanak tanır.

Service Worker'lar, çevrimdışı erişim, anlık bildirimler ve arka plan senkronizasyonu gibi özellikleri etkinleştiren İlerici Web Uygulamaları'nın (PWA'lar) arkasındaki anahtar bir teknolojidir.

Service Worker'lar Nasıl Çalışır?

1. Kayıt: Service Worker, web sayfanız tarafından kaydedilir.
2. Kurulum: Service Worker tarayıcıya kurulur. Bu, genellikle temel kaynakları önceden önbelleğe aldığınız yerdir.
3. Etkinleştirme: Service Worker aktif hale gelir ve kapsamı içindeki sayfalar için ağ isteklerini kontrol etmeye başlar.
4. Engelleme: Service Worker, ağ isteklerini engeller ve kaynakları önbellekten sunmayı, ağdan almayı veya hatta sentetik bir yanıt oluşturmayı seçebilir.

Önbellekleme için Önemli Service Worker API'leri

• Cache API: Önbelleğe alınmış yanıtları depolamak ve geri almak için bir mekanizma sağlar. Adlandırılmış önbellekler oluşturmanıza ve giriş eklemenize, güncellemenize ve silmenize olanak tanır.
• Fetch API: Service Worker'dan ağ istekleri yapmak için kullanılır.
• addEventListener('install', ...): Service worker ilk kurulduğunda çalışan olay işleyicisidir. Bu genellikle önemli varlıkları önceden önbelleğe almak için kullanılır.
• addEventListener('activate', ...): Service worker aktif hale geldiğinde çalışan olay işleyicisidir. Bu genellikle eski önbellekleri temizlemek için kullanılır.
• addEventListener('fetch', ...): Ağ isteklerini engelleyen olay işleyicisidir. Önbellekleme mantığının yaşadığı yer burasıdır.

Service Worker ile Önbellekleme Stratejileri

Service Worker'lar, farklı türdeki kaynaklara ve ağ koşullarına göre uyarlanmış çeşitli önbellekleme stratejileri uygulamanıza olanak tanır. İşte bazı yaygın stratejiler:

• Önce Önbellek (Cache First): Kaynak mevcutsa her zaman önbellekten sunun. Önbellekte yoksa, ağdan alın ve ileride kullanmak üzere önbellekte saklayın. Bu, nadiren değişen statik varlıklar için idealdir.
• Önce Ağ (Network First): Her zaman önce kaynağı ağdan almayı deneyin. Ağ mevcutsa, kaynağı sunun ve önbelleği güncelleyin. Ağ mevcut değilse, kaynağı önbellekten sunun. Bu, mümkün olduğunca güncel olması gereken dinamik içerikler için uygundur.
• Önbellek, sonra Ağ (Cache, then Network): Kaynağı hemen önbellekten sunarken, aynı anda en son sürümü ağdan alın. Yeni sürüm geldiğinde önbelleği güncelleyin. Bu, hızlı bir ilk yükleme sağlar ve kullanıcının eninde sonunda en son içeriği almasını garanti eder.
• Eskisini Sunarken Yeniden Doğrula (Stale-While-Revalidate): Kaynağı hemen önbellekten sunun. Arka planda, en son sürümü ağdan alın ve önbelleği güncelleyin. Kaynak bir sonraki istendiğinde, güncellenmiş sürüm sunulacaktır. Bu strateji, hızlı bir ilk yükleme sağlar ve kullanıcının ilk isteği engellemeden her zaman en son sürümü almasını garanti eder.
• Sadece Ağ (Network Only): Kaynağı her zaman ağdan alın. Önbelleği asla kullanmayın. Bu, hassas kullanıcı verileri gibi asla önbelleğe alınmaması gereken kaynaklar için uygundur.
• Sadece Önbellek (Cache Only): Kaynağı her zaman önbellekten sunun. Asla ağdan almayın. Bu, kaynağın her zaman çevrimdışı olarak kullanılabilir olmasını sağlamak istediğiniz senaryolar için kullanışlıdır.

Pratik Service Worker Önbellekleme Örnekleri

Örnek 1: Statik varlıklar için Önce Önbellek (Cache First) stratejisi:

            self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // Cache hit - return response
        if (response) {
          return response;
        }

        // Not in cache - fetch from network
        return fetch(event.request).then(
          response => {
            // Check if we received a valid response
            if (!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // IMPORTANT: Clone the response. A response is a stream
            // and because we want the browser to consume the response
            // as well as the cache consuming the response, we need
            // to clone it.
            const responseToCache = response.clone();

            caches.open('my-site-cache')
              .then(cache => {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
  );
});

            

              
                Copy
              
            
          

Bu kod parçacığı, Önce Önbellek stratejisini göstermektedir. Service Worker önce istenen kaynağın önbellekte mevcut olup olmadığını kontrol eder. Eğer mevcutsa, kaynağı önbellekten sunar. Değilse, kaynağı ağdan alır, önbellekte saklar ve ardından tarayıcıya sunar.

Örnek 2: Dinamik içerik için Eskisini Sunarken Yeniden Doğrula (Stale-While-Revalidate) stratejisi:

            self.addEventListener('fetch', event => {
  event.respondWith(
    caches.open('my-site-cache').then(cache => {
      return cache.match(event.request).then(response => {
        const fetchPromise = fetch(event.request).then(networkResponse => {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        });
        return response || fetchPromise;
      })
    })
  );
});

            

              
                Copy
              
            
          

Bu kod parçacığı, Eskisini Sunarken Yeniden Doğrula stratejisini göstermektedir. Service Worker, kaynağı hemen önbellekten sunar. Arka planda, en son sürümü ağdan alır ve önbelleği günceller. Kaynak bir sonraki istendiğinde, güncellenmiş sürüm sunulacaktır.

Service Worker Önbellekleme için En İyi Uygulamalar

• Bir önbellekleme stratejisi kütüphanesi kullanın: Workbox gibi kütüphaneler, önceden oluşturulmuş önbellekleme stratejileri ve yardımcı programlar sağlayarak Service Worker geliştirmeyi basitleştirir. Bu size zaman ve çaba kazandırabilir ve önbellekleme mantığınızın sağlam ve güvenilir olmasını sağlayabilir.
• Önbellek sürümlerini yönetin: Service Worker'ınızı güncellediğinizde, eski önbelleği geçersiz kılmanız ve yeni bir tane oluşturmanız gerekir. Bu, güncel olmayan kaynakların sunulmasını önler. Eski önbellekleri temizlemek için activate olayını kullanın.
• Hataları zarif bir şekilde ele alın: Ağ hatalarını ve önbellek ıskalamalarını zarif bir şekilde ele almak için hata işleme uygulayın. Yedek içerik sağlayın veya kullanıcıya kaynağın mevcut olmadığını bildirin.
• Kapsamlı bir şekilde test edin: Service Worker önbellekleme mantığınızın beklendiği gibi çalıştığından emin olmak için farklı ağ koşullarında ve tarayıcı ortamlarında test edin. Önbelleği incelemek ve ağ isteklerini izlemek için tarayıcı geliştirici araçlarını kullanın.
• Kullanıcı deneyimini göz önünde bulundurun: Önbellekleme stratejinizi kullanıcı deneyimini göz önünde bulundurarak tasarlayın. Bir kaynak ağdan veya önbellekten alınırken kullanıcıya geri bildirimde bulunun. Eski içeriği çok uzun süre sunmaktan kaçının.

HTTP Önbelleği ve Service Worker Önbelleğini Karşılaştırma

Hem HTTP önbellekleme hem de Service Worker önbellekleme web sitesi performansını iyileştirmeyi amaçlasa da, yetenekleri ve kullanım durumları bakımından farklılık gösterirler.

Önbellekleme için Küresel Hususlar

Küresel bir kitle için önbellekleme stratejileri uygularken aşağıdakileri göz önünde bulundurun:

• Ağ koşulları: Farklı bölgelerdeki kullanıcılar değişen ağ hızları ve güvenilirlikleri yaşayabilir. Bu farklılıkları karşılamak için önbellekleme stratejinizi uyarlayın. Örneğin, güvenilmez internet erişimi olan bölgelerdeki kullanıcılar, sağlam çevrimdışı destekten büyük ölçüde fayda sağlayacaktır.
• CDN kapsamı: İçeriğinizin tüm bölgelerdeki kullanıcılara hızlı bir şekilde teslim edilmesini sağlamak için küresel bir sunucu ağına sahip bir CDN seçin. CDN'in kitleniz için kritik olan bölgelerde Varlık Noktalarına (PoP'ler) sahip olduğunu doğrulayın.
• Veri gizliliği: Kullanıcıya özel verileri önbelleğe alırken farklı ülkelerdeki veri gizliliği düzenlemelerine dikkat edin. GDPR ve CCPA gibi yasalara uyduğunuzdan emin olun.
• Dil ve yerelleştirme: Farklı dillerdeki ve bölgelerdeki kullanıcılara daha iyi bir kullanıcı deneyimi sağlamak için web sitenizin yerelleştirilmiş sürümlerini önbelleğe almayı düşünün.
• Önbellek geçersizleştirme: Kullanıcıların sık sık değişse bile her zaman en son içeriği almasını sağlamak için güvenilir bir önbellek geçersizleştirme stratejisi uygulayın. Yerelleştirilmiş içerik güncellemelerine özellikle dikkat edin.

Sonuç

Ön uç önbellekleme, web sitesi performansını optimize etmek ve kullanıcı deneyimini iyileştirmek için temel bir tekniktir. HTTP önbellekleme ve Service Worker önbelleklemeden yararlanarak yükleme sürelerini önemli ölçüde azaltabilir, sunucu yükünü düşürebilir ve web sitenizin içeriğine çevrimdışı erişim sağlayabilirsiniz. Önbellekleme stratejilerini seçerken ve uygularken web sitenizin özel ihtiyaçlarını ve hedef kitlenizi dikkatlice düşünün. En iyi uygulamaları benimseyerek ve önbellekleme performansınızı sürekli izleyerek, web sitenizin dünyanın dört bir yanındaki kullanıcılara hızlı ve güvenilir bir deneyim sunmasını sağlayabilirsiniz.