Tarayıcı Önbellekleme Özelliğinden Yararlanın Uyarısı Nasıl Düzeltilir

1 1.717

WordPress sitenizde Pingdom, GTmetrix veya Google PageSpeed Insights’ta “Tarayıcı Önbellekleme Özelliğinden Yararlanın” uyarısı mı görüyorsunuz? Bunun nedeni, her kaynak sunucusu yanıtında bulunması gereken, önbellek uzunluğunu doğrulayan ve ayarlayan eksik HTTP önbelleğe alma üstbilgilerinden kaynaklanmaktadır. Üstbilgiler bulunmazsa, kaynak için her zaman yeni bir istek oluşturur; bu da sunucunuzdaki yükü artırır. Önbelleğe alma başlıklarını kullanmak, sonraki isteklerin sunucudan yüklenmesini gerektirmez, böylece bant genişliği tasarrufu sağlanır ve kullanıcı için performans artar.

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

Pingdom’dan gelen uyarı: The following resources are missing a cache validator. Resources that do not specify a cache validator cannot be refreshed efficiently. Specify a Last-Modified or ETag header to enable cache validation for the following resources.

“Bir önbellek doğrulayıcı belirt” uyarısını nasıl düzelteceğiniz konusunda aşağıdaki adımları izleyin.

Yazı İndeksi

Tarayıcı Önbellekleme Özelliğinden Yararlanın Uyarısının Düzeltilmesi

Bu uyarıyla ilgili olarak dikkat edilmesi gereken ilk şey, yalnızca sunucunuzdaki istekler için bunu düzeltebilmenizdir. Bunu gördüğünüz 3. parti talepleriniz varsa, web sunucularınız üzerinde kontrol sahibi olmadığınız için düzenleme şansınız yoktur. Bu yazıyı onlarla paylaşmaktan çekinmeyin. Unutmayın, Pingdom ile testi birkaç kez çalıştırmanız gerekebilir. Uyarı karşınıza birden fazlada çıkabilir. Aracı ilk çalıştırdığınızda, sunucudaki dosyaların önbelleğini hazırlar.

Bu uyarıyı düzeltmek için kullanılabilen dört farklı yöntem vardır. Burası biraz şaşırtıcı olabilir, ancak olabildiğince kolay açıklamaya çalışacağız.

Önbelleği Onaylayan Üstbilgiler

İlk iki başlık son değiştirilme zamanı(last-modified)  ve ETag. Bu üstbilgiler, dosyanın son talep edildiğinden beri değişip değişmediğini tarayıcıya bildirmek için bize yardımcı olurlar. Daha doğrusu önbellek doğrulaması kısmında bize rehberlik etmektedirler.

Last-Modified (Son Değiştirilme Zamanı)

Last-modified başlığı genellikle sunucudan otomatik olarak gönderilir. Bu, manuel olarak eklemek zorunda olmadığınız bir başlıktır. Tarayıcının önbelleğindeki dosyanın son talep edildiğinden beri değişiklik olup olmadığını görmek için gönderilir. Pingdom’da ki başlık isteğine bakabilir veya son değiştirilen başlığın tarihi görmek için Chrome DevTools’u kullanabilirsiniz.

response headers

ETag

ETag başlığı da son değiştirilmiş üstbilgiye çok benzemektedir. Ayrıca bir dosyanın önbelleğini doğrulamak için kullanılır. Apache 2.4 veya üstünü çalıştırıyorsanız, ETag başlığı FileETag yönergesi kullanılarak zaten otomatik olarak eklenir. Ve 2016 yılından bu yana, ETAG başlığı NGINX de varsayılan olarak etkin gelmektedir.

Önbellek Boyunu Belirleyen Üstbilgiler

Sonraki iki başlık Cache-Control ve Expires’dir. Bu üstbilgiler, sunucudan yeni bir kopya almadan önce dosyanın ne kadar süre önbellekte tutulacağını belirlemenize yardımcı olur. Unutmayın, Pingdom veya GTmetrix’te gördüğünüz uyarıları düzeltmek için, hem önbellekte hem de önbellek uzunluğunu belirleyen bir doğrulama yapan bir üstbilginize sahip olduğunuzdan emin olmanız gerekir.

Cache-Control

Cache-Control, önbelleğin uzunluğunu tanımlamanıza izin veren farklı yönergelerden oluşan bir üstbilgidir. En yaygın direktiflerden bazıları şunlardır:

  1. max-age: Bir dosyanın önbelleğe alınması gereken süreyi tanımlar.
  2. public: Herhangi bir önbelleğin, yanıtın herkese açıkça saklanmasına izin verir.
  3. private: Sadece dosyaya erişen tarayıcı tarafından önbelleklenebilir.

cache-control-header

Yukarıdaki örnekte, öğenin maksimum yaş direktifini kullandığını görebiliriz. 604800 saniye, yedi günde bir önbellekle eşit olur. Bunu Apache’de yapılandırmak için .htaccess dosyanıza aşağıdaki kodu ekleyin.

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>

Bunu NGINX’te yapılandırmak için, aşağıdaki kodu yapılandırma dosyanıza ekleyin. Tüm NGINX yapılandırma dosyaları / etc / nginx / dizininde bulunur. Birincil yapılandırma dosyası /etc/nginx/nginx.conf’tir.

location ~* .(js|css|png|jpg|jpeg|gif|ico)$ {
add_header Cache-Control "public";
}

Bitiş Süresi (Expires)

Expires başlığı gerçek bir tarih kullanırken, Cache-Control üstbilgisi süresi dolmadan önce bir süre belirtmenizi sağlar.

Apache’de Expires başlığını eklemek için .htaccess dosyanıza aşağıdaki kodu ekleyin.

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "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 image/x-icon "access 1 year"
ExpiresDefault "access 7 days"
</IfModule>
## EXPIRES HEADER CACHING ##

Expires başlıkları bloğunu mod_rewrite, GZIP, vb. Gibi şeylerin altına eklediğinizden emin olun. Dosyanın en alt kısmına eklemeniz daha güvenli olacaktır.

NGINX’e Expires üstbilgileri eklemek için, yapılandırma dosyanıza aşağıdaki kodu ekleyin.

location ~* .(js|css|png|jpg|jpeg|gif|ico)$ {
expires 7d;
}

NGINX yapısında Cache-Control başlığı ve Expires başlığı teknik olarak gerekli olmamasına rağmen birlikte kullanılır:

location ~* .(js|css|png|jpg|jpeg|gif|ico)$ {
expires 7d;
add_header Cache-Control "public";
}

KeyCDN ve Cloudflare gibi üçüncü parti CDN sağlayıcılarının çoğu, dosyalarınızı teslim alırken otomatik olarak bu başlıkları ekler. Uyarıları görüyorsanız, sunucunuzun eski yazılımının çalışmaması veya sunucunun yapılandırılmamış olabilir. Genellikle bunu paylaşımlı sunucularda görüyoruz. Ya da belki kendi sunucunuzu kuruyorsunuz, bu durumda yukarıdaki başlıkların bazıları eklenememiş olabilir.

Her şey yolunda giderse ve başlığı doğru bir şekilde kullanmayan üçüncü taraf talepleriniz yoksa, Pingdom gibi web sitesi hız test araçlarıyla (aşağıda görüldüğü gibi) puanınızı bir iyileşme görmelisiniz.

Genel olarak bu yazımızda Tarayıcı Önbellekleme Özelliğinden Yararlanın hatasının sebeplerini ve bu hatayı nasıl ortan kaldırabileceğimiz üzerine durduk. Eklemek istediklerinizi yada aklınıza takılan soruları bize yorum olarak paylaşmaktan çekinmeyin. Tüm sorularınızı seve seve cevaplamak isteriz.

Sık Sorulan Sorular

Kod kullanmadan tarayıcı önbelleğini nasıl etkinleştiririm?

Kod kullanmadan tarayıcı önbelleğini etkinleştirmenin en kolay yolu bir cache eklentisi kullanmaktır. Wp Fastest Cache eklentisi kurarak tarayıcı önbelleğini kolayca etkinleştirebilirsiniz.

Tarayıcı önbelleğinden yararlanmak ne anlama geliyor?

Tarayıcınızın önbelleğinden yararlanmak, genellikle web tarayıcılarının görüntüleri, CSS ve JS’yi yerel olarak ne kadar süreyle saklaması gerektiğini belirtebileceğiniz anlamına gelir. Bu şekilde, kullanıcının tarayıcısı sayfalarınızda gezinirken daha az veri indirecek ve bu da web sitenizin yükleme hızını artıracaktır.

1 Yorum var
  1. hüseyin uslu

    faydalı bir yazı olmuş teşekkürler.

Cevap Gönder

E-posta adresiniz yorumunuzda yayınlanmayacaktır.

 

Sitemizi en iyi şekilde kullanabilmeniz için çerezler kullanılmaktadır. Sitemize giriş yaparak çerez kullanımını kabul etmiş sayılmaktasınız. Tamam Detaylı bilgi için tıklayınız.