Tahmine dayalı önceden getirme ve Guess.js'nin bunu nasıl uyguladığı hakkında bilgi edinin.
Google I/O 2019'da düzenlenen Tahmine Dayalı Önceden Getirme ile Daha Hızlı Web'de Gezinme oturumunda ilk olarak kod bölmeyle web uygulamalarını optimize etme ve sonraki sayfada gezinmenin performans üzerindeki olası etkisinden bahsettim. Konuşmanın ikinci bölümünde, tahmine dayalı önceden getirmeyi ayarlamak için Guess.js kullanarak gezinme hızını nasıl iyileştireceğinizi ele aldık:
Daha hızlı web uygulamaları için kod bölme
Web uygulamaları yavaştır ve JavaScript, gönderdiğiniz en pahalı kaynaklardan biridir. Yavaş bir web uygulamasının yüklenmesini beklemek, kullanıcılarınızı hayal kırıklığına uğratabilir ve dönüşüm sayısını azaltabilir.
Geç yükleme, kablo üzerinden aktardığınız JavaScript baytlarını azaltmak için etkili bir tekniktir. JavaScript'i geç yüklemek için aşağıdakiler gibi çeşitli teknikler kullanabilirsiniz:
- Bileşen düzeyinde kod bölme
- Rota düzeyinde kod bölme
Bileşen düzeyinde kod bölme sayesinde bileşenleri tek tek JavaScript parçalarına taşıyabilirsiniz. Belirli durumlarda, ilgili komut dosyalarını yükleyebilir ve bileşenleri oluşturabilirsiniz.
Ancak, rota düzeyinde kod bölmeyle rotaların tamamını bağımsız parçalara taşırsınız. Bir yoldan diğerine geçiş yapan kullanıcıların, ilişkili JavaScript'i indirmeleri ve istenen sayfanın önyüklemesi yapmaları gerekir. Bu işlemler, özellikle yavaş ağlarda önemli gecikmelere yol açabilir.
JavaScript'i önceden getirme
Önceden getirme, tarayıcının, kullanıcının yakında ihtiyaç duyabileceği kaynakları indirmesine ve önbelleğe almasına olanak tanır. Normal yöntem <link rel="prefetch"> kullanmaktır, ancak sık karşılaşılan iki hata vardır:
- Çok fazla kaynağın önceden getirilmesi (aşırı getirme) çok fazla veri tüketir.
- Kullanıcının ihtiyaç duyduğu bazı kaynaklar hiçbir zaman önceden getirilemeyebilir.
Tahmine dayalı önceden getirme, hangi öğelerin önceden getirileceğini belirlemek için kullanıcıların gezinme kalıplarının raporunu kullanarak bu sorunları çözer.
Guess.js ile tahmine dayalı önceden getirme
Guess.js, tahmine dayalı önceden getirme işlevi sağlayan bir JavaScript kitaplığıdır. Guess.js, yalnızca kullanıcının ihtiyaç duyabileceği bilgileri akıllı bir şekilde önceden getirmek üzere kullanılabilecek tahmine dayalı bir model oluşturmak için Google Analytics'ten veya başka bir analiz sağlayıcısından alınan bir raporu kullanır.
Guess.js; Angular, Next.js, Nuxt.js ve Gatsby ile entegrasyonlara sahiptir. Uygulamanızda kullanmak için, bir Google Analytics görünüm kimliği belirtmek üzere şu satırları web paketi yapılandırmanıza ekleyin:
const { GuessPlugin } = require('guess-webpack');
// ...
plugins: [
// ...
new GuessPlugin({ GA: 'XXXXXX' })
]
// ...
Google Analytics kullanmıyorsanız bir reportProvider belirtebilir ve en sevdiğiniz hizmetten veri indirebilirsiniz.
Çerçevelerle entegrasyon
Guess.js'yi favori çerçevenizle nasıl entegre edeceğiniz hakkında daha fazla bilgi edinmek için şu kaynaklara göz atın:
Angular ile entegrasyon hakkında hızlı bir adım adım açıklamalı kılavuz için bu videoya göz atın:
Guess.js nasıl çalışır?
Guess.js tahmine dayalı önceden getirmeyi şu şekilde uygular:
- Önce favori analiz sağlayıcınızdaki kullanıcı gezinme kalıplarına ait verileri ayıklar.
- Daha sonra, rapordaki URL'leri webpack tarafından oluşturulan JavaScript parçalarıyla eşler.
- Çıkarılan verilere dayanarak kullanıcının belirli bir sayfadan hangi sayfalara gitme olasılığının yüksek olduğuyla ilgili basit bir tahmin modeli oluşturur.
- Her bir JavaScript parçası için modeli çağırarak daha sonra gerekli olması muhtemel diğer parçaları tahmin eder.
- Her parçaya önceden getirme talimatları ekler.
Guess.js tamamlandığında, her parça aşağıdakine benzer önceden getirme talimatları içerir:
__GUESS__.p(
['a.js', 0.2],
['b.js', 0.8]
)
Guess.js tarafından oluşturulan bu kod, tarayıcıya 0.2 olasılığıyla a.js parçasını önceden getirmeyi ve 0.8 olasılığıyla b.js parçasını önceden getirmesini söylüyor.
Tarayıcı kodu çalıştırdıktan sonra, Guess.js kullanıcının bağlantı hızını kontrol eder. Yeterliyse Guess.js, sayfanın başlığına her parça için bir tane olmak üzere iki <link rel="prefetch"> etiketi ekler. Kullanıcı yüksek hızlı bir ağdaysa Guess.js her iki parçayı da önceden getirir. Kullanıcının ağ bağlantısı zayıfsa Guess.js, ihtiyaç duyulma olasılığı yüksek olduğu için yalnızca b.js parçasını önceden getirir.
Daha fazla bilgi
Guess.js hakkında daha fazla bilgi edinmek için şu kaynaklara göz atın: