Tarayıcı Önbelleği: Cache-Control ve Sürümlü Dosya Adları

Tarayıcı Önbelleği: Cache-Control ve Sürümlü Dosya Adları, Web Geliştirme alanında sıkça karşılaşılan ve doğru uygulandığında fark yaratan konulardan biri. Bu yazı konuyu 5 temel noktada ele alıyor, çalışan bir PHP örneği üzerinden ilerliyor, sonunda da uygulamada nelere dikkat edilmesi gerektiğini özetliyor.

Tarayıcı Önbelleği: Cache-Control ve Sürümlü Dosya Adları nedir, neden önemlidir?

Her sayfa açılışında aynı CSS, JavaScript ve yazı tipi dosyalarını yeniden indirmek hem kullanıcıyı bekletir hem de sunucuyu yorar. Doğru Cache-Control başlıklarıyla bu dosyalar tarayıcıda bir yıl saklanabilir; dosya adresine eklenen sürüm bilgisi sayesinde de güncellemeler anında kullanıcıya ulaşır.

Kritik noktalar

• Uzun ömür ve sürüm: Statik dosyalara bir yıllık max-age verin; dosya değiştiğinde adresi de değiştiği için tarayıcı yenisini indirir.
• immutable: Bu yönerge, tarayıcının sayfa yenilemede bile dosyayı yeniden doğrulamaya çalışmasını engeller.
• HTML için no-cache: no-cache "saklama" değil "kullanmadan önce sunucuya sor" demektir; HTML sayfaları her zaman güncel kalır.
• ETag ve Last-Modified: Doğrulama gerektiren yanıtlarda sunucu 304 Not Modified döndürerek dosyayı yeniden göndermez.
• Kişisel veriye dikkat: Oturum bilgisi içeren yanıtlarda private ya da no-store kullanın; ortak önbelleklerde saklanmasınlar.

Örnek kod

Teoriyi somutlaştırmak için kısa bir PHP örneğine bakalım:

// Dosya değiştikçe adresi de değişir: /css/site.css?v=1730355600
function varlik(string $yol): string
{
    $dosya = __DIR__ . '/public/' . ltrim($yol, '/');
    return '/' . ltrim($yol, '/') . (is_file($dosya) ? '?v=' . filemtime($dosya) : '');
}
?>
<link rel="stylesheet" href="<?= varlik('css/site.css') ?>">
<script src="<?= varlik('js/app.js') ?>" defer></script>
<?php
/* .htaccess (Apache / LiteSpeed):
<FilesMatch "\.(css|js|woff2|webp|avif|svg)$">
    Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>
*/

Örneği kendi projenize uyarlarken değişken adlarını ve yapılandırma değerlerini ortamınıza göre değiştirmeyi unutmayın.

Size ne kazandırır?

Kısaca özetlemek gerekirse:

• Bakımı kolay ve okunur bir kod tabanı sağlar
• Farklı cihaz ve tarayıcılarda tutarlı sonuç verir
• Ekip içinde ortak bir uygulama standardı oluşturur
• Sayfa performansını ve kullanıcı deneyimini iyileştirir

Son söz

Bu yazı boyunca Tarayıcı Önbelleği: Cache-Control ve Sürümlü Dosya Adları konusunun temel taşlarını ve uygulamada dikkat edilmesi gerekenleri gördük. Özellikle Uzun ömür ve sürüm ve Kişisel veriye dikkat başlıklarını uygulamaya geçirmek iyi bir başlangıç olur.

İlgili içerikler:

• MySQL İndeksleri ile Sorgu Hızlandırma
• JavaScript Fetch API ve async/await ile Veri Çekme
• Tailwind CSS ile Titreşimsiz Dark Mode

Daha fazla uygulamalı içerik için Akademi derslerine ve blog yazılarına göz atabilirsiniz.