Tarayıcı Önbelleğe Alma

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

Eskiden pek önemsenmeyen bu işlem günümüzde arama motorları tarafından çok önemsenen bir konu haline gelmiştir. Web sitelerinin üst sıralarda çıkması için gerekli olan en önemli 3 temel şarttan biridir. Hız, otorite ve kullanıcı deneyimi… Hız için uygulanacak işlemlerden bir tanesi “Tarayıcı Önbelleğe Alma” işlemidir. Ayrıca web sitenizin daha hızlı yüklenmesini sağlamak için Google tarafından önerilen yüksek öncelikli görevlerdendir. Google Kuralları çok fazla konuda yoruma açık olsa bile hız yoruma açık olmayan kurallardandır.

Google Pagespeed veya GTmetrix hatalarının başında gelen ve özellikle wordpress kullanıcılarının müzdarip olduğu bir sorundur. Yukarıda bahsettiğim gibi SEO açısından oldukça önemlidir ve mutlaka site yöneticilerinin üzerinde durması gereken konuların başında gelmelidir.

Tarayıcı Önbelleğe Alma Nasıl Çalışır?

.htaccess ile tarayıcı önbelleğe alma trafik kullanımını azaltmak, sunucu yükünü düşürmek ve site açılış gecikmelerini azaltmak için uygulanan bir yoldur. Bu teknik sayesinde web tarayıcıların (Chorome, Mozilla, Opera gibi) sitenizdeki dosya ve dizinleri ne kadar süre ile önbelleklerin de tutmaları gerektiğini belirlemenize imkan vermektedir.

Daha anlaşılır olması için gerçek hayatta işleyişi anlatmakta fayda var. Bir ziyaretçi web sitenize geldiğinde (Bu bir arama motorundan tıklayarak veya direkt web adresinizi yazarak gelmiş olabilir.) gelmiş olduğu sayfayı oluşturan kodlar, cssler, java scriptler ve görseller gibi elementler kullanıcının tarayıcısı tarafından sunucunuzdan istenir. Sunucu sayfayı oluşturan tüm elementleri tarayıcıya gönderir ve bunları okuyan tarayıcı kullanıcının ekranında sayfanızı gösterir.

Bu arada tarayıcı bu elementleri kullanıcı bilgisayarındaki geçici Temp adındaki klasörde saklar. Ziyaretçi sitenizdeki bir linke tıklayarak başka bir sayfanıza geçtiğinde bu işlem yenilenir. İşte önbelleğe alma işleminde bu TEMP klasöründeki dosyaların ne kadar saklanması gerektiğini belirleriz. Ziyaretçi sitenize bir kez daha geldiğinde tarayıcınız öncelikle temp klasörüne bakar ve sunucudan sadece burada olmayan veya değişikliğe uğramış elementeleri ister.

Yani öncelikle sayfayı sunucudan değil kullanıcının bilgisayarındaki kopyasından getirir. Tabi kullanıcı daha önce sayfanızı ziyaret etmişse bu geçerlidir.

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

.htaccess ile Tarayıcı Önbelleğe Alma Nasıl Yapılır?

.htaccess dosyasının ne olduğunu ve nasıl çalıştığını biliyorsanız bu işlemi yapmanız kolay olacaktır. Bilmiyorsanız öncelikle .htaccess nedir? Makaleme göz atmanızda fayda var.

[su_note]Sunucuda bulunan bu dosya riskli dosyaların başında gelmektedir. Bu sebeple aşağıdaki işlemi yapmadan mevcut .htaccess dosyanızın mutlaka YEDEĞİNİ ALIN.[/su_note]

Görüntüler ve CSS dosyaları gibi sayfalarınızı oluşturan elementlerin ziyaretçilerinizin tarayıcıları tarafından ne kadar süre saklanması gerektiğini ayarlamak için .htaccess dosyanızda küçük bir değişiklik yapmanız gerekmektedir. Aşağıdaki kodları .htaccess dosyanıza ekleyerek Tarayıcı önbelleğe alma sorununu çözebilirsiniz.

Bir önemli not daha aşağıdaki kodlar sadece Linux hosting kullanıcıları içindir. 

# 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 öncelikle GZIP sıkıştırmasını etkinleştirdik. Sonrasında ise CSS ve Javascript gibi dosyaları ayda bir kez, sayfanızın HTML’si gibi hızla yenilenen dosyaları ise 600 saniye, görselleri ise 1 yıl sonra sona erecek şekilde ayarladık.

Yani kullanıcının tarayıcısına “Benim web sitemde gezindiğin sayfalardaki java, pdf ve css dosylarını al bilgisayarında 1 ay sakla, html sayfalarını 10 dk sakla, geri kalan diğer görselleri ise 1 yıl sakla. Eğer bir web sayfama bir daha gelirsen sadece HTML kodlarımı oku ve gerekli olan elementler için benim sunucumu yorma git önce kendi bilgisayarındaki TEMP klasörüne bak.” dedik.

[su_note]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.[/su_note]

CDN veya Birden Fazla Sunucu Kullanıyorsanız

Peki ben CDN kullanıyor ve web siteniz bir sunucuda değil dünyanın farklı köşelerinde bulunan farklı sunucularda saklanıyorsa… Bir ziyaretçi sonraki gelişinde de aynı sunucudan sitenize erişemeyebilir. Bu nedenle bir tarayıcı orijinal bileşeni sunucu üzerinde doğrulamaya çalıştığında etiketler eşleşmeyecektir.

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

Eğer sitenizde CND veya birden fazla sunucu kullanıyorsanız aşağıdaki kodu .htaccess dosyanıza eklemeniz gerekmektedir. 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