Web siteniz için önbellek kontrolü ayarları için en iyi yöntemler

Bazen bir siteye ikinci kez erişilirken, beklendiği gibi görünmediğini ve bazı stillerin bozulduğunu, her şeyin garip göründüğünü fark etmiş olabilirsiniz. Genellikle, bu sorunun nedeni, en son dağıtımdan sonra en son değişiklikleri almanızı önleyen yetersiz tanımlanmış önbellek kontrol ilkeleridir. Bu makalede, web sitenizi her dağıtımdan sonra tüm kullanıcılar için güncel tutmanıza yardımcı olacak doğru önbellek ayarlarını ve tekniklerini göstereceğim.

En iyi uygulamaları elde etmek ve kullanmaya başlamak isteyenler için, bu makalenin sonuna giden bağlantıyı izleyin.

Önbellek perde arkasında nasıl çalışır?

Tarayıcınız, web sitesine / kaynağa yapılan her talepte, önbellekteki bilgileri yerel bellekten okuyarak mümkün olduğunca az veri yüklemeye çalışır. Bu, tarayıcıya, hangi kaynakları tutması gerektiğini ve ne kadar süreyle tutulacaklarını açıklamak için yeterli talimatlar vermemizle mümkündür.

Bu talimatlar direktif görevi görür; Tarayıcınıza onlar hakkında bilgi vermek için, HTTP başlık bilgisine yanıt vermek üzere onları eklemelisiniz. Önbellek işlemine dahil olan en yaygın yönergeler “Önbellek Kontrolü”, “Sona Erme”, “Etag” ve “Son Değiştirme” dir.

Hemen hemen her web sunucusu, varsayılan olarak başlık yanıtlarında bazı önbellek ayarlarına sahiptir, ancak önbellek politikaları yoksa ne elde ettiğimiz belli değildir.

Önbellek kontrolü ayarları olmadan, tarayıcı her kaynak talebi için web sunucusuna gider ve bu bilgileri okur. Bu, etkilenen sitenin yükleme süresini artırır, bilgi aktarırken web sunucunuza fazladan yük ekler ve arka planınıza yapılan aramaları artırır.

Önbellek ayarları olmadan akış talep eder

Sunucudan talimatlar olmadan ne yapacağınıza ve bilgileri nasıl önbelleğe alacağınıza karar vermek tarayıcıya kalmıştır. Şu anda, Chrome ve Safari, önbellek talimatı olmadan her seferinde arka uçtan veri indirmektedir. Bu, özellikle diğer platformlarda değişebilir ve farklı davranışlara yol açabilir.

Belirli dosyalarla ne yapılacağını net bir şekilde tanımlamak için, önbellek kontrol yönergelerini öğrenmeye, bunları yanıt başlıklarına adım adım ekleyerek ve sonucu izlemeye derinlemesine bir dalış yapalım.

Etag (Varlık etiketi)

Etag önbellek ayarlarından biridir. Bu HTTP başlığının arkasındaki ana fikir, tarayıcınızın tam dosya indirmeden alakalı kaynaklardaki değişikliklerin farkında olmasını sağlamaktır. Sunucu, her dosyanın karma toplamıyla benzer bir şey hesaplayabilir ve ardından bu karma toplamı istemciye gönderebilir. İstemci bu kaynağa bir dahaki seferde erişmeye çalıştığında, dosyayı indirmek yerine, tarayıcı HTTP başlığında buna benzer bir şey gönderir: If-None-Match: W / “1d2e7–1648e509289”. Sunucu daha sonra bu karma toplamı geçerli dosyanın toplamına göre kontrol eder ve eğer fark varsa, istemciyi yeni bir dosya indirmeye zorlar. Aksi takdirde, müşteriye önbelleğe alınmış bir sürüm kullanması gerektiği bildirilecektir.

Etag ile akış talep ediyor - 1. yükEtag ile akış talep ediyor - 2. yük

Bir Etag önbellek politikası açıkken, bir dosyanın toplamını kontrol etmek için her zaman sunucuya gideriz ve bundan sonra tarayıcı onu önbellekten almaya karar verir veya tamamen yükler. Bir kaynak değiştirilmediğinde, ne istediğinizi, 10KB veya 10 MB'lık bir dosya olup olmadığını doğrulamak yalnızca 80-100 bayt alır.

Son düzenleme

Diğer bir önbellek kontrolü ayarı “Son Değiştirme Tarihi” HTTP başlığıdır. Ana fikir Etag'a çok benzer, ancak tarayıcının davranışı biraz farklı. Sunucular, her dosya için en son değiştirilen tarihin zaman damgasına sahiptir; İlk dosya yüklendikten sonra, istemci, dosyalara istemci tarafından en son erişildiği andan itibaren kaynağın değiştirilip değiştirilmediğini sunucuya sorabilir. Bunu yapmak için, tarayıcı HTTP üstbilgisinde If-Modified-Since: Cum, 13 Temmuz 2018 10:49:23 GMT’yi gönderir. Kaynak değiştirilmişse, tarayıcının yeni bir dosya indirmesi gerekir, aksi halde önbelleğe alınmış bir sürümü kullanır.

Gerçek şu ki, tarayıcılar kendi önbellek politikalarına sahipler ve önbellekten bir kaynak alıp almayacağına veya yeni bir kopya indirebileceklerine karar verebilirler.

Son Değiştirme Tarihi, tarayıcı öğeyi önbellekten alıp almayacağına karar vermek için bir buluşsal yöntem uyguladığı için zayıf bir önbellekleme başlığıdır.
Google önbelleğe alma en iyi uygulamalar kılavuzu
Son Modifiye - 1. yük ile akış talepleriSon Değiştirme Tarihi - 2. yükleme ile akış istekleri (Mükemmel Senaryo)Son Değiştirme Tarihi - 2. yükleme ile akış talebi (Genel durum)

Sonuç olarak, yalnızca Son Değiştirme Tarihi'ne güvenemeyiz, bu nedenle trafiği azaltmak için yalnızca birkaç bayt olsa bile tamamen sunucu ayarlarımdan kaldırmayı tercih ediyorum.

Önbellek Kontrol maksimum yaşı

Bu yönerge, tarayıcıya ilk yüklemeden bu yana dosyayı önbellekte tutması gereken süreyi söylememizi sağlar. Tarayıcının dosyayı önbellekte tutması gereken süre, tipik olarak bu Önbellek Denetimi gibi sunulan saniye cinsinden tanımlanmalıdır: max-age = 31536000. Bu politika ile tarayıcı sunucunuza talepte bulunma işlemini tamamen atlar ve dosyaları çok hızlı açar. Fakat bu dosyanın uzun süre değişmeyeceğinden nasıl emin olabiliriz? Yapmıyoruz.

Bu nedenle, tarayıcıyı gerekli dosyanın yeni bir sürümünü indirmeye zorlamak için Webpack veya Gulp gibi birçok varlık geliştirici aracı tarafından uygulanan bir teknik kullanıyoruz. Her dosya sunucuda önceden derlenecek ve “app-72420c47cc.css” gibi dosya adlarına karma toplamlar eklenecektir. Dosyadaki küçük değişiklikler bile hash toplamına yansır ve bu da farklı olarak tanınmasını garanti eder. Böylece, bir sonraki kurulumdan sonra, dosyanın yeni bir versiyonunu alacaksınız. Bu, tüm css, js ve resim dosyalarımız için geçerli olabilir (maks. Yaş = 31536000); Bir şeyleri değiştirdikten sonra, tarayıcı sadece yeni bir toplamı olan ve daha sonra önbelleklenecek yeni bir dosya isteyecektir.

no-cache

Yukarıdaki tekniğin zor yanı, html dosyalarınızı unutamayacağınız durumdur; Bu ayarı bu ayarlara da uygularsanız, yeniden yüklemeye zorlamadıkça css, js veya görüntü dosyalarınız için hiçbir zaman yeni bağlantılar almazsınız.

Önbellek denetimi: no-cache html dosyalarına uygulamanızı öneririm. “Önbellek yok” uygulamak, hiçbir önbellek olmadığı anlamına gelmez, yalnızca tarayıcıya, önbellekten kullanmadan önce sunucudaki kaynakları doğrulamasını söyler. basit bir istek ve dosyanın durumunu doğrulamak için ekstra 80 bayt yükleyin.

Son ayarlar

  • Css, js ve resim dosyalarınıza benzersiz karma rakamlar eklemek için Gulp, Webpack veya benzeri bir yazılım kullanın (app-67ce7f3483.css gibi);
  • Js, css ve image dosyaları için Cache-Control ayarını yapın: public, max-yaş = 31536000, Etag yok, Son Değiştirme ayarları yok.
  • Html dosyaları için Önbellek Kontrolü: no-önbellek ve Etag kullanın.

Görebildiğimiz gibi, statik dosyaları önbelleğe almak gibi açık ve sıradan şeyler bile daha derine dalırsak açık olmayabilir. İyi bir araştırma, hata yapmanıza engel olabilir ve sunucunuzdaki trafiği azaltabilir ve bu da site hızının yüklenme süresini azaltır.

Bu makaleyi yararlı bulduysanız düğmesine dokunun!

Herhangi bir sorunuz veya geri bildirim? Piksel Noktası ile Bağlan