Verimli Bir Önbellek Politikasıyla Statik Varlıklara Nasıl Hizmet Verilir?

GTMetrix ve Google PageSpeed ​​Insights gibi web siteleri , web sitenizin performansını nasıl iyileştireceğiniz konusunda öneriler sunar. Bunu okuyorsanız, en azından her web sitesinin manuel optimizasyonlar veya 10Web Booster gibi eklentiler kullanarak performansı artırma fırsatları olduğunu biliyorsunuzdur.

Her iki araçta da,statik varlıkların verimli bir önbellek politikasıyla sunulmasına yönelik bir öneri görebilirsiniz .Bu öneri, siteye yapılan tekrar ziyaretlerin daha hızlı olması için dosyaları yerel olarak depolamaktır. Bu öneriyi iyileştirmeye yönelik adımlar, ilk site ziyaretini iyileştirmez (bunun için başka iyileştirmeler de vardır). Yine de, sonraki tüm ziyaretler tarayıcı önbelleğinden yararlanmanın faydasını görecektir.

Statik varlıkların etkili bir önbellek politikasıyla sunulması önerisine, WordPress'te kaldıraçlı tarayıcı önbelleği veya tarayıcı önbelleği olarak da atıfta bulunulduğuna dikkat edilmelidir.

Bu makalede, verimli bir önbellek politikasıyla statik varlıkların nasıl sunulacağı ve verimli bir önbellek politikasının web sitenizin performansını nasıl iyileştirebileceği açıklanmaktadır.

GTMetrix kullanırken, öneri sonuç sayfasında aşağıdaki örnekteki gibi görünecektir. Tarayıcı önbelleğini uygulamaktan kaynaklanan potansiyel tasarrufları vurgulayacaktır.

Google PageSpeed ​​Insights'ta öneri benzer görünüyor ve benzer bilgiler veriyor.

Öneriler benzer çünkü GTMetrix ve PageSpeed ​​Insights, web sayfası analiz çerçeveleri için Lighthouse aracını kullanıyor. Lighthouse , site performansını iyileştirmeyi amaçlayan açık kaynaklı bir araçtır ve birçok farklı biçimde çalışabilir.

Bir web sitesinin performansının, en önemlisi Önemli Web Verileri olan bir dizi metrikle nasıl ölçüldüğünü kendimize hatırlatmak için kısa bir hatırlatma yapalım.

İşte bir özet:

• En Büyük İçerikli Boyama ( LCP ) – Sayfanın görüntü alanında en büyük nesnenin yüklenmesinin ne kadar sürdüğünün ölçümü.
• İlk Giriş Gecikmesi ( FID ) – Bu, web sitesinin yanıt verebilirliğini ölçer. Kullanıcının siteye tıklaması veya siteyle etkileşim kurması ile sitenin yanıt vermesi arasındaki süreyi ölçer.
• Kümülatif Düzen Kayması ( CLS ) – Bu, bir sayfanın düzeninin beklenmedik şekilde ne kadar değiştiğini ölçer.

Hem LCP'yi hem de FID'yi olumlu yönde etkilemenin bir yolu, statik varlıklara etkili bir önbellek ilkesiyle hizmet vermektir; bu, tarayıcının bir kaynağı belirli bir süre yerel olarak depolayabileceğini bilmesini sağlamak anlamına gelir.

Etkili bir önbellek politikası, daha hızlı yükleme süreleri anlamına gelir çünkü internet hızınız ne kadar yüksek olursa olsun, yerel bir önbellekten yükleme daha hızlı olacak ve zamandan tasarruf sağlayacaktır.

Birkaç bileşen var, bu yüzden onları daha ayrıntılı olarak tartışalım.

Etkili Bir Önbellek Politikasıyla Statik Varlıklara Nasıl Hizmet Verilir?

Statik varlıklara verimli bir önbellek ilkesiyle nasıl hizmet verileceğini anlamak için öncelikle statik varlıklar, önbelleğe alma ve önbelleğe alma ilkesi gibi farklı yönleri anlamamız gerekir. Onları burada parçalayalım.

Statik Varlıklar Nelerdir?

Statik varlıklar dosyalardır. Bu makalede statik varlıklardan bahsettiğimizde, kısa sürede veya sık sık değişmesi beklenmeyen tek tek dosyalardan bahsediyoruz.

Resimler, javascript, CSS dosyaları ve yazı tipleri gibi dosyalar, statik varlıklar olarak kabul edilebilecek dosyalardır. WordPress ile ilgili olarak, bu CSS, javascript ve resim ve yazı tipi dosyaları genellikle bir temanın, eklentinin veya kullanıcı içeriğinin parçası olur.

Dinamik olarak oluşturulan dosyalar ve sayfalar, statik varlıklar olarak kabul edilmez. Buna WordPress içinde bir örnek, önbelleğe alma eklentileri tarafından oluşturulan statik sayfalar olabilir. Bu, bir sonraki bölümde detaylandırılmıştır.

Önbelleğe Alma Nedir?

Önbelleğe alma, yanıtların bir önbellekte saklanması işlemidir, böylece aynı soru bir daha sorulduğunda yanıt daha hızlı döndürülebilir.

İlgili Makaleler

WordPress Önbelleğini Güvenli ve Verimli Bir Şekilde Nasıl Temizlersiniz?

En İyi 5 Seçimimizle En İyi WordPress Önbelleğe Alma Eklentisini Bulun

Daha önce WordPress önbelleğe alma eklentileriyle çalıştıysanız, tam sayfa önbelleğe almaya aşina olabilirsiniz. Sayfa önbelleğe alma, statik varlık önbelleğe alma işleminden farklıdır.

Sayfa önbelleğe alma ve statik varlık önbelleğe alma karşılaştırması

Bu makale özellikle statik varlık (dosya) önbelleğe alma konusuna bakmaktadır. Bu, oluşturulan sayfaları daha sonra kullanmak üzere saklayan tam sayfa önbelleğe alma ile karıştırılmamalıdır.

Hem sayfa önbelleğe alma hem de dosya önbelleğe alma, bir sitenin performansını iyileştirmeye yardımcı olur. Statik varlık önbelleğini tartışırken, javascript, CSS ve resim dosyaları gibi belirli varlıklara atıfta bulunuruz.

Sayfa önbelleğe alma, dinamik olarak oluşturulmuş bir WordPress sayfasının sonuçlarını depolar ve bu sürümü belirli bir süre için yeniden sunar. Sayfa önbellekleri genellikle bir sunucuda veya CDN gibi uç ağda depolanır ve statik varlıklar yerel olarak kullanıcının makinesinde depolanır.

Statik varlıkları etkili bir önbellek politikasıyla nasıl sunduğumuzla ilgili olarak önbelleğe alma, tarayıcıya bir kaynağı yeniden indirmeye gerek kalmadan tarayıcıda yerel olarak ne kadar süreyle saklayabileceğini söylemek anlamına gelir.

Statik Bir Varlığı Önbelleğe Alınabilir Yapan Nedir?

GTMetrix'e göre, bir varlık aşağıdaki gereksinimleri karşılıyorsa önbelleğe alınabilir:

• Bu bir yazı tipi, CSS, javascript veya medya dosyasıdır.
• 200, 203 veya 206 HTTP durum kodu döndürür
• Açık bir önbellek yok politikası yok

Önbelleğe Alma Politikası Nedir?

Statik bir varlığın ne olduğuna ve bir varlığı önbelleğe almanın ne anlama geldiğine baktık.

Önbelleğe alınmış bir dosyanın durumunu açıklamak için burada tazelik ve bayat terimleri kullanılabilir. Bir dosyanın önbellekten alınması uygunsa, taze olarak adlandırılabilir. Süresi dolduğunda bayat olarak adlandırılır.

Bir ilke, bir dosyanın ne kadar süreyle yeni olduğu ve bir dosyanın yeni olup olmadığının nasıl kontrol edileceği gibi soruları yanıtlar. Politika, yalnızca belirli bir süre sonra sunucuyla kontrol etmemiz gerektiğini veya her istekte sunucuyla kontrol etmemizi bize bildirin, ancak dosyayı yalnızca değiştiyse yeniden indirin.

Daha fazla ilerlemeden önce anlaşılması iyi olacak birkaç terim daha.

UX ve SEO Önbellek Politikasından Nasıl Etkilenir?

Kullanıcı deneyimi (UX) ve arama motoru optimizasyonu (SEO) birbirine sıkı sıkıya bağlıdır. Google'a göre araştırmalar, kullanıcıların sitenin yanıt verebilirliğini önemsediğini gösteriyor, bu nedenle Google, daha fazla yanıt veren sayfaları daha üst sıralara yerleştiriyor.

Statik varlıklar etkili bir şekilde önbelleğe alınırsa, bu varlıkların yüklenmesi için gereken sürenin azalması nedeniyle sayfa daha hızlı oluşturulur. Zamandaki azalma, LCP ve FID gibi temel web hayati öğelerinde iyileştirmelere ve sonuç olarak daha yüksek bir arama motoru sıralamasına yol açar.

Temel web hayati değerlerinin sayfa sıralamasını nasıl etkilediği hakkında daha fazla bilgiyi buradan edinebilirsiniz.

Verimli Önbellek İlkesi Sorunu ile Statik Varlıkları Sunma Sorunu Nasıl Düzeltilir?

Manuel Düzeltme

Statik varlıklara verimli bir önbellek ilkesiyle hizmet vermek, WordPress'e özgü bir ayar değildir, sitenizin optimize edilmiş önbellek ayarlarıyla yapılandırıldığından emin olmak için web sunucunuzun yapılandırma dosyasını değiştirerek manuel olarak ayarlayabilir veya 10Web Booster barındırma gibi bir eklenti kullanabilirsiniz.

Bu bölüm, önbellek kontrolünü etkinleştirmek için doğrudan bir web sunucusunun yapılandırma dosyalarını düzenlemeyi kapsayacak ve sunucularınızdaki HTTP üstbilgilerinin geçerliliğini sona erdirecek, böylece statik varlıklar sunduğunda yanıtta HTTP üstbilgilerini uygulayacaktır.

Bir kaynak istendiğinde, web sunucusu kaynakla ve HTTP başlıkları adı verilen bazı ekstra bilgilerle yanıt verir. HTTP başlıklarını bağlantıyla ilgili meta veriler olarak düşünün. Önbelleğe alma durumunda,Cache-ControlveExpiresHTTP başlıkları bir varlığı nasıl önbelleğe aldığımızı kontrol eder.

Cache -control başlığı, statik varlığın önbelleğe alınıp alınmadığına ve/veya nasıl önbelleğe alınacağına ilişkin talimatları içerir. Önbellek kontrolü için birçok direktif vardır, bu yüzden en popüler olanlardan bazılarını anlayalım.

Önbellek denetimi başlığının nasıl görünebileceğine dair bazı örnekler aşağıda verilmiştir.

Örnek: bir varlığı yedi gün boyunca önbelleğe alın
Cache-Control: max-age=604800

Örnek: Paylaşılan bir önbellekte yedi güne kadar saklanabilir
Cache-Control: public, max-age=604800

Örnek: Saklanabilir, ancak her istekte yeniden doğrulanmalıdır
Cache-Control: no-cache

Örnek: Önbelleğe alınamaz
Cache-Control: no-store

Önbellek kontrolü başlığı daha yenidir ve daha fazla seçeneğe sahiptir, ancak önbellek kontrolünün desteklenmemesi durumunda, süresi dolan HTTP başlığı aynı başlık görevini yerine getirir ve yeniden doğrulamaya ihtiyaç duymadan önce bir varlığın ne kadar süreyle geçerli olduğunu bildirir. (Cache-Control üstbilgisindeki max-age yönergesinin Expires yönergesinden öncelikli olduğunu unutmayın)
Expires: Wed Feb 13 21:01:38 CST 2023

Bir sunucu yapılandırmasını doğrudan değiştirme

İlk olarak, bizim için kolaylaştıran diğer araçları ve hizmetleri kullandığımızda ne olduğunu anlamak için "zor yola" bakalım.

Apaçi

Apache HTTP sunucusunda, aşağıdaki parçacığı bir site tanımına veya bir .htaccess dosyasına eklenebilir.

Bu snippet'i açıklayarak, uzantının .ico veya .pdf vb. ile eşleştiği herhangi bir varlığın, varlık için Önbellek Kontrolü başlığına sahip olacağını söylüyor.

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

Apache ile birçok barındırma sağlayıcısı size bir .htaccess dosyasına yönergeler ekleme seçeneği sunar. Bu, sunucunun yapılandırmasına eklemenin kolay bir yolu olsa da, .htaccess dosyalarını kullanmanın sunucu düzeyinde olumsuz performans isabetleri verdiğinin bilindiğini unutmayın.

Nginx

Nginx'te bu parçacığı bir sunucu bloğuna eklenebilir.

Bu snippet'i açıklayarak, uzantının .ico veya .pdf vb. ile eşleştiği herhangi bir varlığın hem sona erme süresi hem de önbellek kontrolü üstbilgilerine sahip olacağını söylüyor.

location ~* \.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$ {
    expires 1h;
    add_header Cache-Control "public, no-transform";
}

Hem Apache hem de Nginx için başlıkların nasıl değiştirileceğini/ekleneceğini gösteriyoruz. Önbelleğe alma için kullandığımız belirli başlıkları gösteriyoruz, ancak yöntem diğer herhangi bir önbelleğe alma biçimi için kullanılabilir.

Bir WordPress Eklentisiyle Düzeltin

Yukarıdakiler çok gibi geliyorsa, çünkü öyle. Sunucu yapılandırmalarını değiştirmek ve manuel değişikliklerde güncel kalmak zaman alıcıdır ve hataya açıktır.

10Web Booster ücretsiz planı, Apache'yi statik varlıklar için başlıklar ekleyecek şekilde yapılandırabilir ve ayrıca önbelleğe alınmış web sayfaları için başlıklar ekler. Halihazırda 10Web barındırma kullanmıyorsanız ve barındırıcınız Apache kullanıyorsa, verimli bir önbellek politikası uygulamaya başlamak için bu harika bir yoldur.

HTTP başlıkları üzerinde daha fazla seçeneğe veya daha fazla kontrole ihtiyacınız varsa, 10Web Booster Pro'yu kullanabilirsiniz. 10Web Booster Pro, Cloudflare'den yararlanır. Cloudflare kullandığınızda, önbellek denetimi başlıklarını statik varlıklarınıza ve önbelleğe alınmış sayfalarınıza ekler. Bu, herhangi bir sunucu yapılandırmasını veya kısıtlamasını atlar çünkü ziyaretçilerinize dosyalar doğrudan Cloudflare'den sunulur.

10Web Booster eklentisini buradaki en iyi seçenek yapan şey, tüm bunları yapması ve otomatik olarak yapmasıdır. Herhangi bir sunucu yapılandırmasını veya .htaccess dosyasını yönetmenize gerek yoktur.

Alternatif olarak, 10Web Hosting kullanıyorsanız, önbelleğe almayı otomatik olarak uygular ve statik varlıklar için başlık ekleme konusunda endişelenmenize gerek yoktur.

Sorunu Hala Düzeltemiyor musunuz? Bu İki İpucunu Deneyin

Yukarıdaki adımları uyguladıysanız ve etkili bir önbellek politikasına sahip hizmet statik varlıklarının raporlarınızda görünmeye devam ettiğini görüyorsanız, deneyebileceğiniz birkaç şey daha vardır.

Dosyaların Önbelleğe Alındığını Doğrulama

GTMetrix ve PageSpeed ​​hâlâ statik varlıklara bir önbellek ilkesiyle hizmet vermeniz gerektiğini bildiriyorsa, uygulamanızın gerçekten beklenen değişiklikleri yaptığını doğrulamak isteyebilirsiniz.

Çoğu tarayıcıda, dosyaların bir önbellekten gelip gelmediğini doğrulamanın kolay bir yolu vardır.

Chrome'da, görünüm ve Geliştirici altında, Geliştirici Araçları'nı seçin:

Ağ sekmesi altında, (disk önbelleği) veya (bellek önbelleği) gelen dosyaları tanımlayabileceksiniz. Disk ve bellek önbelleği arasındaki fark, tarayıcı kapatıldığında belleğin kaybolması ve tarayıcı kapatıldığında diskin devam etmesidir.

Önbellek Süresini Artırın

Lighthouse'un istatistiklerine göre, verimli bir önbellek politikası, önbellek isabetlerinin kayıplara oranının yüksek olduğu bir politikadır, yani statik varlıkların çoğunun bir maksimum kullanım süresi veya sona erme süresi vardır. Üretimde olan veya sık sık değişmeyen siteler için en fazla üç aydan bir yıla kadar bir yaş önerilir.

Yaklaşık üç aylık (yaklaşık 7890000 saniye) bir politika başlatmanızı önerirler, bunu zaten ayarladıysanız, siteniz yayındaysa maksimum yaşı bir yıl veya daha fazlasına çıkarmak faydalı olabilir.

Çözüm

Statik varlıklara verimli bir önbellek politikasıyla hizmet verebilmek, web sitenizin performansında hız iyileştirmeleri sağlar.

Bu makale, statik varlıkların ne olduğunu, HTTP üstbilgilerinin ne olduğunu ele almış ve önbelleğe alma üstbilgilerinin nasıl etkinleştirilip doğrulanacağını ele almıştır.

Sunucu yapılandırmalarını değiştirerek başlıkları manuel olarak etkinleştirmenin püf noktalarını ve 10Web Booster gibi bir WordPress eklentisini kullanmayı ve önbellek kontrolü HTTP başlıklarını ayarlamak için erişime sahip olmak için 10Web'in Cloudflare ile entegrasyonundan yararlanmayı nasıl kolaylaştırabileceğimizi inceledik.

10Web Booster, bir önbelleğe alma eklentisinden çok daha fazlasıdır. Bu 10Web Booster makalesinde birçok önbelleğe alma ve hız optimizasyonu özelliği hakkında daha fazla bilgi edinebilirsiniz .

SSS