Leverage Browser Caching Nedir? Leverage Browser Caching Nasıl Yapılır? – GTMetrix

Leverage Browser Caching (Tarayıcı önbellekleme) nedir?

  • Leverage Browser Caching(Tarayıcı önbelleğe alma), bir kullanıcı bir web sayfasını ziyaret ettiğinde web sayfası kaynak dosyalarını yerel bir sunucuda depolar.
  • Leverage Browser Caching, bir web yöneticisinin tarayıcılara kaynaklarını nasıl kullanmaları gerektiği konusunda talimat vermesidir.

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

Tarayıcı önbelleğinin amacı, tarayıcının önceden 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üklenmesine gerek yoktur, çünkü tarayıcı onları “hatırladı” (kaydetti). Bir web sayfasının ilk kez ziyaret edilmesinin diğer ziyaretlerden daha uzun sürmesinin nedeni budur .

Tarayıcı önbelleğe almayı kullandığınızda, web sayfası dosyalarınız tarayıcı önbelleğinde saklanır . Sayfalarınız, tekrar eden 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 için test ettiyseniz ve tarayıcı önbelleğe almayı (leverage browser caching) öğrenmek istiyorsanız, işte bunu nasıl yapacağınızı aşağıda anlattık.

Tarayıcı önbelleğe almayı nasıl yapabilirim?

Önbelleğe alma özelliğini kullanmak için kaynaklarınızın istek başlıklarını değiştirin

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

Önbelleğe alma özelliğini kullanmak için kaynaklarınızın istek başlıklarını değiştirin

Çoğu insan için, önbelleğe almayı etkinleştirmenin yolu, web sunucunuzda / sunucunuzda .htaccess adlı bir dosyaya kod eklemektir.

Bu, web yöneticinizdeki dosya yöneticisine (veya nereye dosya ekleyip yükleyeceğinize gideceğiniz) gitmek anlamına gelir.

.Htaccess dosyası siteniz için birçok önemli şeyi kontrol eder. Htaccess dosyasına aşina değilseniz, lütfen onu değiştirmeden önce bazılarını öğrenmek için .htaccess makalesini okuyun .

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

Aşağıdaki kod tarayıcılara neyi önbelleğe alacağını ve ne kadar süre “hatırlayacağını” bildirir. .Htaccess dosyanızın üstüne eklenmelidir.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

.Htaccess dosyasını kaydedin ve 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 bir zaman dilimi 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ı istediğinizi söylemek istiyorsanız, “1 yıl” ı “1 ay” ile değiştirirsiniz. 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 “Süre Sonu” denir ve .htaccess kullanan çoğu kişi için çalışır, bu nedenle yeni başlayan çoğu kişi için önbelleğe alma ile ilgilenir.

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

Süre sonu yönteminin sunucunuz için çalışmadığı da mümkündür; bu durumda Önbellek Kontrolünü kullanmayı deneyebilirsiniz.


Cache-Control

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

Önbellek Kontrolü, tarayıcımızın önbelleğe alınması konusunda biraz daha fazla kontrol sahibi olmamıza olanak tanır ve çoğu kişi bir kez kurulum yapmayı daha kolay bulur.

.Htaccess dosyasındaki örnek kullanım:

# 1 Month for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

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

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

# 1 Month for most static assets

Yukarıdaki satır sadece bir nottur. Yazdığımız not not olmak dışında hiçbir şey yapmaz. .Htaccess dosyası, # karakteriyle başlayan satırları yoksayar. Önbelleğe alma çözümünüz büyüdükçe, bunlardan birkaç farklı grubunuz olabileceğinden, bu not önerilir.

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

Yukarıdaki satırda “dosya bu türden biriyse, o zaman ona bir şey yapacağız” diyor.

Bu satırın önemli kısmı, listelenen farklı türde dosyaların (css, js, jpeg, png, vb.) Olduğunu ve izleyen önbellekleme talimatlarının bu dosya türlerine uygulanacağını fark etmektir. Örnek olarak, eğer jpg dosyalarınızın bu süre boyunca önbelleğe alınmasını istemiyorsanız, “jpg” yi bu satırdan silebilir veya buna html eklemek istiyorsanız, bu satıra “html” ekleyebilirsiniz.

Header set Cache-Control "max-age=2592000, public"

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

  • “Header set Cache-Control” kısmı bir başlık ayarlıyor.
  • “Max-age = 2592000” kısmı ne kadar süre önbelleklenmesi gerektiğini belirtir (saniye kullanarak). Bu durumda “2592000” saniye olan bir ay önbelleğe alıyoruz.
  • “public” kısmı bunun halka açık olduğunu belirtiyor (eğer önbelleğe alınmasını istiyorsanız iyi).

</ FilesMatch>

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


Ortak önbellek sorunu

Bir yıl veya başka bir uzun süre boyunca önbelleğe alınacak html’nizi ve resimlerinizi listelerseniz, sayfalarınızda değişiklik yaparsanız bunun tüm kullanıcılar tarafından görülmeyebileceği anlamına geldiğini unutmayın. Bunun nedeni, kullanıcıların canlı olanlardan ziyade önbelleklenmiş dosyaları arayacaklarıdır. Zaman zaman çektiğiniz bir dosyanız varsa (örnek – bir CSS dosyası), URL parmak izi kullanarak önbellek sorununu çözebilirsiniz.

URL parmak izi

Yeni bir (önbelleğe alınmamış) bir dosya kaynağı elde etmek benzersiz bir adla mümkündür. Bir örnek, eğer css dosyamız “main.css” olarak adlandırılmışsa, onun yerine “main_1.css” olarak adlandırabiliriz. Bir dahaki sefere değiştirdiğimizde “main_2.css” diyebiliriz. Bu, zaman zaman değişen dosyalar için kullanışlıdır.

Önbellekleme yöntemleri

Tüm önbelleğe alınabilen kaynaklar için Süre Sonu veya Önbellek Kontrol maksimum süresi ve Son Değiştirme Tarihi veya ETag değerlerinden birini belirtmek önemlidir. Hem Expires hem de Cache-Control: max-yaş belirtmek ya da Last-Modified ve ETag belirtmek gereksizdir.

Yorum Yap

Eş Anlamlı Kelimeler