Tahmine dayalı önceden getirme özelliğiyle web'de daha hızlı gezinme

Tahmini ön getirme ve Guess.js'nin bunu nasıl uyguladığı hakkında bilgi edinin.

Google I/O 2019'daki Tahmini Ön Getirme ile Daha Hızlı Web Gezinme oturumumda, web uygulamalarını kod bölmeyle optimize etme ve sonraki sayfa gezinmeyle ilgili olası performans etkileri hakkında konuşmaya başladım. Konuşmanın ikinci bölümünde, tahmine dayalı ön getirmeyi ayarlamak için Guess.js'i kullanarak gezinme hızını nasıl artıracağınızı ele aldım:

Daha hızlı web uygulamaları için kod bölme

Web uygulamaları yavaştır ve JavaScript, yayınladığınız 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.

Yavaş web uygulamaları stresli bir deneyimdir.

Geç yükleme, kablo üzerinden aktardığınız JavaScript baytlarını azaltmak için etkili bir tekniktir. JavaScript'i yavaş 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 özelliğiyle, bileşenleri ayrı JavaScript parçalarına taşıyabilirsiniz. Belirli etkinliklerde 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 neden olabilir.

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. Genel 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.

Tahmini ön getirme, hangi öğelerin önceden getirileceğini belirlemek için kullanıcıların gezinme kalıplarını içeren bir rapor kullanarak bu sorunları çözer.

Önceden getirme örneği

Guess.js ile tahmine dayalı ön 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. Bu özelliği uygulamanızda kullanmak için Google Analytics görünüm kimliği belirtmek üzere webpack yapılandırmanıza aşağıdaki satırları ekleyin:

const { GuessPlugin } = require('guess-webpack');

// ...
plugins: [
   // ...
   new GuessPlugin({ GA: 'XXXXXX' })
]
// ...

Google Analytics kullanmıyorsanız bir reportProvider belirtip favori hizmetinizden 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 kısa 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, tahmini ön getirmeyi şu şekilde uygular:

  1. Öncelikle, en sevdiğiniz analiz sağlayıcısından kullanıcı gezinme modelleriyle ilgili verileri ayıklayıp bu verileri bir modele dönüştürür.
  2. Ardından, rapordaki URL'leri webpack tarafından üretilen JavaScript parçalarıyla eşleştirir.
  3. Ayıklanan verilere dayanarak, kullanıcının herhangi bir sayfadan hangi sayfalara gitme olasılığının yüksek olduğunu gösteren basit bir tahmin modelini oluşturur.
  4. Her JavaScript parçası için modeli çağırır ve bir sonraki adımda ihtiyaç duyulması muhtemel diğer parçaları tahmin eder.
  5. Her bir parçaya ön getirme talimatları ekler.

Guess.js tamamlandığında her bir parça aşağıdakine benzer ön 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 bir parça için bir tane olmak üzere iki <link rel="prefetch"> etiketi ekler. Kullanıcı yüksek hızlı bir ağ kullanıyorsa Guess.js her iki parçayı da önceden alır. Kullanıcının ağ bağlantısı zayıfsa Guess.js, yalnızca b.js parçasının ön beslemesini yapar. Bunun nedeni, bu parçanın ihtiyaç duyulma olasılığının yüksek olmasıdır.

Daha fazla bilgi

Guess.js hakkında daha fazla bilgi edinmek için şu kaynaklara göz atın: