Önbellek (İngilizce Cache), bir kullanıcı tarafından ziyaret edilen sayfaların tarayıcı ile internet arasında arabelleğe alınmasına denir. Bu terim, çoğu durumda tarayıcılar için geçerli olsa da, diğer yazılımlarında kendi önbellek yani cache sistemleri olabilir.

Tüm önbellek işlemlerinde amaç aynıdır: bir web kaynağının, programın, hizmetin ve onu kullanan diğer ürünlerin çalışmalarını hızlandırmak.

Performanstaki artış, önbellekten veri almanın doğrudan depolamadan istemekten çok daha az zaman alması nedeniyle elde edilir. Ayrıca, verileri önbelleğe almadan önce, genellikle işlenir, kıvrılır, boyut olarak küçülür, bu da çalışma hızını daha da artırır.

Site Önbelleği Nedir?

Önbellek kullanımı yeni bir şey değil. Aslında bilgisayarlardan daha eski. Bu sistem, 1968 yılında, dünyanın en büyük bilişim teknolojisi şirketi olan IBM tarafından yayımlanan makale ile hayatımıza girdi.

Aynı makale, bugün kullandığımız önbelleğe alma işlevinin temel ilkelerini oluşturuyor.

Kaynak nesnelerini önbelleğe alınması işlemine site önbelleği adı verilir.

Bir sitenin önbelleği, işlemde en sık kullanılan nesnelerin bir koleksiyonudur: resimler, HTML şablonları, JS, CSS dosyaları ve sitenin veritabanına yapılan sorguların sonuçlarını içerir.

Site önbelleği şu şekilde çalışır;

• İstemci (tarayıcı) sunucuya bir istek oluşturur ve gönderir,
• Dunucu bir yanıt oluşturur ve web sayfasını ve onunla ilişkili tüm dosyaları tarayıcıya gönderir,
• Tarayıcı web sayfasını görüntülerken bazı kaynaklarını önbelleğe alır.

Bu web sayfasının tekrarlanan istekleri üzerine, tarayıcı site önbelleğindeki dosyaları kullanacaktır. Önbellekleme süresi, tarayıcı tarafından sunucunun her dosya türüne ilişkin yanıtına göre belirlenir.

Dosya önbelleğe kaydedildiyse, bir dahaki sefere dosya istendiğinde tarayıcı içeriğini yerel olarak alır. Böylece, her şey çok daha hızlı gerçekleşecek, çünkü sunucuya herhangi bir istek olmayacak.

Önbellek site yükleme hızını nasıl etkiler?

Kullanıcı bir web sitesini ziyaret ettiğinde, sayfanın görüntülenebilmesi için sayfanın içeriğinın indirilmesi gerekir. Bu durumda, kullanıcı siteye giriş yaptığında, sayfada ki tüm CSS, HTML, JS ve resim/video gibi dosyaları kullanıcı otomatik olarak tarayıcısına indirir.

Eğer bir önbellek sisteminiz varsa kullanıcı sitenizi ziyaret ettiğinde gerekli olan sabit dosyaları tekrar indirmek yerine, daha önce tarayıcıya indirdiği önbellekten alabilir. Bu, sayfaların yüklenme hızını önemli ölçüde iyileştirir.

Ayrıca önbellek kullanımı bandwidth (bant genişliği) kullanımı büyük ölçüde düşürür. Böylece sunucu yükünde tasarrufta sağlar. Eğer Bandwidth Nedir? bilmiyorsanız makalemize göz atabilirsiniz.

Google geliştiricileri bir açıklamada bulunmuştur:

“Önbelleğe alma sayesinde, sitenizi tekrar ziyaret eden kullanıcılar sayfa yüklemek için daha az zaman harcarlar.”

Doğru ayarlanan bir önbelleğe alma işlemi için şunlar söylenebilir:

• Tekrarlanan aramalar sırasında indirilen veri miktarının azaltılması

Sunucunun tüm veri türlerini önbelleğe almaya yanıtını yapılandırırsanız, iletilen bilgi miktarı 0 MB’a kadar azaltılabilir: bu durumda, web sayfası tamamen önbellekten oluşturulacaktır.

• Azalan sunucu yükü

Sunucu ne kadar az veri işleyip aktarırsa, o anda performansı o kadar yüksek olur.

Buna ek olarak, tarayıcı önbelleğe alma işlemi, dosyaların tekrar tekrar yüklenmesi (resimler, komut dosyaları, stiller) hariç olmak üzere müşterinin web trafiğini önemli ölçüde kaydeder; bunlar sitenin önbelleğinden alınır.

Hangi Site Dosyaları Önbelleğe Alınmalıdır?

Bir web sitesinin kullandığı kaynaklar iki farklı gruba ayrılır. Bu kaynaklar, Dinamik ve Statiktir. Hemen kısaca bakalım:

• Dinamik Web Sitesi

Bu kaynaklar sunucuda depolanmaz, ancak web sayfaları istendiğinde üretilir. Bu kaynaklar genellikle Apache sunucularında PHP kullanılarak oluşturulabilen HTML içerir. Daha çok verilerini veri tabanı üzerinden alır.

• Statik Web Sitesi

Bu tür kaynaklar sunucuda depolanır. Kural olarak, bunlar medya içeriğini (resimler ve videolar), ayrıca stil, komut dosyası ve yazı tipi dosyalarını içerir. Statik ve sitesi verilerini veri tabanı yerine tamamen HTML kodlardan alır.

Çoğu site için, tüm statik kaynaklar için önbellek şeması uygundur. Önbellek üstbilgileri, yalnızca bazılarına (örneğin görüntüler) değil, tüm önbelleğe alınmış statik kaynaklara uygulanmalıdır. Önbelleğe alınan kaynaklar arasında JavaScript ve CSS dosyaları, grafikler ve diğer dosyalar (multimedya içeriği, PDF dosyaları vb.) bulunur. Genellikle, HTML statik bir kaynak değildir ve varsayılan olarak önbelleğe alınmış sayılmaz.

Site Önbelleğini Test Etme

Site kaynaklarının tarayıcıda önbelleğe alınmasını kontrol etmenin birkaç yolu vardır:

Google Chrome veya Opera Tarayıcısında Önbellek Kontrolü

Web tarayıcınız üzerinde varsayılan olarak web geliştirici araçları mevcuttur. Bu araçlar ile web sitenizde önbelleğe alma işlemini test edebilirsiniz.

Kullandığınız tarayıcıda herhangi bir sayfayı görüntüleyin.

Geliştirici araç çubuğunu aktif edin. Bu araç çubuğu, Google Chrome için sağ tıklama ardından “İncele” seçeneği ile açılabilir. Opera için sağ tıklama ardından “Öğeyi denetle” seçeneği ile açılabilir. Bir başka seçenek ise “ Ctrl + Shift + I “ tuşlarına basarak her iki tarayıcı üzerinde bu web geliştirici araçlarını aktif edebilirsiniz.

Araç çubuğumuzu etkinleştirdikten sonra “Network” sekmesine gelelim. Burada karşımıza girdiğimiz sayfanın tarayıcımızda görüntülenebilmesi için otomatik olarak indirilen dosyaları göreceğiz. Tarayıcımıza inen bu dosyalar için tür, boyut, zaman gibi bilgilere buradan ulaşabiliriz. Web sayfası kaynaklarına ilk erişildiğinde başlangıç ​​boyutunu ve yükleme hızını görüntülemek için Chrome araç çubuğunun Network sekmesindeki “Önbelleği devre dışı bırak (Disable cache)” onay kutusunu etkinleştirin ve sayfayı yenileyin.

Küçük bir ek bilgi olarak, varlıklar yani “Name” penceresinde görünenler, tarayıcıya yüklenen sayfanın içeriğidir. Burada, html dosyaları, css, js ve resimler gibi dosyalar listelenir.

Şimdi önbellek (cache) olmadan yüklenen dosyaları, boyutlarını ve yükleme için geçen zamanı gördüğümüze göre “Disable cache” onay kutusunu tekrar açalım ve sayfamızı yenileyelim. Bunun için tarayıcınızda sol üst köşede bulunan yenile butonunu kullanabilir veya “ Ctrl+F5 “ varsayılan tuşlarıyla yapabilirsiniz.

Dosya önbelleğe alınırsa, Boyut sütununda dosya boyutu yerine giriş (bellek önbelleğinden (memory cache)) veya (disk önbelleğinden (disk cache)) görüntülenir. Dosya boyutunun yüksek oranlarda azaldığını ve yüklenme süresinin kısaldığını göreceksiniz.

Burada hakkında kısaca bahsetmemiz gereken bir soru daha ortaya çıkıyor. Bellek önbelleği ve Disk önbelleği nedir?

Memory Cache ve Disk Cache Nedir? Farkları Nelerdir?

• Memory Cache (Bellek Önbelleği)

Bellek (RAM) önbelleği, bellek kaynaklarını depolar ve yükler. Yani bu çok daha hızlı ama kalıcı değildir.

Bellek önbelleği yazma ve erişime daha hızlı olan RAM’de depolanır, ancak bilgisayar kapatıldığında veya diğer bazı durumlarda silinir.

• Disk Cache (Disk Önbelleği)

Disk Önbelleği kalıcıdır. Önbelleğe alınan kaynaklar depolanır ve diske yüklenir.

Disk önbelleği, okunması ve yazılması daha yavaş olan sabit sürücüye yazılır, ancak diskte kalır.

Hız Testi Hizmetleri ile Önbellek Kontrolü

PageSpeed ​​Insights Hizmeti, Pingdom Web Sitesi Hız Test Hizmeti, Gtmetrix, Webpagetest gibi bir çok online ve ücretsiz hız testi yapan hizmetler mevcuttur. Bu hizmetlerde sitenizi test ettiğinizde, “Tarayıcı önbelleğinden yararlanın” ve benzeri şekilde uyarılar alıyorsanız eğer, önbellek işleminizde yanlış giden bir şeyler olduğu düşünülebilir.

HTTP Başlıklarını Kontrol Edin

Bir web sitesine giriş yaptığımızda tarayıcıda görsel olarak görebildiğimiz her şey tarayıcıya sunucu tarafından iletilen bazı HTTP başlıkları ortaya çıkarır. İletilen bu HTTP başlıklarından bazıları önbellekten sorumludur.

Önbellek Tarihleri

HTTP başlıkları sayesinde bir dosyanın ne kadar süre boyunca önbellekte kalması gerektiğini belirtebilirsiniz. Böylece, tarayıcı yüklenen sayfayı önbelleğe kaydeder ve belirtilen son kullanma tarihinin sona ermesine kadar yerel olarak saklanan bir kopya görüntüler.

Web sitenizde HTML kodu içerisinde bulunan CSS özelliklerini güncellediğinizi/değiştirdiğinizi düşünelim. Ancak eski CSS dosyalarınız kullanıcının daha önceden tarayıcı önbelleğine alınmış olabilir. Bu, kullanıcının bozuk bir tasarım görmesine neden olur. Bunun gibi sorunlar yaşamamak için dosya türlerinin saklanma süreleri doğru yapılandırılmalıdır.

Google geliştiricileri bir açıklamada bulunmuştur.

“Statik kaynakların önbellekte saklanma süresi en az bir hafta olmalıdır. Harici kaynaklar (reklamlar, widget’lar vb.) En az 1 gün boyunca saklanmalıdır.”

Tarayıcıda HTTP Başlıklarını Kontrol Edin

Google Chrome veya Opera Tarayıcısında Önbellek Kontrolü başlığımızda belirttiğimiz gibi geliştirici araç çubuğumuzu açalım ve “Network” sekmesine gelelim.

Her hangi bir varlığa tıklayalım ve açılan yan pencerede “Headers” sekmesine girelim. Pencerede görünen bilgiler, varlığın HTTP başlıklarını göstermektedir.

HTTP Önbellek Başlıklarının Analizi

Network sekmesinde bir varlığa tıkladığımızda, headers penceresinde önbelleğe almaktan sorumlu olan başlıkları analiz edebiliriz. Peki HTTP önbellek başlıkları nasıl analiz edlir?

Bu soruyu yanıtlamadan önce headers penceresinde neler var biraz bakalım.

Durum Kodları (Status Code)

Durum kodları veya İngilizce Status Code, anlaşılması kolay bilgiler sunar. Toplamda 46 farklı durum kodu bulunmaktadır. Fakat bizim bu konu için 2 tanesini bilmemiz yeterli.

• Status Code: 200 OK

Varlık sunucu tarafından düzenli olarak güvenli bir şekilde teslim edildi ve tam olarak kullanıcıya yüklendi.

• Status Code: 304 Not Modified

Son kullanıcı sayfayı ziyaret ettiğinden beri, tarayıcı önbelleğinde depolanan varlık değişmedi. Bu durumda daha fazla bandwitdh harcamak ve sayfayı tekrar tekrar indirmek anlamsızdır. Bu durumda önbellek kullanımı gerekir.

Expires (Süre Sonu)

Expires değeri kullanıcı siteye ilk eriştiğinde gerçekleşir. İlk erişimde, sunucunun sayfanın önbelleğe alınan her varlığına atadığı bu değer, önbellekteki depolamanın son kullanma tarihini gösteren HTTP yanıtı verir. Belirlenen tarihe kadar, dosya sitenin tarayıcıdaki önbelleğinden istenir.

Sıralama şöyledir:

• Kullanıcı bir web sitesinde ki sayfayı ziyaret eder.
• Tarayıcı indirilmesi gereken HTML dosyayı bulur ve her şey yolundaysa 200 OK durum kodu verir.
• Tarayıcı HTML dosyayı  otomatik olarak sunucudan indirir.
• Dosya, expires yani sona erme başlığı değerine kadar kullanıcının bilgisayarında önbelleğe alınır.
• Kullanıcı sayfaya tekrar eriştiğinde, önbellek sona erene kadar (yani expires üstbilgisinin değerine göre) sunucudan varlık istenmez ve varlık önbellek üzerinde yüklenir.

Bu, şunun gibi görünecektir:

Expires: Thu, 21 Apr 2020 03:17:22 GMT

Cache-Control (Önbellek Kontrolü)

HTTP üstbilgisi kullanarak önbelleğe alma yöntemlerinin en esnek hali cache-control yönergesidir.

Sunucu, önbellek süresini saniye cinsinden gösteren “Cache-Control”  değeri içeren bir HTTP yanıtı gönderir. Dosya indirildikten sonra belirtilen süre geçinceye kadar tarayıcı önbelleği kullanılır ve sunucuya istekte bulunulmaz.

Örnek:

Cache-Control: max-age=3600

Bu başlık için farklı değerler vardır:

Max-age Yönergesi

Bu, “max-age” değeri, önbelleğin alakalı olduğu saniye sayısını belirtir. Expires ile aynı işlevi görür.

No-cache Yönergesi

Adını önbelleğe almamak gibi görünse bile, sunucunun gönderdiği bu üstbilgi dosyayı önbelleğe almaya yarar. Burada küçük ama önemli bir fark vardır. Dosya önbellekten çağrılmadan önce, tarayıcının değişiklikleri kontrol etmesi için istekte bulunması istenir.  Sunucuda değişiklik söz konusu değilse varlık önbellekten alınır. Varlık değiştirilmiş/güncellenmiş ise yeni sürümü sunucudan istenir.

Örnek:

Cache-Control: no-cache

No-store Yönergesi

Modern tarayıcılarda varlığın önbelleğe kaydedilmesini engeller.

Örnek:

Cache-Control: no-store

Private Yönergesi

Yönerge private, bir dosyanın yalnızca kullanıcının tarayıcısında önbelleğe alınmasına izin verir ancak ara önbelleklerde ( CDN , proxy sunucuları) önbelleğe alınmasına izin vermez . Genellikle son kullanıcıyla ilgili kişisel verileri önbelleğe almak için kullanılır.

Örnek:

Cache-Control: private, max-age=3600

Public Yönergesi

Bu yönerge, bir dosyayı hem kullanıcının tarayıcısında hem de ara önbelleklerde (CDN’ler, proxy’ler) önbelleğe almayı sağlar. Varsayılan olarak kullanılır.

Örnek:

Cache-Control: public, max-age=3600

Daha bir çok atanabilecek direktif bulunmakta ancak bu konu için bunları bilmemiz yeterli.

ETag ve If-None-Match

Önbellekteki ve sunucudaki dosyaların sürümlerini karşılaştırmak için kullanılır. Üstbilgiler ETag ve If-None-Match dosyanın kendisi değiştiğinde değişen rasgele bir karakter kümesi içeren değerlerini oluşturan değerleri gösterir . Örneğin: ETag: “58ca9df6-564”

ETag üstbilgisini aldıktan sonra, tarayıcı değerini kaydetmeli ve Expires veya Cache-Control: max-age üstbilgileri tarafından belirtilen önbellek süresi dolduğunda, tarayıcı değeri daha önce kaydedilen ETag etiketini içerecek bir If-None-Match isteği gönderecektir .

Sunucu, ETag varlığının ve If-None-Match üstbilgisinde gönderilen geçerli değeri karşılaştırır.

Etiketler aynıysa, varlık değişmez ve önbellekten yüklenebilir. Aynı zamanda, önbelleğin alaka düzeyi, Son Kullanma Tarihi ve Cache-Control: max-age değerinde belirtilen süre boyunca tekrar devam eder.

Etiketler aynı ya da farklı olup olmadığına bakılmadan sunucu kontrol edilir. Etiketler aynıysa, sunucu Durum Kodu üstbilgisini 304 Değiştirilmedi değerine gönderir ve tarayıcı sayfayı önbellekten yükler. Etiketler farklıysa veya bu ilk ziyaretse, 200 OK kodunu alırız, varlık sunucudan tam olarak yüklenir.

Bu kullanımın dezavantajı If-None-Match değeri sunucuya sürekli kontrol talepleri gönderir.

Last-Modifed ve If-Modified-Since

ETag ve If-None-Match ile hemen hemen aynı işlevi görür. Önbellekteki ve sunucudaki dosyaların sürümlerini karşılaştırmak için kullanılır. Tanım benzer olsa bile birbirlerinden farklıdır. Google, başlıklardan birini kullanmanızı ve her ikisini aynı anda belirtmemenizi önerir.

Tarayıcı, web sayfası için ilk isteği yapar. Sunucu, sayfanın kaynaklarını (dosyalarını) Last-Modified ve karşılık gelen kaynakların oluşturulma tarihlerini (değişikliklerini) içeren HTTP üstbilgilerini verir.

Örneğin:  Last-Modified: Thu, 21 Apr 2016 03:17:22 GMT

Ortaya çıkan dosyalar tarayıcı tarafından önbelleğe alınır. Bu sayfadaki sonraki isteklerde, tarayıcı önbelleğe alınan her dosya için bir HTTP isteği gönderir If-Modified-Since; değeri, sunucunun HTTP Last-Modified erişiminin önceki erişim sırasında içerdiği tarihtir.

Örneğin: If-Modified-Since: Thu, 21 Apr 2016 03:17:22 GMT

Değerler If-Modified-Sinceve Last-Modified aynı ise, sunucu tarayıcıya bir değer olarak yanıt gönderir 304 (Not Modified): Dosya değişmedi ve önbellekten alınabilir. Aksi takdirde, sunucu dosyayı yeniden tarayıcıya aktarır.

Bu önbellek şemasının dezavantajları, dosya HTTP isteklerinin If-Modified-Since sunucuya olan ilgisinin sürekli kontrol edilmesini içerir.