Merhaba arkadaşlar, bugün performans optimizasyonu yaparken başımı çok ağrıtan bir konuyu, statik asset'lerin önbelleklenmesini nasıl "kurşun geçirmez" hale getirdiğimi anlatacağım. Özellikle React, Vue veya herhangi bir modern frontend framework'ü ile çalışıyorsanız, build sonrası oluşan chunk.js ve style.css dosyalarının tarayıcı önbelleğine doğru şekilde alınmaması, kullanıcılarınızın her seferinde aynı dosyaları indirmesine neden oluyor. Bu da hem gereksiz bant genişliği hem de yavaş sayfa yüklenmesi demek. İşte benim bulduğum en temiz çözüm.
Sorun: Build Edilmiş Dosyalar Neden Yeniden İndiriliyor?
Projemde Webpack kullanıyordum ve her build'de dosya isimlerine hash ekleniyordu (örn: main.abc123.js). Mantıken, dosya adı değiştiği için tarayıcı yeni dosyayı indirmeliydi. Ancak, cache header'larını doğru ayarlamadığım için, bazen tarayıcılar "304 Not Modified" isteği atıyor ve sunucuyla gereksiz bir el sıkışma yaşanıyordu. Bazen de kullanıcılar eski dosyaları cache'inden okumaya devam ediyordu. Bu karmaşayı çözmek için Cache-Control header'ının tüm gücünü kullanmaya karar verdim.
Çözüm: Cache-Control: public, max-age=31536000, immutable
Araştırmalarım sonucu, değişmeyecek statik asset'ler için en agresif ve güvenli önbellek stratejisinin bu olduğunu gördüm. Peki bu parametreler ne anlama geliyor?
public: Yanıtın hem kullanıcının tarayıcısı hem de aradaki CDN (Cloudflare, CloudFront vb.) gibi tüm ara önbellekler tarafından saklanabileceğini söyler.
max-age=31536000: Bu, saniye cinsinden bir yıla denk gelir (365 gün 24 saat 60 dakika 60 saniye). Tarayıcıya "bu dosyayı bir yıl boyunca önbelleğinden oku, bana sorma" talimatını verir.
immutable: Bu sihirli kelime ise tarayıcıya "bu dosya asla değişmeyecek, sen önbelleğinde ne varsa onu kullan, sunucuya doğrulama isteği (revalidation request) gönderme" mesajını iletir. Bu, gereksiz 304 isteklerini tamamen ortadan kaldırır.
Nginx ile Uygulama (Backend/DevOps Tarafı)
Ben sunucu olarak Nginx kullanıyorum. Build edilmiş ve hash'li dosyalarım `dist/` klasöründe duruyor. Nginx konfigürasyonumda, bu dosyalara özel bir location bloğu oluşturdum.
Bu konfigürasyonla, belirtilen uzantılara sahip TÜM statik dosyalarım bir yıl boyunca ve "immutable" olarak önbelleklenecek. expires 1y; direktifi de eski tarayıcılar için fallback sağlıyor.
ÇOK ÖNEMLİ UYARI: Sadece Hash'li Dosyalar İçin!
Bu stratejiyi kesinlikle içeriği değişebilecek dosyalarda (örneğin `index.html` veya hash'siz `main.js`) kullanmayın! Bu header'ı sadece her build'de ismi kesin olarak değişen (content hash'li) dosyalara uygulayın. `index.html` için `no-cache` veya çok kısa bir `max-age` kullanmanız gerekir, çünkü `index.html` yeni JS/CSS dosya isimlerini işaret eden giriş noktasıdır.
Sonuç olarak, bu ayardan sonra sayfa yükleme hızımda gözle görülür bir artış oldu. Lighthouse skorlarım, özellikle "Best Practices" ve "Performance" alanlarında yükseldi. CDN kullanım maliyetim düştü çünkü artık origin sunucuma gereksiz istekler gitmiyor.
Peki ya siz? Statik asset önbellekleme için hangi yöntemi kullanıyorsunuz? Hiç `immutable` attribute'ünü kullanırken beklenmedik bir sorunla karşılaştınız mı? Özellikle Node.js (Express) veya Laravel kullanan arkadaşlar, siz bu header'ı nasıl ekliyorsunuz? Yorumlarda deneyimlerinizi paylaşın!
Sorun: Build Edilmiş Dosyalar Neden Yeniden İndiriliyor?Projemde Webpack kullanıyordum ve her build'de dosya isimlerine hash ekleniyordu (örn: main.abc123.js). Mantıken, dosya adı değiştiği için tarayıcı yeni dosyayı indirmeliydi. Ancak, cache header'larını doğru ayarlamadığım için, bazen tarayıcılar "304 Not Modified" isteği atıyor ve sunucuyla gereksiz bir el sıkışma yaşanıyordu. Bazen de kullanıcılar eski dosyaları cache'inden okumaya devam ediyordu. Bu karmaşayı çözmek için Cache-Control header'ının tüm gücünü kullanmaya karar verdim.
Çözüm: Cache-Control: public, max-age=31536000, immutableAraştırmalarım sonucu, değişmeyecek statik asset'ler için en agresif ve güvenli önbellek stratejisinin bu olduğunu gördüm. Peki bu parametreler ne anlama geliyor?
public: Yanıtın hem kullanıcının tarayıcısı hem de aradaki CDN (Cloudflare, CloudFront vb.) gibi tüm ara önbellekler tarafından saklanabileceğini söyler.
max-age=31536000: Bu, saniye cinsinden bir yıla denk gelir (365 gün 24 saat 60 dakika 60 saniye). Tarayıcıya "bu dosyayı bir yıl boyunca önbelleğinden oku, bana sorma" talimatını verir.
immutable: Bu sihirli kelime ise tarayıcıya "bu dosya asla değişmeyecek, sen önbelleğinde ne varsa onu kullan, sunucuya doğrulama isteği (revalidation request) gönderme" mesajını iletir. Bu, gereksiz 304 isteklerini tamamen ortadan kaldırır.
Nginx ile Uygulama (Backend/DevOps Tarafı)Ben sunucu olarak Nginx kullanıyorum. Build edilmiş ve hash'li dosyalarım `dist/` klasöründe duruyor. Nginx konfigürasyonumda, bu dosyalara özel bir location bloğu oluşturdum.
NGINX:
location ~ \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
root /var/www/myapp/dist;
expires 1y;
add_header Cache-Control "public, max-age=31536000, immutable";
add_header X-Content-Type-Options "nosniff";
# Dosya bulunamazsa 404 dön, frontend routing'e karışma
try_files $uri =404;
}Bu konfigürasyonla, belirtilen uzantılara sahip TÜM statik dosyalarım bir yıl boyunca ve "immutable" olarak önbelleklenecek. expires 1y; direktifi de eski tarayıcılar için fallback sağlıyor.
ÇOK ÖNEMLİ UYARI: Sadece Hash'li Dosyalar İçin!Bu stratejiyi kesinlikle içeriği değişebilecek dosyalarda (örneğin `index.html` veya hash'siz `main.js`) kullanmayın! Bu header'ı sadece her build'de ismi kesin olarak değişen (content hash'li) dosyalara uygulayın. `index.html` için `no-cache` veya çok kısa bir `max-age` kullanmanız gerekir, çünkü `index.html` yeni JS/CSS dosya isimlerini işaret eden giriş noktasıdır.
Sonuç olarak, bu ayardan sonra sayfa yükleme hızımda gözle görülür bir artış oldu. Lighthouse skorlarım, özellikle "Best Practices" ve "Performance" alanlarında yükseldi. CDN kullanım maliyetim düştü çünkü artık origin sunucuma gereksiz istekler gitmiyor.
Peki ya siz? Statik asset önbellekleme için hangi yöntemi kullanıyorsunuz? Hiç `immutable` attribute'ünü kullanırken beklenmedik bir sorunla karşılaştınız mı? Özellikle Node.js (Express) veya Laravel kullanan arkadaşlar, siz bu header'ı nasıl ekliyorsunuz? Yorumlarda deneyimlerinizi paylaşın!