Css, JavaScript ve Resim Dosyalarında Tarayıcı Önbelleği

Bildiğiniz gibi tarayıcı bu dosyaları sürekli okumamak için önbelleğe alıyor.. Dosyalarda bir değişiklik yapsak bile, kullanıcının bunu görebilmesi için ya bir süre beklemesi gerekiyor ya da ctrl + shift + r ile önbelleği temizleyip yenilemesi gerekiyor.. Hal böyle olunca çoğu kullanıcı yaptığınız güncellemleri çok geç görüyor buda projede sorunlara yol açabiliyor.. Bu yüzden küçük bir hile yaparak bu sorunu çözebiliriz.. Normal şartlarda çağırdığımız css, js ya da resim dosyaları şu şekildedir;

<!-- Style -->
<link rel="stylesheet" href="/style.css" type="text/css" media="screen" />
<!-- Script -->
<script type="text/javascript" src="/script.js"></script>
<!-- Resim -->
<img src="/resim.jpg" alt="" />

Şimdi bu kodları şöyle değiştirelim;

<!-- Style -->
<link rel="stylesheet" href="/style.css?v=1" type="text/css" media="screen" />
<!-- Script -->
<script type="text/javascript" src="/script.js?v=1"></script>
<!-- Resim -->
<img src="/resim.jpg?v=1" alt="" />

Sonuna getirdiğimiz ?v=1 ifadesi illaha bu şekilde tanımlanmak zorunda değil.. Yani ?a=1 gibi de tanımlanabilir.. Ama bu çoğu sitenin kullandığı genel bir tanım olduğu için bende bu şekilde kullanıyorum.. Bir nevi versiyonu temsil ediyor 🙂 Böyle kaydettiğimizde, artık bu dosyalarda herhangi bir değişiklik yaptığımızda kullanıcı anlık olarak görecektir.

Güncelleme
Eğer bu şekilde doğru sonucu vermiyorsa php’nin time fonksiyonunu kullanabilirsiniz.

<!-- Style -->
<link rel="stylesheet" href="/style.css?v=<?php echo time(); ?>" type="text/css" media="screen" />
<!-- Script -->
<script type="text/javascript" src="/script.js?v=<?php echo time(); ?>"></script>
<!-- Resim -->
<img src="/resim.jpg?v=<?php echo time(); ?>" alt="" />

Yayınlayan

Tayfun Erbilen

2009’dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“Css, JavaScript ve Resim Dosyalarında Tarayıcı Önbelleği” üzerine 11 yorum

  1. @ismail bayram, bir kez bu şekilde tanımlaman yeterli. Daha sonra yaptığın tüm değişiklikler gözükecektir 🙂

  2. Her değişiklikte versiyonun güncellenmesi gerekiyor diye biliyorum. Tarayıcı o versiyonu cache'e alıyor. En düzgün yöntem style.css?v=<?php echo time(); ?>
    her saniye değişeceğinden kesinlikle cache engellenecektir. Bunun yanında header kullanarakta cacheleri engelleyebilirsiniz.

  3. @Tugay Baltacı, konuyu açmadan önce denemiştim aslında.. Öyle bir şeye gerek yok gibi, yaptığım tüm değişiklikler gelmişti ama dediğin gibi time fonksiyonuda kullanılabilir 🙂 Güncelleme olarak konuya dahil ettim bunuda, teşekkürler.

  4. "time()" kullanılması doğru ve mantıklı değil. Eğer "time()" kullanılırsa, sayfa her yenilendiğinde, css/ javascript dosyasını yeniden okuyacaktır. Buda doğal olarak, sayfa hızını etkileyecektir.

    Bu sebepten dolayı, senin de ilk olarak dediğin "?v=$1", en mantıklı ve doğru yoldur. Sadece dosyada güncelleme yapıldığında, değeri değiştirdiğin takdirde, sadece versiyon değiştiği zaman dosyayı yeniden okuyacakıtr.

  5. Açıkçası ?1234 ya da ?v=1 gibi bir statik değişken atarsanız bu kesin çözüm olmayabilir. Sürekli sabit bir değişken gibi olur ve o yüzden yenileme ile değişmeyebilir. En iyi çözüm şudur:

    £££ <?php echo rand(); ?> £££

    Örnek:
    <link rel="shortcut icon" href="img/favicon.png?<?php echo rand(); ?>" type="image/png" />

  6. @Albert Atlantis, ben şahsen birkaç deneme yaptım ve bu şekilde de yeterli olduğunu gördüm.. Yaptığım güncellemeler anlık olarak sayfa önbelleğini silip yenilemeden de görülebiliyor. Ancak zaten alternatif olarak time'ı da önerdik konuda, görmemişsiniz sanırım 🙂

  7. Gerçekten çok akılcı ve pratik çözüm, teşekkür ederim , meslektaşım.

  8. en iyi kullanım en son verdiğiniz time örneğidir, tarayıcı her zaman farklı bir css veya js dosyası gibi algıladığı için daha kesin sonuç verir.

Bir Cevap Yazın

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