Tarayıcı önbellekleme (browser caching)

Ekim 31, 2016 | Web Tasarım

Tarayıcı önbellekleme nedir?

Tarayıcı önbellekleme yani (cache control) sitenize gelen kullanıcılara sitenizin daha önceden önbelleğe alınmış versiyonunu sunarak sitenizin cok daha hızlı açılmasını sağlar. bu kısa makalede leverage browser caching skorunu nasıl arttıracağınızı göstereceğim. Sitemin şuan ki skoru;

tarayici-onbellekleme

Çoğu performans ölçme sitelerinde (gtmetrix, pagespeed vs) tüm optimizasyonları yapıp leverage browser caching uyarısının skorunda takılırız. Genelde gördüğüm sonuç bu, tüm skorlar yeşil iken leverage browser caching kırmızıdadır. Birçok sitede verilen artık klasikleşmiş bazı kodlar hiçbir işe yaramıyor, bilmiyorum belkide bende işe yaramamıştır ancak yorumlarda gördüğüm çoğu kişinin bu  konudan muzdarip olduğuydu.

.htaccess örnek kodları


Header set Cache-Control "max-age=2628000, public"

Yukarıdaki kod verilen amx-age değeri sürecinde tüm resim, style, js vs dosyalara cache uygulayacaktır. Ancak hangi dosya türlerinin ne kadar süreyle önbelleklenmesini ayarlamak isterseniz aşağıdaki kodu kullanabilirsiniz.


# One year for image files
<filesMatch ".(jpg|jpeg|png|gif|ico)$">
Header set Cache-Control "max-age=31536000, public"


# One month for css and js
<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=2628000, public"

Yukarıda ki resim uzantıları için yıllık, .css ve .js uzantıları için aylık önbellekleme tanımlamaktadır. Benim size önereceğimde yukarıda ki tanımdır.

Peki bu max-age değerleri neyi ifade ediyor?

  • 1 dakida: max-age=60
  • 1 saat: max-age=3600
  • 1 gün: max-age=86400
  • 1 hafta: max-age=604800
  • 1 ay: max-age=2628000
  • 1 yıl: max-age=31536000

bu değerlerle istediğiniz dosya türleri için dilediğiniz sürede caching uygulayabilirsiniz.

Yukarıdaki kodları htaccess dosyama eklediğimde gtmetrix değerlerim;

gtmetrix

Bu kodu uygulayıp herhangi bir farklılık görmeyen arkadaşlar olursa cpanele girip varsa cache özelliğini açmaları yada yazılım kategorisi altında listelenen web sitesini optimize edin menüsünden tüm içeriği sıkıştır seçeneğinin işaretli olduğundan emin olun.

Günümüzde önemi, seo sıralama faktörlerinin başında gelen site hızının ne kadar önemli olduğu daha iyi anlaşılıyor. Uzun ve kapsamlı bir yazı dizisi olacak site hızını optimize konusunun ilk başlığı olarak tarayıcı önbelleklemeyi seçtim ve devamını çok araya zaman koymadan yazmaya çalışacağım. Amacım, sitesinin hız optimizasyonunu en iyi şekilde tek kaynaktan yararlanarak yapmak isteyenlere yararlı bir kaynak sunmak. Daha sonrasında belki zamanım olursa tüm bu yazı dizisini infographic olarak yayınlamak istiyorum, her ne kadar uğraştırıcı olacaksa da yapmaya çalışacağım. Kendinize iyi bakın…