Tarayıcı Önbelleği Nedir? Nasıl Kullanılır?

Tarayıcı Önbelleği Nedir: Kullanıcıların ziyaret ettikleri internet sitelerinin dosyaları için geçici bir depolama teknolojisidir. Bu teknoloji sayesinde statik dosyaların kullanıcıların cihazlarının hafızalarına kaydedilmek suretiyle sonraki girişlerde dosyaların tutulduğu web sunucusunun yerine yerel hafızadan yüklenmesini sağlanır.

Tarayıcı önbelleğini aktifleştirmenin yaygın faydaları şunlardır:
• Sonraki girişlerde sitenin daha hızlı bir şekilde açılması sağlanır.
• Sonraki girişler için sunucuya gönderilen istek miktarı azalır.
• Bu sebepten ötürü sunucu yanıt süresi önemli ölçüde kısalır.
(Ayrıca Bakınız: Sunucu Yanıt Süresi Nedir? Nasıl Kısaltılır?)

Bu teknik sayesinde sunucuda bulunan görsel, video, CSS, JavaScript, PDF, HTML gibi statik dosyalar kullanıcıların cihazlarına bir süreliğine kaydedilir. İnternet site sahipleri tarayıcı ön belleğinin aktif olup olmadığını hız testi yapan araçlar ile kontrol edebilirler. Tarayıcı önbelleğinin aktifleştirilmesi kullanıcı deneyimine olumlu katkı sağlar.
(Ayrıca Bakınız: Kullanıcı Deneyimi (UX) Nedir? Nasıl Geliştirilir?)

Örneğin Google Pagespeed Insights gibi araçlarda karşımıza çıkan “statik öğeleri verimli bir önbellek politikasıyla yayınlayın” ve “tarayıcı önbellekleme özelliğinden yararlanın (leverage browser caching)” hataları alınıyorsa tarayıcı önbelleği özelliği kapalı demektir. Peki tarayıcı önbelleği nasıl aktifleştirilir? Gelin buna göz atalım.

Statik Ögeleri Verimli Bir Önbellek Politikası İle Yayınlayın [Çözüm]

Adım-1: Tarayıcı Önbelleğini Aktifleştirin

✅ Siteye ait sunucu dosyalarına cPanel vb Plesk gibi yönetim panelleri aracılığıyla veyahut doğrudan FTP bağlantısı kurularak erişim sağlanır.
✅ Sunucu dosyalarından birisi olan “.htaccess” dosyasını bulunur. Bu dosya genellikle “public_html” klasöründe bulunur. Eğer o dosya yoksa, ana dizine o adda bir dosyanın oluşturulması gerekir. Ardından “.htaccess” dosyasına aşağıdaki kodlar eklenir:

## EXPIRES CACHING ##
# Tarayıcı Ön Belleğini Aktifleştirme Kodu
<IfModule mod_expires.c>
ExpiresActive On
 
# Görsel Dosyaları
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
 
# Video Dosyaları
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
 
# CSS ve JavaScript Dosyaları
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
 
# Diğer Dosya Türleri
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType text/html "access plus 600 seconds"
 
# Yazı Tipleri (Fontlar)
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
</IfModule>
 
## EXPIRES CACHING ##

Yukarıdaki kodlar hangi dosya türlerinin önbelleğe alınacağını ve bunların ne kadar süre ile önbellekleme yapılacağını belirtmektedir. Buradaki dosya tiplerini ve önbellek sürelerini elbette ki değiştirebilirsiniz. Zira bazı parçaların gereğinden uzun veya kısa süre önbelleğe alınması çeşitli sorunlara yol açabilir.

Adım-2: Önbellek Kontrol Komutu Ekleyin

Tarayıcı önbellek uygulamasının düzgün bir şekilde çalışması için “.htaccess” dosyasına ön bellekleme işleminin zaman kontrolünü yapması için aşağıdaki kod bloklarından birisinin de ayrıca eklenmesi gerekir:

# Yöntem-1: Statik Ögeler İçin 1 Aylık Önbellek Kontrolü
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>

# Yöntem-2: Kodu Dosya Çeşitleri İçin Optimize Etmek 
<IfModule mod_headers.c>
  <filesmatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf)$">
  Header set Cache-Control "max-age=2678400, public"
  </filesmatch>
  <filesmatch "\.(html|htm)$">
  Header set Cache-Control "max-age=7200, private, must-revalidate"
  </filesmatch>
  <filesmatch "\.(pdf)$">
  Header set Cache-Control "max-age=86400, public"
  </filesmatch>
  <filesmatch "\.(js)$">
  Header set Cache-Control "max-age=2678400, private"
  </filesmatch>
</IfModule>

Adım-3: Wordpress Sitelerin Stil ve Script Dosya Versiyonlarını Kaldırın

Wordpress tabanlı sitelerde, kullanılan stil ve script kaynaklarının url adreslerine versiyon numarası eklenmektedir. Bu durum Wordpress tabanlı sitelerde tarayıcı önbellekleme işlemlerine engel olmaktadır. Eğer Wordpress tabanlı internet siteleri kullanıyorsanız ve üstteki kodları eklemenize rağmen “statik öğeleri verimli bir önbellek politikasıyla yayınlayın” sorunu çözülmemişse ek bir işlem daha yapmanız gerekir.

Statik Ögeleri Verimli Bir Önbellek Politikasıyla Yayınlayın: Uzun önbellek ömrü, sayfanızın tekrar ziyaret edilmesi sürecini hızlandırabilir.

Tarayıcı önbelleğinin çalışmasına engel olan bu versiyon numaralarını kaldırmak için aşağıdaki kodu kullandığınız temanın “functions.php” dosyasına eklemeniz gerekmektedir:

function remove_version_scripts_styles($src) {
    if (strpos($src, 'ver=')) {
        $src = remove_query_arg('ver', $src);
    }
    return $src;
}
add_filter('style_loader_src', 'remove_version_scripts_styles', 9999);
add_filter('script_loader_src', 'remove_version_scripts_styles', 9999);

➽ Google Pagespeed Insights aracı ile ilgili bilgi almak ve bu aracı kullanarak site hızını ve kullanıcı deneyimi metriklerini nasıl önemli ölçüde iyileştirebileceğinizi öğrenmek mutlaka şu yazımıza göz atmanızı öneriyoruz:
(Ayrıca Bakınız: Google Pagespeed İle Site Hızlandırma Rehberi)