Tarayıcı önbelleği nasıl çalışır?

Yayınlanan: 2017-05-04

Tarayıcı önbelleği, tarayıcılar tarafından yerel olarak web sayfası kaynaklarını depolamak için kullanılan bir mekanizmadır. Bu, performans kazanımları ekler, bant genişliği tüketimini en aza indirir ve genel olarak daha hızlı bir deneyim yaratır. Bu yazıda, tarayıcı önbelleğe almanın nasıl çalıştığını ve web sitenize nasıl uygulanacağını açıklıyoruz.

Tarayıcı önbelleği nedir?

Önbellek, gelecekte daha hızlı erişim için değerleri geçici olarak depolamak için kullanılan bir yazılım veya donanım bileşenidir. Tarayıcı önbelleği, resimler, videolar, CSS, Javascript vb. gibi indirilen web sayfası kaynaklarını içeren küçük bir dosya veritabanıdır. Bunun arkasındaki temel fikir şudur:

Tarayıcı, web sunucusundan bazı içerik ister. İçerik tarayıcı önbelleğinde değilse, doğrudan web sunucusundan alınır. İçerik önceden önbelleğe alınmışsa, tarayıcı sunucuyu atlar ve içeriği doğrudan önbelleğinden yükler.

Önbelleğe alınan içeriğin süresinin dolup dolmadığına bağlı olarak, içeriğin eski olduğu kabul edilir. Fresh ise , içeriğin son kullanma tarihini geçmediği ve sunucuyu dahil etmeden doğrudan tarayıcı önbelleğinden sunulabileceği anlamına gelir.

Doğrulama terimi, sunucunun sahip olduğu en son sürüme göre kontrol edilmesi gereken içeriği ifade eder. Kısacası içeriğin bayat olup olmadığını tespit etmek. Geçersiz kılma, içerik son kullanma tarihi geçmeden önbellekten kaldırıldığında meydana gelir. Bu, içeriğin değiştiği durumlarda sunucu tarafından zorlanabilir ve herhangi bir sorun yaratmaması için tarayıcının en son sürüme sahip olması gerekir.

Tarayıcı önbelleğe alma, belirli HTTP başlıklarının kullanılması yoluyla web geliştiricileri ve yöneticileri tarafından kullanılabilir. Bu başlıklar, web tarayıcısına bir kaynağın ne zaman önbelleğe alınacağını, ne zaman önbelleğe alınacağını ve ne kadar süreyle önbelleğe alınacağını bildirir. HTTP protokolünün çeşitli reenkarnasyonlarında üstbilgilerle oldukça örtüşme olduğundan, HTTP önbelleğiyle ilgili başlıkları kullanmak çoğu zaman sinir bozucu olabilir. Aradaki garip web proxy'si, eski tarayıcılar, çakışan önbelleğe alma politikaları ve uygulamaları (örneğin farklı WordPress eklentileri) gibi şeyleri karışıma ekleyin ve hızlı bir şekilde baş ağrısına dönüşebilir.

Tarayıcı önbelleğe alma başlıkları

Neyin önbelleğe alınıp alınamayacağını ve ne kadar süreyle önbelleğe alınacağını tanımlayan kurallar kümesine önbelleğe alma ilkesi adı verilir. Bu, web sitesi sahibi tarafından yanıt başlıklarının önbelleğe alınması yoluyla gerçekleştirilir. Bu, birçok farklı yolla elde edilebilse de , muhtemelen başlangıçta yalnızca Önbellek kontrolü ile ilgilenmelisiniz.

önbellek kontrolü

Önbellek denetimi başlığı HTTP/1.1'de tanıtıldı ve mevcut en modern uygulama olarak kabul ediliyor. Tarayıcıların nasıl davranmasını istediğinize bağlı olarak kullanabileceğiniz birkaç farklı değer vardır. Oldukça çok yönlü hale getirmek. Aşağıda Cache-Control yönergelerinin bir listesi bulunmaktadır:

önbellek yok
Web tarayıcınıza önbelleğe hemen başvurmamasını, ancak içeriği sunucuya göre doğrulamasını söyler. Taze ise, önbellekten servis edilebilir.
Mağaza yok
Tarayıcıya içeriği hiçbir şekilde önbelleğe almamasını söyler. Çoğunlukla hassas verilerle veya sık sık değişen verilerle uğraşırken kullanılır.
Halk
İçeriği genel olarak işaretler; bu, tarayıcı ve herhangi bir aracı taraf (proxy vb.) tarafından önbelleğe alınabileceği anlamına gelir.
Özel
İçeriği özel olarak işaretlemek için kullanılır, yani yalnızca tarayıcı tarafından önbelleğe alınabilir, aracı proxy'ler ve benzerleri tarafından değil. Bu genellikle kullanıcıyla ilgili verileri ifade eder.
Maksimum yaş
Maksimum yaş, istemcinin yeniden doğrulaması gerekmeden önce bir içeriğin tarayıcı önbelleğinde kalabileceği saniye cinsinden maksimum süreyi temsil eder. Birazdan ziyaret edeceğimiz Expires başlığının aksine max-age, mutlak bir son kullanma tarihi değil, içeriğin önbelleğe alındığı andan itibaren saniye cinsinden göreli bir değer tanımlar.
S-maxage
Bu, max-age'e benzer, ancak yalnızca ara önbellekler için kullanılır.
Yeniden doğrulama gerekir
Tarayıcıyı, içeriği yalnızca doğrudan tarayıcı önbelleğinden sunmak yerine, her ihtiyaç duyduğunda yeniden doğrulamaya zorlar.
Bu, bir ağ kesintisi olması durumunda kullanışlıdır.
Proxy-yeniden doğrulama
Zorunlu yeniden doğrulamaya benzer, ancak yalnızca aracı önbellekler için geçerlidir.
dönüşümsüz
Tarayıcıya, sunucudan alınan içeriği hiçbir şekilde dönüştürmemesi talimatını verir (genellikle sıkıştırma vb.).

etiket

Etag yanıt başlığı, belirli bir kaynağı tanımlamak için kullanılır. Belirli bir kaynak her değiştiğinde, yeni bir Etag oluşturulur. Bu şekilde bant genişliği kaydedilir, çünkü Etag değişmediyse web sunucusunun tam bir yanıt vermesi gerekmez. Sonuç olarak, Nginx ve Apache'de Etag başlığı varsayılan olarak etkindir ve Etag değerleri otomatik olarak oluşturulur, bu nedenle hiçbir şey belirtmeniz gerekmez.

sona eriyor

Bu, HTTP/1.0'da tanıtıldı ve gelecekte içeriğin eski sayılacağı belirli bir tarihi tanımlar. İçerik için etkili bir şekilde "önceki en iyi" tarihtir. Örneğin, Sona Erme Tarihi: Per, 25 Mayıs 2017 12:30:00 GMT

pragma

Bu, çoğunlukla geriye dönük uyumluluk için kullanılan, biraz eski bir HTTP/1.0 başlığıdır. Pragma: no-cache eklemek, tarayıcınızın Cache-Control: no-cache gibi davranmasını sağlar.

Web sitenizde önbelleğe alma politikası nasıl uygulanır?

Web sitenizde önbelleğe alma politikası uygulamanın iki yolu vardır. Birincisi, web sunucusu konfigürasyonunda önbelleğe alma yanıt başlıklarını tanımlamaktır. İkincisi, bunu doğrudan PHP içinde yapmaktır. Aşağıda en popüler iki web sunucusu olan Apache2 ve Nginx'in örnekleri verilmiştir:

Apaçi2

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=84600, public" </filesMatch>

Nginx

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 365d; add_header Cache-Control "public" ; }

Gördüğünüz gibi oldukça basit. İlk örnekte, belirli bir dosya türü grubuyla (.ico, .pdf, vb.) eşleşmek için apache2'nin FileMatch yönergesini kullanıyoruz ve bunları maksimum 84600 saniye ile herkese açık hale getiriyoruz. İkincisinde, nginx'in konum yönergesini kullanarak belirli dosya türleriyle tekrar eşleştiriyoruz ve maksimum 365 gün yaşını dahil ediyoruz. Bunları ayrıca başlık ekle yan tümcesini kullanarak “genel” olarak tanımlarız.

PHP

Doğrudan kodunuza yanıt başlıkları eklemek istiyorsanız, PHP'nin başlık komutunu kullanın.

<?php header("Cache-Control: no-cache"); header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); header("Cache-Control: max-age= 604800"); ?>

Çalışıp çalışmadığını görmek için nasıl test edilir

Örneğin, Firefox web konsolunu veya Chrome'un Geliştirici Araçlarını kullanarak tarayıcı önbelleğe alma kurallarınızı görmek için kolayca test edebilirsiniz:

Sağ üstteki hamburger simgesine tıklayın.
Diğer Araçlar > Geliştirici Araçları'nı seçin
URL'nizi adres çubuğuna girin ve Enter'a basın.

URL'niz yüklenirken bir istek listesi görmelisiniz. Üzerine tıklayarak bir kaynak seçin. Sağdaki Yanıt başlıklarını ve özellikle Durum Kodunu inceleyin. 200 HTTP Kodunu yazdırır, ancak bunun bellek önbelleğinden olduğunu parantez içinde belirtir.

Bu, kaynağın sunucudan istemek yerine yerel önbellek deposundan otomatik olarak yüklendiği anlamına gelir.

Cache-Control başlığınızda “mut-revalidate” ibaresinin olduğu durumlarda durum kodu 304 (Değiştirilmedi) olacaktır. Bu, tarayıcınızın kaynağı sunucuya karşı yeniden doğruladığı ve sunucunun içeriğin değişmediğini, dolayısıyla tarayıcının önbelleğinden sunulabileceği anlamına gelir.

Önbelleği devre dışı bırak onay kutusunu işaretleyerek ve Yeniden Yükle'ye basarak önbelleği devre dışı bırakmaya devam edin.

Bu durumda, önbelleği kullandığına dair herhangi bir gösterge olmaksızın Durum Kodunun 200 olduğunu görürsünüz. Tarayıcı kaynağı web sunucusundan istedi ve web sunucusu yeni bir kopya sunarak yanıt verdi.

Çözüm

Tarayıcı önbelleğe alma ve önbelleğe alma ilkeleri oldukça karmaşık hale gelebilir. Ancak, gösterdiğimiz gibi Önbellek Kontrolü ile denemeye başlamak basittir. Çoğu zaman statik varlıklar için "genel" bir önbelleğe alma politikası uygulamak, web sitenizin performansında bir fark yaratmak için yeterlidir. Ancak, diğer pek çok şeyin üzerine fazladan bir “endişe” katmanı ekliyor ve bunun böyle olmaması gerektiğine inanıyoruz. Tüm bu endişeleri ortadan kaldıran Pressidium'da tarayıcı önbelleğe almayı nasıl uyguladığımızı göstereceğimiz bir sonraki gönderide bizi takip edin.