Web Site Hızı İçin Tarayıcı Önbelleğinden Yararlanma

Hız testi araçlarında, “Daha hızlı yükleme süreleri için tarayıcı önbelleğinden faydalanın” uyarısı ile mi karşılaştınız? kullanıcıların web sitenize ilk ziyaretlerinde indirdikleri dosyaların – görseller, CSS stilleri, JavaScript kodları, fontlar – cihazlarında saklanması anlamına gelir. Bu sayede kullanıcı aynı siteye tekrar girdiğinde, tüm bu dosyaları yeniden indirmek yerine yerel cihazından yükler ve sayfa anında açılır. Bu mekanizma hem sunucu yükünü azaltır hem de kullanıcı deneyimini olağanüstü iyileştirir. Bu rehberde, tarayıcı önbelleğinden nasıl maksimum verim alacağınızı, hangi dosyaların ne kadar süreyle önbellekte tutulması gerektiğini ve farklı sunucu yapılandırmalarında önbellekleme stratejilerini detaylıca öğreneceksiniz.

Tarayıcı Önbelleği Nedir?

Tarayıcı önbelleği, web tarayıcısının kullanıcının bilgisayarında veya mobil cihazında geçici olarak web sayfası kaynaklarını depoladığı bir mekanizmadır. Bu kaynaklar arasında HTML dosyaları, CSS stil sayfaları, JavaScript dosyaları, görseller, video dosyaları ve fontlar bulunur. Önbellekleme sistemi HTTP başlıkları (headers) aracılığıyla kontrol edilir. Web sunucunuz, her dosya için tarayıcıya “bu dosyayı 30 gün sakla” veya “bu dosyayı her seferinde yeniden indir” gibi talimatlar verir. Bu talimatlar Cache-Control, Expires ve ETag gibi HTTP başlıkları ile iletilir.

Önbellekleme stratejinizi doğru kurguladığınızda, tekrar ziyaret eden kullanıcılarınız için sayfa yükleme süresi 3 saniyeden 0.5 saniyeye düşebilir. Bu sadece teknik bir iyileştirme değil, aynı zamanda işletmeniz için somut getiriler sağlayan bir optimizasyondur.

Peki tarayıcı önbelleği mutlaka etkinleştirilmeli mi? Google hızlı yüklenen web sitelerini tercih eder. Ziyaretçiler ise hızlı web deneyimlerini sever. Tarayıcı önbelleği sayfa yükleme sürelerini önemli ölçüde iyileştirir. Ayrıca tarayıcı önbelleğe alma sunucu yükünü azaltır. Tarayıcıların daha önce indirilmiş kaynakları yeniden kullanmasına izin vererek, sunucunuza yapılan istek sayısını azaltabilirsiniz.

# HTTP Önbellekleme Başlıkları: Cache-Control, Expires ve ETag

Tarayıcı önbelleği, sunucunuzun gönderdiği HTTP başlıkları aracılığıyla kontrol edilir. Bu başlıklar, tarayıcıya hangi dosyaların ne kadar süre önbellekte tutulacağını ve ne zaman yenilenmesi gerektiğini söyler. Üç temel başlık bulunur ve her birinin kendine özgü kullanım alanları vardır.

• Cache-Control (Modern Standart)– En güçlü ve esnek önbellekleme başlığıdır. HTTP/1.1 ile gelmiştir ve günümüzde öncelikli olarak kullanılması gereken yöntemdir.
• Expires (Eski Yöntem)– HTTP/1.0 döneminden kalma bir başlıktır. Belirli bir tarihe kadar önbellekleme yapar. Cache-Control ile birlikte kullanılırsa Cache-Control öncelik kazanır.
• ETag (Doğrulama)– Dosyanın benzersiz bir parmak izi gibidir. Tarayıcı, dosyanın değişip değişmediğini kontrol etmek için ETag kullanır ve gereksiz indirmeleri önler.

Cache-Control başlığı birden fazla direktifi bir arada kullanabilir. İşte en yaygın direktifler ve ne zaman kullanılacakları:

• Pratik Örnekler:

# Statik görseller için (1 yıl)
Cache-Control: public, max-age=31536000, immutable

# CSS ve JavaScript için (1 ay)
Cache-Control: public, max-age=2592000

# HTML sayfaları için (önbellekleme ama her zaman doğrula)
Cache-Control: no-cache, must-revalidate

# Kullanıcı oturum verileri için (önbellekleme yapma)
Cache-Control: private, no-store, must-revalidate

ETag kullanımı ise şu şekilde çalışır: Sunucu her dosya için benzersiz bir hash değeri oluşturur (örn: “686897696a7c876b7e”). Tarayıcı dosyayı indirirken bu ETag değerini de saklar. Sonraki ziyaretlerde tarayıcı “If-None-Match: 686897696a7c876b7e” başlığıyla sunucuya sorar. Eğer dosya değişmemişse sunucu 304 Not Modified yanıtı verir ve dosya tekrar indirilmez.

Apache Sunucusunda Tarayıcı Önbelleği Yapılandırması

Apache, dünya çapında en yaygın kullanılan web sunucularından biridir ve .htaccess dosyası aracılığıyla kolayca önbellekleme kuralları oluşturabilirsiniz. Apache’de önbellekleme için iki temel modül kullanılır: mod_expires ve mod_headers. Bu modüllerin sunucunuzda aktif olduğundan emin olmalısınız.

• SSH ile sunucunuza bağlanıp aşağıdaki komutu çalıştırarak modüllerin aktif olup olmadığını kontrol edebilirsiniz:

apache2ctl -M | grep -E 'expires|headers'

• Eğer modüller listelenmediyse, root yetkisiyle şu komutlarla aktif edebilirsiniz:

a2enmod expires
a2enmod headers
systemctl restart apache2

• Web sitenizin kök dizinindeki .htaccess dosyasını açın (yoksa oluşturun) ve aşağıdaki kapsamlı önbellekleme yapılandırmasını ekleyin:

# ETags'i aktif et
FileETag MTime Size

  # Expires başlıklarını aktif et
  ExpiresActive On
  
  # Varsayılan önbellekleme süresi (1 hafta)
  ExpiresDefault "access plus 1 week"
  
  # HTML - Önbellekleme ama doğrula
  ExpiresByType text/html "access plus 0 seconds"
  
  # CSS - 1 ay
  ExpiresByType text/css "access plus 1 month"
  
  # JavaScript - 1 ay
  ExpiresByType application/javascript "access plus 1 month"
  ExpiresByType application/x-javascript "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  
  # Görseller - 1 yıl
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"
  
  # Fontlar - 1 yıl
  ExpiresByType font/woff "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType application/font-woff "access plus 1 year"
  ExpiresByType application/font-woff2 "access plus 1 year"
  ExpiresByType application/x-font-woff "access plus 1 year"
  ExpiresByType application/x-font-ttf "access plus 1 year"
  ExpiresByType application/x-font-otf "access plus 1 year"
  
  # Video - 1 ay
  ExpiresByType video/mp4 "access plus 1 month"
  ExpiresByType video/webm "access plus 1 month"
  
  # PDF - 1 ay
  ExpiresByType application/pdf "access plus 1 month"

  # Statik dosyalar için Cache-Control başlıkları
  Header set Cache-Control "public, max-age=31536000, immutable"
   
  # HTML dosyaları için  
  Header set Cache-Control "no-cache, must-revalidate"
  
  
  # Video dosyaları için
  Header set Cache-Control "public, max-age=2592000"

📌 CSS ve JavaScript dosyalarınızı güncelledikten sonra kullanıcıların yeni sürümü görmesi için dosya adına versiyon parametresi ekleyin: style.css?v=2.0 veya script-v2.0.js. Bu sayede uzun önbellekleme süreleri kullanabilirsiniz.

Yapılandırmayı yaptıktan sonra .htaccess dosyasını kaydedin ve sunucunuzu yeniden başlatın. Apache otomatik olarak yeni kuralları algılayacaktır. Değişiklikleri test etmek için tarayıcınızın geliştirici araçlarını (F12) açıp Network sekmesinden response headers kısmına bakabilirsiniz.

Nginx Sunucusunda Önbellekleme Yapılandırması

Nginx, yüksek performansı ve düşük kaynak tüketimiyle bilinen modern bir web sunucusudur. Özellikle yüksek trafikli siteler ve uygulamalar için tercih edilir. Nginx’te önbellekleme yapılandırması Apache’den farklı şekilde çalışır ve genellikle daha performanslıdır.

• Nginx yapılandırması genellikle /etc/nginx/nginx.conf veya site özelinde /etc/nginx/sites-available/siteniz.com dosyasında yapılır. Aşağıda kapsamlı bir önbellekleme yapılandırması bulunmaktadır:

server {
    listen 80;
    server_name siteniz.com www.siteniz.com;
    root /var/www/html;
    
    # Genel önbellekleme ayarları
    add_header X-Cache-Status $upstream_cache_status;
    
    # HTML dosyaları - önbellekleme yapma
    location ~* \.html?$ {
        expires -1;
        add_header Cache-Control "no-cache, no-store, must-revalidate";
        add_header Pragma "no-cache";
    }
    
    # CSS ve JavaScript - 1 ay
    location ~* \.(css|js)$ {
        expires 30d;
        add_header Cache-Control "public, max-age=2592000, immutable";
        access_log off;
    }
    
    # Görseller - 1 yıl
    location ~* \.(jpg|jpeg|png|gif|svg|ico|webp)$ {
        expires 365d;
        add_header Cache-Control "public, max-age=31536000, immutable";
        access_log off;
    }
    
    # Fontlar - 1 yıl
    location ~* \.(woff|woff2|ttf|otf|eot)$ {
        expires 365d;
        add_header Cache-Control "public, max-age=31536000, immutable";
        add_header Access-Control-Allow-Origin "*";
        access_log off;
    }
    
    # Medya dosyaları - 1 ay
    location ~* \.(mp4|mp3|webm|ogg|pdf|zip)$ {
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";
        access_log off;
    }
    
    # API endpoint'leri - önbellekleme yapma
    location /api/ {
        expires -1;
        add_header Cache-Control "no-cache, no-store, must-revalidate";
    }
    
    # ETag desteği
    etag on;
    
    # Gzip sıkıştırma (önbellekleme ile birlikte kullanın)
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript 
               application/x-javascript application/xml+rss 
               application/javascript application/json;
}

• Nginx’i reverse proxy olarak kullanıyorsanız, sunucu tarafında da önbellekleme yapabilirsiniz. Bu, backend sunucunuza gelen yükü dramatik şekilde azaltır:

# nginx.conf dosyasının http bloğuna ekleyin
http {
    # Önbellek yolunu ve ayarlarını tanımla
    proxy_cache_path /var/cache/nginx 
                     levels=1:2 
                     keys_zone=my_cache:10m 
                     max_size=10g 
                     inactive=60m 
                     use_temp_path=off;
    
    server {
        location / {
            proxy_pass http://backend_server;
            
            # Önbellek kullan
            proxy_cache my_cache;
            proxy_cache_use_stale error timeout http_500 http_502 http_503;
            proxy_cache_background_update on;
            proxy_cache_lock on;
            
            # Önbellekleme süreleri
            proxy_cache_valid 200 302 10m;
            proxy_cache_valid 404 1m;
            
            # Önbellek durumunu başlık olarak ekle
            add_header X-Cache-Status $upstream_cache_status;
        }
    }
}

• Yapılandırma Dosyasını Düzenle– Yukarıdaki kodu uygun Nginx yapılandırma dosyasına ekleyin.
• Syntax Kontrolü Yap– nginx -t komutuyla yapılandırmanızı test edin.
• Nginx’i Yeniden Başlat– systemctl reload nginx ile değişiklikleri uygulayın.
• Test ve Doğrulama– Browser DevTools ile Cache-Control başlıklarını kontrol edin.

Nginx yapılandırmasını yaptıktan sonra sitenizin performansında belirgin bir iyileşme göreceksiniz. Özellikle statik içerik ağırlıklı sitelerde sayfa yükleme süreleri yarı yarıya düşebilir.

WordPress’te Tarayıcı Önbelleği Optimizasyonu

WordPress, dünya çapında web sitelerinin %43’ünde kullanılan en popüler içerik yönetim sistemidir. Ancak varsayılan kurulumda önbellekleme optimizasyonları oldukça sınırlıdır. WordPress sitenizde tarayıcı önbelleğini optimize etmek için hem önbellek eklentileri hem de manuel yöntemler kullanabilirsiniz.

• WP Rocket– WP Rocket, WordPress için en kapsamlı önbellekleme eklentisidir. Kurulumu son derece basittir ve aktif ettiğiniz anda otomatik olarak tarayıcı önbelleği kurallarını yapılandırır.
  • Sayfa önbelleği ve tarayıcı önbelleği
  • CSS/JS minification ve birleştirme
  • Lazy loading desteği
  • CDN entegrasyonu
  • Veritabanı optimizasyonu.
• W3 Total Cache– Ücretsiz olmasına rağmen çok güçlü özelliklere sahip bir önbellekleme eklentisidir. Daha teknik bilgi gerektirir ancak profesyonel sonuçlar verir.
  • Tarayıcı önbelleği yapılandırması
  • Obje önbelleği (Redis, Memcached)
  • Veritabanı önbelleği
  • CDN desteği
  • Minification özellikleri.
• LiteSpeed Cache– LiteSpeed web sunucusu kullanan hostinglerde mükemmel çalışır. Sunucu seviyesinde önbellekleme yaparak olağanüstü performans sağlar.
  • Otomatik sayfa önbelleği
  • Nesne önbelleği desteği
  • Görsel optimizasyonu (WebP dönüşümü)
  • Critical CSS oluşturma
  • Ücretsiz CDN (QUIC.cloud)

💡 Eklenti kullanmak istemiyorsanız, WordPress temanızın functions.php dosyasına aşağıdaki kodu ekleyerek tarayıcı önbelleği başlıklarını kontrol edebilirsiniz:

// Tarayıcı önbelleği başlıklarını ayarla
function ozgun_tarayici_onbellegi() {
    if (!is_admin()) {
        // Statik dosyalar için uzun önbellekleme
        if (preg_match('/\.(jpg|jpeg|png|gif|svg|ico|css|js|woff|woff2|ttf)$/i', $_SERVER['REQUEST_URI'])) {
            header('Cache-Control: public, max-age=31536000, immutable');
            header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 31536000) . ' GMT');
        }
        // HTML sayfaları için kısa önbellekleme
        else {
            header('Cache-Control: no-cache, must-revalidate, max-age=0');
        }
    }
}
add_action('send_headers', 'ozgun_tarayici_onbellegi');

// CSS ve JS dosyalarına versiyon ekle
function ozgun_asset_versiyonlama($src) {
    if (strpos($src, 'ver=')) {
        return $src;
    }
    $tema_surumu = wp_get_theme()->get('Version');
    return add_query_arg('ver', $tema_surumu, $src);
}
add_filter('style_loader_src', 'ozgun_asset_versiyonlama', 9999);
add_filter('script_loader_src', 'ozgun_asset_versiyonlama', 9999);

• Yapılması Gerekenler:
  • Statik dosyaları CDN üzerinden sunun
  • Görselleri optimize edin ve WebP formatını kullanın
  • Kullanılmayan eklentileri devre dışı bırakın
  • Veritabanını düzenli olarak temizleyin
  • Object Cache (Redis/Memcached) kullanın
  • Lazy loading aktif edin
  • CSS ve JavaScript dosyalarını minify edin
• Yapılmaması Gerekenler:
  • Çok fazla önbellekleme eklentisi kullanmayın
  • Admin panelini önbelleklemeyin
  • E-ticaret sepet sayfalarını önbelleklemeyin
  • Kullanıcı oturum sayfalarını önbelleklemeyin
  • Aşırı uzun önbellekleme süreleri kullanmayın
  • Test etmeden ayarları değiştirmeyin

📌 WordPress’te başarılı bir önbellekleme stratejisi, hosting altyapınız, site trafiğiniz ve içerik güncelleme sıklığınıza bağlıdır. Küçük bir blog için basit bir eklenti yeterli olabilirken, yüksek trafikli bir e-ticaret sitesi için sunucu seviyesinde önbellekleme ve CDN kullanımı şarttır.

Tarayıcı önbelleği yapılandırmanızı yaptıktan sonra, ayarlarınızın doğru çalışıp çalışmadığını ve ne kadar performans kazancı sağladığını test etmeniz faydalı olur. Yanlış yapılandırılmış önbellekleme, beklenenin aksine sorunlara yol açabilir.

• Google PageSpeed Insights– Google’ın ücretsiz hız testi aracı hem mobil hem de masaüstü performansınızı ölçer. “Tarayıcı önbelleğinden yararlanma” uyarısını kontrol edin ve Core Web Vitals puanlarınıza bakın. 90+ puan almak için önbellekleme şarttır.
• GTmetrix– Detaylı performans analizi sunan profesyonel bir araçtır. Waterfall grafiği ile hangi dosyaların önbelleklendiğini görsel olarak görebilirsiniz. Farklı lokasyonlardan test yapma imkanı sunar.
• WebPageTest (webpagetest.org)- En kapsamlı test aracıdır. Gerçek tarayıcılarda test yapar ve önbellekleme başlıklarını detaylıca gösterir. “Repeat View” metriği önbellekleme performansınızı net şekilde ortaya koyar.
• Browser DevTools– Tarayıcınızın yerleşik geliştirici araçları (F12) en hızlı test yöntemidir. Network sekmesinde “Disable cache” seçeneğini kapatın ve sayfayı yenileyin. Response headers’da Cache-Control başlıklarını kontrol edin.

WordPress tarayıcı önbellekleme işlemi için optimizasyon eklentilerinden de faydalanabilirsiniz. Bir çoğunda bu özellik mevcut ve tek tıkla halledebilirsiniz.WP Rocket, LiteSpeed Cache, W3 Total Cache eklentileri önerebileceğimiz en iyi Önbellek ve optimizasyon eklentilerindendir. Daha fazlası için “En iyi WordPress Önbellek Eklentileri” lve ayrıca “WordPress Site Haritasını Önbellekten Hariç Tutma” kılavuzumuza da bakabilirsiniz.