Tahmine dayalı önceden getirme ve Guess.js'nin bunu nasıl uyguladığı hakkında bilgi edinin.
Google I/O 2019'da, Accelerated Web Navigation with Tahmine Dayalı Önceden Getirme oturumunda kod bölmeyle web uygulamalarını optimize etme ve sonraki sayfada gezinmenin performansla ilgili potansiyel etkileri hakkında konuştum. Konuşmanın ikinci bölümünde, tahmine dayalı önceden getirme ayarlamak için Guess.js'yi kullanarak gezinme hızını nasıl iyileştireceğinizi anlattım:
Daha hızlı web uygulamaları için kod bölme
Web uygulamaları yavaştır ve JavaScript, gönderdiğiniz en pahalı kaynaklar arasındadır. Yavaş bir web uygulamasının yüklenmesini beklemek, kullanıcılarınızı hayal kırıklığına uğratabilir ve dönüşümleri 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 teknikleri kullanabilirsiniz:
- Bileşen düzeyinde kod bölme
- Rota düzeyinde kod bölme
Bileşen düzeyinde kod bölme sayesinde her bileşeni, ayrı JavaScript parçalarına taşıyabilirsiniz. Belirli etkinliklerde, ilgili komut dosyalarını yükleyebilir ve bileşenleri oluşturabilirsiniz.
Bununla birlikte, rota düzeyinde kod bölmesiyle rotaların tamamını bağımsız parçalara taşırsınız. Kullanıcılar bir güzergahtan diğerine geçtiğinde, ilişkili JavaScript'i indirmeleri ve istenen sayfayı önyüklemeleri gerekir. Bu işlemler, özellikle yavaş ağlarda önemli gecikmelere yol açabilir.
JavaScript'i önceden yükleme
Önceden getirme, tarayıcının, kullanıcının yakında ihtiyaç duyacağı 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 tehlike vardır:
- Çok fazla kaynağın önceden yüklenmesi (aşırı getirme) çok fazla veri tüketir.
- Kullanıcının ihtiyaç duyduğu bazı kaynaklar hiçbir zaman önceden getirilmeyebilir.
Tahmine dayalı önceden getirme, hangi öğelerin önceden getirileceğini belirlemek için kullanıcıların gezinme kalıplarına ilişkin bir rapor 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 verileri akıllıca önceden getirmek için kullanılabilecek tahmine dayalı bir model oluşturmak amacıyla Google Analytics'ten veya başka bir analiz sağlayıcısından bir rapor kullanır.
Guess.js'nin Angular, Next.js, Nuxt.js ve Gatsby ile entegrasyonu vardır. Bunu 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 favori hizmetinizden veri indirebilirsiniz.
Çerçevelerle entegrasyon
Guess.js'yi favori çerçevenizle entegre etme hakkında daha fazla bilgi edinmek için şu kaynaklara göz atın:
Angular ile entegrasyon hakkında kısa bir adım adım açıklamalı kılavuz için şu videoya göz atın:
Guess.js nasıl çalışır?
Guess.js'nin tahmine dayalı önceden getirme işlemini nasıl uyguladığı aşağıda açıklanmıştır:
- Öncelikle, favori analiz sağlayıcınızdan kullanıcının gezinme kalıplarıyla ilgili verileri ayıklar.
- Ardından, rapordaki URL'leri webpack tarafından oluşturulan JavaScript parçalarıyla eşler.
- Ayıklanan verilere dayanarak, kullanıcının belirli bir sayfadan hangi sayfalara gitme ihtimalinin bulunduğuna dair basit bir tahmine dayalı model oluşturur.
- Her bir JavaScript parçası için modeli çağırarak bir sonraki adımda ihtiyaç duyulması muhtemel diğer parçaları tahmin eder.
- Her bir parçaya önceden getirme talimatları ekler.
Guess.js tamamlandığında, her parça şuna 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 ve 0.8 olasılığıyla b.js parçasını önceden getirme olasılığını değerlendirmesini bildirir.a.js
Tarayıcı kodu yürüttüğünde, Guess.js kullanıcının bağlantı hızını kontrol eder. Etiketin yeterli olması durumunda Guess.js, her parça için bir tane olmak üzere sayfanın başlığına 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ğundan yalnızca b.js parçasını önceden getirir.
Daha fazla bilgi
Guess.js hakkında daha fazla bilgi edinmek için şu kaynakları inceleyin: