Tarayıcı Önbelleğe Alma (Google Pagespeed)

243
.htaccess ile Tarayıcı Önbelleğe Alma (Google Pagespeed)
.htaccess ile Tarayıcı Önbelleğe Alma (Google Pagespeed)

Bu işlem eskiden çok önemli olmayan ancak SEO açısından günümüzün en önemli konularından biridir. Çünkü SEO için site hızı 3 temel şarttan biridir. Hız, otorite ve kullanıcı deneyimi… Web sitenizin daha hızlı yüklenmesini sağlamak için Google tarafından önerilen yüksek öncelikli görevlerden biridir.

Normalde .htaccess ile tarayıcı önbelleğe alma hosting trafik kullanımını azaltmak, sunucu yükünü düşürmek ve site açılış gecikmelerini azaltmak için kullanılıyor. Bu sayede proxy ve web tarayıcıların sitenizdeki dosya ve dizinleri ne kadar süre ile önbellekte tutulması gerektiği gibi işlemlerin kontrol edilebilmesini sağlıyor.

Anlaşılır olarak anlatmak gerekirse bir ziyaretçi sitenize girdiğinde sitenizi oluşturan sayfalar, cssler, java scriptler ve görseller gibi elementler ziyaretçinin bilgisayarında bulunan geçici (Temp) klasörüne yüklenir. Kullanıcı sitenizde başka bir sayfaya geçerse veya ilerde sitenize bir daha geldiğinde tarayıcı tüm kaynakları indirmek zorunda kalmak yerine geçici önbellekte bulunan kopyayı gösterir. Tarayıcı sadece farklı olan şeyleri indirecektir.

Bu aynı zamanda web sunucunuz tarafından bant genişliği tüketimini azaltmaya yardımcı olur ve ayrıca sunucu üzerindeki yükü azaltır.

Bu konu uzun ve üzerinde durulması gereken bir konu olduğundan, Seo ve dolayısıyla Google açısından önemini de bildiğimizden ayrı bir başlık olarak anlatmakta fayda var. Bu sebeple Google Pagespeed veya Gmetrix hatalarının başında gelen ve özellikle wordpress kullanıcılarının müzdarip olduğu bu konudur.

Tarayıcı önbelleklemeyi yapan bir çok WordPress eklentisi olsa da sadece bunun için eklenti yükleyip sitemize ekstra yük bindirmeye gerek olmadığını düşünüyorum.

Görüntüler ve CSS dosyaları gibi kaynakların son kullanma süresini ayarlamak için, bu, barındırma sunucunuzun kök dizininde bulunan .htaccess dosyanızda küçük bir değişiklik yapılmasını gerektirir. Tarayıcı önbelleğe alma sorununu aşağıdaki kodları kullanarak çözebilirsiniz.

# Enable GZIP 
<ifmodule mod_deflate.c> 
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript 
BrowserMatch ^Mozilla/4 gzip-only-text/html 
BrowserMatch ^Mozilla/4\.0[678] no-gzip 
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html 
</ifmodule>

# BEGIN Cache-Control Headers
<IfModule mod_expires.c>
<IfModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header append Cache-Control "public" 
</filesMatch>
<filesMatch "\.(css)$">
Header append Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header append Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header append Cache-Control "private, must-revalidate"
</filesMatch>
</IfModule>
</IfModule>

#Customize expires cache start - adjust the period according to your needs

  FileETag MTime Size
  AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
  ExpiresActive On
  ExpiresByType text/html "access 600 seconds"
  ExpiresByType application/xhtml+xml "access 600 seconds"
  ExpiresByType text/css "access 1 month"
  ExpiresByType text/javascript "access 1 month"
  ExpiresByType text/x-javascript "access 1 month"
  ExpiresByType application/javascript "access 1 month"
  ExpiresByType application/x-javascript "access 1 month"
  ExpiresByType application/x-shockwave-flash "access 1 month"
  ExpiresByType application/pdf "access 1 month"
  ExpiresByType image/x-icon "access 1 year"
  ExpiresByType image/jpg "access 1 year"  
  ExpiresByType image/jpeg "access 1 year"
  ExpiresByType image/png "access 1 year"
  ExpiresByType image/gif "access 1 year"
  ExpiresDefault "access 1 month"

#Expires cache end

Yukarıdaki kod ile CSS ve Javascript gibi dosyaları ayda bir kez sona erecek şekilde değiştirirken, sayfanızın HTML’si gibi hızla yenilenen dosyaları 600 saniye sonra sona erecek şekilde ayarladık. Bu, ziyaretçiniz bir ay içinde ziyaretçiyi tekrar ziyaret ederse, CSS ve JS dosyalarını yeniden indirmeleri gerekmeyeceği anlamına gelir.

Sitenizde değişikliğe uğramayan veya çok nadir değişen dosyalarınızı (Örnek; jpeg veya png gibi) ön bellekleme süresini 1 yıl olarak ayarlayabilirsiniz.

Yukarıdaki işlem WordPress veya bir .htaccess dosyasını kullanan diğer web siteleri için tarayıcı önbelleğe almanın en etkili yoludur.

CDN veya Birden Fazla Sunucu Kullanıyorsanız

Eğer sitenizde CND veya birden fazla sunucu kullanıyorsanız aşağıdaki kodu .htaccess dosyanıza eklemeniz gerekmektedir.

Etag’lar, genellikle bir siteyi barındıran her belirli makineye benzersiz kılan öznitelikler kullanılarak oluşturulan başlıklardır.

Bir web sitesi sayfalarına hizmet vermek için bir CDN veya birden çok sunucu kullanıyorsa, ziyaretçinin sonraki gelişinde de aynı sunucuyu sunucudan sitenize erişemeyebilir. Bu nedenle bir tarayıcı orijinal bileşeni sunucu üzerinde doğrulamaya çalıştığında etiketler eşleşmeyecektir. Bu karışıklığı ortadan kaldırmak için Etag etiketlerini unset yapmak iyi bir çözüm yoludur. ETag’ları kapatmak için aşağıdaki kodu .htaccess’inize ekleyebilirsiniz.

# Disable ETags
<IfModule mod_headers.c>
	Header unset ETag
</IfModule>
FileETag Nonedd

 

.htaccess Hangi Amaçlar İçin Kullanılır?

CEVAP VER

Please enter your comment!
Please enter your name here