.Htaccess ile Tarayıcı Önbellekleme

Htaccess ile Tarayıcı Önbellekleme

Sayfa hızı için en önemli önbellek türü, tarayıcı önbelleklemesidir. Web sitelerinde kullanılan statik dosyaların çoğu, sonraki oturumlar için ziyaretçilerin tarayıcı önbelleğine kaydedilir. Tarayıcı önbelleğinden yararlanmak için web tarayıcılarının resimleri, fontları, CSS ve JS’yi yerel olarak ne kadar süreyle saklaması gerektiğini .htaccess ile belirtmeniz gerekir. Böylece, kullanıcı tarayıcıları, web site sayfalarınızda gezinirken daha az veri indirir ve bu da web sitenizin yükleme hızını artırır.

Tarayıcı Önbellekleme Özelliğinden Yararlanın

Web sitenizi çeşitli araçlarla test ettiğinizde tarayıcı önbellekleme özelliğinden yararlanın veya leverage browser caching uyarısı görebilirsiniz. Tarayıcı önbelleklemeyi etkinleştirmek için bu aşağıdaki kuralları .htaccess dosyanıza ekleyin:

## EXPIRES CACHING ##
# 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 ##

Htaccess dosyanızı bu şekilde güncellediğinizde, Google PageSpeed Insights aracındaki tarayıcı önbellekleme özelliğinden yararlanın (Leverage Browser Caching) hatasının da önüne geçmiş olursunuz. Ayrıca aşağıdaki çeşitli sıkıştırma kurallarını da etkinleştirmeyi düşünebilirsiniz.

Gzip Sıkıştırmasını Etkinleştirme

GZIP sıkıştırmasını etkinleştirmek, web site performansınızı artırır ve sayfa yükleme süresini azaltır. Bir ziyaretçi web sitenize bir istekte bulunduğunda, sunucu istenen sayfayı sıkıştırır, boyutunu önemli ölçüde azaltır ve kullanıcının bilgisayarına gönderir. Sunucudaki dosya sıkıştırması için gereken süre, yüksek boyutlu bir dosyayı İnternet üzerinden upload ederken geçen süreden çok daha azdır, bu nedenle gzip sıkıştırması, web sitelerinin performanslarını artırır. Gzip sıkıştırmasını aktif ettiğinizde site içi SEO‘nuza da fayda sağlamış olacaksınız.

Yazılar, HTML, JavaScript, CSS ve XML için GZIP sıkıştırmayı etkinleştirmek için aşağıdaki kuralları web sitenizin .htaccess dosyasına ekleyebilirsiniz:

<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ü

Önbellek kontrolü, tarayıcı önbellekleme işlemini kontrol etmemizi sağlar. Aşağıdaki satırın önemli kısmı, listelenen farklı dosya türleri (ico, flv, gif, css, js, jpeg, png, vb.) olduğunu ve izleyen önbellekleme talimatlarının bu dosya türleri için geçerli olacağını ve ne kadar süre ile geçerliği olacağını söyler. Örnek olarak, png dosyalarınızın bu süre boyunca önbelleğe alınmasını istemezseniz “png” yi bu satırdan silebilirsiniz.

# 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

.Htaccess dosyanızı cPanel’deki Dosya Yöneticisi ile veya FTP yoluyla düzenleyebilirsiniz. Ayrıca web site hızlandırma ile ilgili aşağıdaki lazy load görsel erteleme makalesini de inceleyebilirsiniz.

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

Yukarıdaki örnek .htaccess dosyasını indirmek için GitHub profilimizi ziyaret edin. Tarayıcı önbellekleme ile ilgili daha fazla sorunuz varsa, yorum yaparak bize iletebilirsiniz.

İlgili Konular

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir