Sayfa hızı optimizasyonunda en kritik bileşenlerden biri, statik varlıkların ziyaretçinin tarayıcısında ne kadar süre tutulacağını belirleyen tarayıcı önbelleklemesidir. Web sitelerinde kullanılan resimler, fontlar, CSS ve JavaScript gibi dosyaların yerel olarak ne kadar süre saklanacağını .htaccess dosyası üzerinden belirlemek, sonraki sayfa ziyaretlerinde bu dosyaların yeniden indirilmesini engeller. Sektör verilerine bakıldığında, doğru yapılandırılmış önbellekleme politikaları, ortalama sayfa yükleme süresini %35'e kadar azaltabilmektedir.

Bu mekanizma sayesinde, kullanıcılar sitenizde gezinirken daha az veri indirir; bu da hem kullanıcı deneyimini (UX) iyileştirir hem de sunucu yükünü hafifleterek sitenizin genel yükleme hızını artırır. Web sitenizi Google PageSpeed Insights gibi araçlarla test ettiğinizde genellikle "Tarayıcı önbellekleme özelliğinden yararlanın" (Leverage Browser Caching) uyarısı alırsınız. Bu uyarıyı gidermek, sitenizin performans skorunu doğrudan etkiler.

Tarayıcı Önbellekleme Özelliğinden Yararlanma ve .htaccess Yapılandırması

Tarayıcı önbellekleme, bir kullanıcının web sitesini ilk ziyaretinden sonra, sitenin statik dosyalarını yerel cihazında depolamasını sağlayan bir mekanizmadır. Bu durum, aynı kullanıcının siteye yaptığı sonraki ziyaretlerde, tarayıcının bu dosyaları sunucudan tekrar istemek yerine doğrudan yerel kopyayı kullanmasına olanak tanır.

Tarayıcı önbellekleme yönergelerini etkinleştirmek için, sunucu yapılandırma dosyası olan .htaccess dosyanıza aşağıdaki kuralları ekleyebilirsiniz. Bu kod bloğu, özellikle resimler için bir yıla kadar, stil ve script dosyaları için ise bir aya kadar önbellekleme süreleri tanımlar. HTML dosyaları için ise 600 saniye (10 dakika) gibi daha kısa bir süre belirlenmiştir, zira HTML içeriği daha sık güncellenebilir.

# Enable Compression

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
</IfModule>

# Leverage Browser Caching
<IfModule mod_expires.c>
  ExpiresActive On

  # Images
  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
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  # Others
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
  ExpiresByType text/html "access plus 600 seconds"

  # Fonts
  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 ##

Bu .htaccess güncellemeleri, Google PageSpeed Insights'taki tarayıcı önbellekleme sorununu çözmenin yanı sıra, sitenizin ilk yükleme performansını da doğrudan destekler. WordPress kullanıyorsanız, bu tür karmaşık sunucu ayarlarını, teknik SEO hizmeti süreçlerinin bir parçası olarak ele alan LiteSpeed Cache gibi eklentilerle çok daha kolay yönetebilirsiniz.

WordPress LiteSpeed Cache Ayarları (En İyi Performans)

Gzip Sıkıştırmasını Etkinleştirme Yoluyla Sayfa Boyutunu Küçültme

GZIP sıkıştırması, sunucudan istemciye gönderilen veri miktarını azaltarak web sitesi performansını radikal bir şekilde artırır. Bir ziyaretçi sitenize eriştiğinde, sunucu HTML, CSS, JavaScript ve XML gibi metin tabanlı dosyaları sıkıştırır, böylece dosya boyutu küçülür ve internet üzerinden transfer süresi kısalır. Araştırmalara göre, GZIP sıkıştırması dosya boyutlarını ortalama %70 oranında küçültebilir, bu da özellikle mobil kullanıcılar için kritik bir hız avantajı sağlar ve doğrudan site içi SEO çalışmalarınızın bir parçasıdır.

GZIP sıkıştırmasını aktif etmek, sadece hızınızı değil, aynı zamanda kullanıcıların sitenizde gezinirken harcadığı veri miktarını da düşürerek genel erişilebilirliğe katkıda bulunur.

<IfModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

Tarayıcı Önbellek Kontrolü İçin Header Yönergeleri

Önbellek kontrolü (Cache Control), tarayıcı önbellekleme işleminin ne kadar katı veya esnek olacağını detaylıca yönetmemizi sağlar. Aşağıdaki kod bloğunda, .htaccess modülü olan mod_headers.c kullanılarak farklı dosya türleri için özel max-age değerleri belirlenmiştir. Örneğin, ICO, JPG, PNG gibi görsel varlıklar için 2.678.400 saniye (yaklaşık 1 yıl) gibi uzun bir süre belirlenmiştir. Buna karşılık, HTML dosyaları için 7200 saniye (2 saat) gibi daha kısa bir süre tanınır, çünkü HTML yapısı daha sık değişebilir.

Bu detaylı kontrol, kaynakların güncelliğini korurken performansı maksimize etmek için gereklidir. Eğer belirli bir dosya türünün (örneğin png) bu süre boyunca önbelleğe alınmasını istemiyorsanız, ilgili satırı listeden çıkarabilirsiniz.

# This sets up browser cache control
<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>
# END Cache-Control Headers

Lazy Load Nedir? Nasıl Kullanılır?

Yukarıdaki örnek .htaccess dosyasını indirmek isterseniz, GitHub profilimizi ziyaret edebilirsiniz. Tarayıcı önbellekleme ve sıkıştırma optimizasyonları, web sitenizin Core Web Vitals metriklerini iyileştirerek hem kullanıcı memnuniyetini hem de arama motoru sıralamalarını olumlu yönde etkiler.