Tarayıcı önbelleğe alma nedir?

  • Tarayıcı önbelleğe alma, bir kullanıcı bir web sayfasını ziyaret ettiğinde web sayfası kaynak dosyalarını yerel bir bilgisayarda depolar.
  • “Kaldıraç” tarayıcı önbelleğe alma, bir web yöneticisi tarayıcılara kaynaklarıyla nasıl başa çıkılması gerektiğini öğrettiğinde ortaya çıkar.

Bir web tarayıcısı web sayfanızı görüntülediğinde, logonuz, CSS dosyanız ve diğer kaynaklar gibi birkaç şey yüklemesi gerekir.

tarayıcı önbellek dosyaları

Tarayıcı önbelleğe almanın yaptığı, tarayıcının zaten yüklediği kaynakları “hatırlamak” tır. Bir ziyaretçi web sitenizdeki başka bir sayfaya gittiğinde, logonuzun, CSS dosyalarınızın vb. Tekrar yüklenmesi gerekmez, çünkü tarayıcıda “hatırlanmış” (kaydedilmiş) vardır. Bir web sayfasının ilk görünümünün tekrarlanan ziyaretlerden daha uzun sürmesinin nedeni budur .

Tarayıcı önbelleğinden yararlandığınızda, web sayfası dosyalarınız tarayıcı önbelleğinde saklanır . Sayfalarınız tekrarlanan ziyaretçiler için çok daha hızlı yüklenecek ve aynı kaynakları paylaşan diğer sayfalar da yüklenecektir.

Web sayfanızı hız açısından test ettiyseniz ve tarayıcı önbelleklemesinden yararlanmanız gerektiğini öğrendiyseniz, bunu nasıl yapacağınız aşağıda açıklanmıştır.



Tarayıcı önbelleklemesi nasıl kullanılır?

  1. Önbelleğe almak için kaynaklarınızın istek başlıklarını değiştirin.
  2. Önbellek stratejinizi optimize edin.

Önbelleğe almak için kaynaklarınızın istek başlıklarını değiştirin

Çoğu kişi için, önbelleğe almayı etkinleştirmenin yolu, web barındırıcınızda / sunucunuzda .htaccess adlı bir dosyaya bazı kodlar eklemektir.

Bu, web barındırıcınızda dosya yöneticisine (veya dosya eklemek veya yüklemek için nereye giderseniz gidin) gitmek anlamına gelir.

.Htaccess dosyası, siteniz için birçok önemli şeyi kontrol eder. .Htaccess dosyasına aşina değilseniz, değiştirmeden önce nasıl yapacağınızı öğrenmek için lütfen .htaccess makalesiyle çalışmamı okuyun .

.Htaccess için tarayıcı önbelleğe alma

Aşağıdaki kod tarayıcılara neyi önbellekleyeceklerini ve ne kadar süreyle “hatırlayacaklarını” söyler. .Htaccess dosyanızın üstüne eklenmelidir.

## EXPIRES
CACHING ## <IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image / jpg "erişim 1 yıl"
ExpiresByType resim / jpeg "erişim 1 yıl"
ExpiresByType resim / gif "erişim 1 yıl"
ExpiresByType resim / jpeg "erişim 1 yıl" ExpiresByType resim / gif "erişim 1 yıl" ExpiresByType resim / png "erişim 1 yıl"
ExpiresByType metin / css "erişim 1 ay"
ExpiresByType metin / html "erişim 1 ay"
ExpiresByType uygulama / pdf "erişim 1 ay"
ExpiresByType metin / x-javascript "erişim 1 ay"
ExpiresByType uygulama / x-shockwave-flash "erişim 1 ay "
ExpiresByType resim / x-icon" erişim 1 yıl "
ExpiresDefault" erişim 1 ay "
</IfModule>
## ÖNCELEME SONRASI ##

.Htaccess dosyasını kaydedin ve ardından web sayfanızı yenileyin.

Farklı dosya türleri için farklı önbellek süreleri nasıl ayarlanır?

Yukarıdaki kodda “1 yıl” veya “1 ay” gibi zaman dönemleri olduğunu görebilirsiniz. Bunlar, dosya türleriyle ilişkilidir, örnek olarak yukarıdaki kod, bir .jpg dosyasının (resim) bir yıl boyunca önbelleğe alınması gerektiğini belirtir.

Bunu değiştirmek ve jpg resimlerinizin bir ay boyunca önbelleğe alınmasını istiyorsanız, “1 yıl” yerine “1 ay” ifadesini değiştirmeniz yeterlidir. Yukarıdaki değerler çoğu web sayfası ve blog için oldukça optimize edilmiştir.

.Htaccess için alternatif önbellekleme yöntemi

Yukarıdaki yönteme “Sona erme” denir ve .htaccess kullanan çoğu kişi için çalışır, bu yüzden yeni başlayan çoğu kişi için önbelleğe alma işlemiyle ilgilenir.

Önbelleğe alma konusunda daha rahat olduktan sonra, bize daha fazla seçenek sunan başka bir önbellekleme yöntemi olan Cache-Control’ü denemek isteyebilirsiniz.

Ayrıca, expires yönteminin sunucunuz için işe yaramaması da mümkündür, bu durumda Cache-Control’ü kullanmayı denemek isteyebilirsiniz.

Cache-Control

Not: Burada Cache-Control için daha eksiksiz bir rehber hazırladım .

Önbellek Kontrolü, tarayıcı önbelleklememizi biraz daha kontrol etmemizi sağlar ve birçok kişi kurulumdan sonra kullanımı daha kolay bulur.

.Htaccess dosyasında örnek kullanım:

Çoğu statik varlık için # 1 Ay
<filesMatch ". (Css | jpg | jpeg | png | gif | js | ico) $">
Üstbilgi Önbellek Denetimi'ni ayarla "max-age = 2592000, genel"
</filesMatch>

Yukarıdaki kod, dosya türüne bağlı olarak bir önbellek kontrol başlığı ayarlıyor.

Önbellek kontrolü nasıl çalışır?

Yukarıdaki kodu satır satır ele alalım.

Çoğu statik varlık için 1 Ay

Yukarıdaki satır sadece bir nottur. Ne yaptığımızı not etmek dışında hiçbir şey yapmaz. .Htaccess dosyası, # karakteri ile başlayan satırları yoksayar. Önbellek çözümünüz büyüdükçe bunlardan birkaç farklı kümeniz olabileceğinden bu not önerilir.

<filesMatch ". (css | jpg | jpeg | png | gif | js | ico) $">

Yukarıdaki satır, “dosya bu türlerden biriyse, o zaman bir şey yapacağız …

Bu satırın önemli kısmı, listelenen farklı dosya türlerinin (css, js, jpeg, png, vb.) Olduğunu ve aşağıdaki önbellekleme talimatlarının bu dosya türleri için geçerli olacağını fark etmektir. Örnek olarak, jpg dosyalarınızın bu süre boyunca önbelleğe alınmasını istemediyseniz “jpg” yi bu satırdan silebilirsiniz veya buna html eklemek isterseniz bu satıra “html” ekleyebilirsiniz.

Üstbilgi Önbellek Kontrolü ayarını “maks. Yaş = 2592000, genel”

Yukarıdaki satır, gerçek başlıkların eklendiği ve verilen değerlerdir.

  • “Header set Cache-Control” bölümü bir başlık ayarlıyor.
  • “Maks-yaş = 2592000” bölümü, ne kadar süreyle önbelleğe alınması gerektiğini belirtir (saniye kullanarak). Bu durumda “2592000” saniye olan bir ay boyunca önbelleğe alıyoruz.
  • “Herkese açık” bölüm, bunun kamuya açık olduğunu belirtir (önbelleğe alınmasını istiyorsanız iyi olur).
</ FilesMatch>

Yukarıdaki satır ifadeyi kapatıyor ve kod bloğunu sonlandırıyor.

Genel önbellek sorunu

Bir yıl veya başka bir uzun süre önbelleğe alınacak HTML ve resimlerinizi listelerseniz, bunun sayfalarınızda bir değişiklik yaptığınızda tüm kullanıcılar tarafından görülmeyebileceği anlamına gelebileceğini unutmayın. Bunun nedeni, kullanıcıların canlı dosyalar yerine önbelleğe alınmış dosyalara bakmasıdır. Ara sıra ayarladığınız bir dosyanız varsa (örnek – bir CSS dosyası), URL parmak izini kullanarak önbellek sorununun üstesinden gelebilirsiniz.

URL parmak izi

Yeni (önbelleğe alınmayan) bir dosya kaynağı elde etmek, benzersiz bir ada sahip olmakla mümkündür. Örnek olarak css dosyamızın adı “main.css” ise “main_1.css” adını verebiliriz. Bir daha değiştirdiğimizde “main_2.css” diyebiliriz. Bu, zaman zaman değişen dosyalar için kullanışlıdır.

Önbellek yöntemleri

Tüm önbelleğe alınabilir kaynaklar için Geçerlilik Süresi veya Önbellek Denetimi maks. Yaşından birini ve Son Değiştirme veya ETag’den birini belirtmek önemlidir. Hem Son Kullanma Tarihi hem de Önbellek Kontrolü: maks. Yaş belirtmek veya Hem Son Değiştirme hem de ETag belirtmek gereksizdir.