अनुमानित प्रीफ़ेचिंग की मदद से तेज़ वेब नेविगेशन

अनुमानित प्रीफ़ेच के बारे में जानें और जानें कि Guess.js इसे कैसे लागू करता है.

Minko Gechev

Google I/O 2019 में, प्रेडिक्टिव प्रीफ़ेचिंग के साथ तेज़ वेब नेविगेशन सेशन में, मैंने कोड स्प्लिट करने की सुविधा वाले वेब ऐप्लिकेशन ऑप्टिमाइज़ करने के बारे में बात की. साथ ही, मैंने यह भी बताया कि आने वाले समय में पेज नेविगेशन का इस्तेमाल करने से परफ़ॉर्मेंस पर क्या असर पड़ सकता है. बातचीत के दूसरे हिस्से में, मैंने सुझाव दिया कि प्रीफ़ेच करने की सुविधा सेट अप करने के लिए, Guess.js का इस्तेमाल करके नेविगेशन की स्पीड को कैसे बेहतर बनाया जा सकता है:

ज़्यादा तेज़ी से काम करने वाले वेब ऐप्लिकेशन के लिए कोड को अलग-अलग करें

वेब ऐप्लिकेशन धीमे होते हैं. साथ ही, आपकी तरफ़ से शिप किए जाने वाले संसाधनों में JavaScript सबसे महंगा होता है. वेब ऐप्लिकेशन के धीरे लोड होने का इंतज़ार करने से, आपके उपयोगकर्ता परेशान हो सकते हैं और उनके कन्वर्ज़न में कमी आ सकती है.

धीमे वेब ऐप्लिकेशन तनाव से परेशान हैं.

लेज़ी लोडिंग, JavaScript की उन बाइट को कम करने की एक बेहतरीन तकनीक है जिन्हें वायर के ज़रिए ट्रांसफ़र किया जा रहा है. JavaScript को लेज़ी-लोड करने के लिए, कई तकनीकों का इस्तेमाल किया जा सकता है. इनमें ये शामिल हैं:

  • कॉम्पोनेंट-लेवल पर कोड को बांटना
  • रूट-लेवल पर कोड को बांटना

कॉम्पोनेंट लेवल पर कोड को बांटकर, अलग-अलग कॉम्पोनेंट को JavaScript के अलग-अलग हिस्सों में ले जाया जा सकता है. किसी खास इवेंट पर, काम की स्क्रिप्ट लोड की जा सकती हैं और कॉम्पोनेंट को रेंडर किया जा सकता है.

हालांकि, रूट-लेवल के कोड के बंटवारे की सुविधा से, पूरे रूट को अलग-अलग हिस्सों में ले जाया जा सकता है. जब उपयोगकर्ता एक रास्ते से दूसरे पर जाते हैं, तो उन्हें संबंधित JavaScript डाउनलोड करना पड़ता है और अनुरोध किए गए पेज को बूटस्ट्रैप करना पड़ता है. इन कार्रवाइयों की वजह से, खास तौर पर धीमे नेटवर्क पर ज़्यादा देरी हो सकती है.

JavaScript को प्रीफ़ेच करना

प्रीफ़ेच करने से ब्राउज़र उन संसाधनों को डाउनलोड और कैश मेमोरी में सेव कर सकता है जिनकी उपयोगकर्ता को जल्द ही ज़रूरत हो सकती है. आम तौर पर, <link rel="prefetch"> का इस्तेमाल किया जाता है, लेकिन आम तौर पर इसके दो नुकसान होते हैं:

  • बहुत ज़्यादा संसाधन प्रीफ़ेच करने (ओवरफ़ेचिंग) की वजह से बहुत ज़्यादा डेटा खर्च होता है.
  • ऐसा हो सकता है कि उपयोगकर्ता की ज़रूरत के हिसाब से कुछ संसाधन कभी प्रीफ़ेच न किए जाएं.

अनुमानित प्रीफ़ेच की सुविधा, उपयोगकर्ताओं के नेविगेशन पैटर्न की रिपोर्ट का इस्तेमाल करके इन समस्याओं को हल कर सकती है. इससे यह तय किया जाता है कि किन ऐसेट को प्रीफ़ेच करना है.

प्रीफ़ेच करने का उदाहरण

Guess.js की मदद से, अनुमान के हिसाब से प्रीफ़ेच करने की सुविधा

Guess.js एक ऐसी JavaScript लाइब्रेरी है जो अनुमानित प्रीफ़ेच करने की सुविधा देती है. Guess.js, Google Analytics या आंकड़ों की सेवा देने वाली किसी दूसरी कंपनी से मिली रिपोर्ट का इस्तेमाल करके, अनुमानित मॉडल बनाता है. इस मॉडल का इस्तेमाल करके, उपयोगकर्ता की ज़रूरत के मुताबिक डेटा को समझदारी से प्रीफ़ेच किया जाता है.

Guess.js में Angular, Next.js, Nuxt.js, और Gatsby के साथ इंटिग्रेशन कर सकते हैं. अपने ऐप्लिकेशन में इसका इस्तेमाल करने के लिए, अपने webpack कॉन्फ़िगरेशन में ये लाइनें जोड़ें, ताकि Google Analytics व्यू आईडी तय किया जा सके:

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

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

अगर Google Analytics का इस्तेमाल नहीं किया जा रहा है, तो reportProvider तय करें और अपनी पसंदीदा सेवा से डेटा डाउनलोड करें.

फ़्रेमवर्क के साथ इंटिग्रेशन

Guess.js को अपने पसंदीदा फ़्रेमवर्क के साथ इंटिग्रेट करने के तरीके के बारे में ज़्यादा जानने के लिए, इन संसाधनों को देखें:

Angular के साथ इंटिग्रेशन के बारे में सिलसिलेवार तरीके से जानने के लिए, यह वीडियो देखें:

Guess.js कैसे काम करता है?

यहां बताया गया है कि Guess.js, अनुमानित प्रीफ़ेच को इस तरह लागू करता है:

  1. यह सबसे पहले आपके पसंदीदा आंकड़े उपलब्ध कराने वाले से उपयोगकर्ता के नेविगेशन पैटर्न का डेटा इकट्ठा करता है.
  2. इसके बाद, यह रिपोर्ट के यूआरएल को Webpack से तैयार किए गए JavaScript हिस्सों पर मैप करता है.
  3. एक्सट्रैक्ट किए गए डेटा के आधार पर, यह एक सामान्य अनुमान लगाने वाला मॉडल बनाता है. इससे यह अनुमान लगाया जाता है कि उपयोगकर्ता किसी दिए गए पेज से किन पेजों पर जा सकता है.
  4. यह हर JavaScript हिस्से के लिए मॉडल शुरू करता है और उन हिस्सों का अनुमान लगाता है जिनकी आगे ज़रूरत हो सकती है.
  5. यह इसके हर हिस्से में प्रीफ़ेच करने के निर्देश जोड़ता है.

Guess.js के पूरा होने पर, हर हिस्से में इससे मिलते-जुलते प्रीफ़ेच करने के निर्देश होंगे:

__GUESS__.p(
  ['a.js', 0.2],
  ['b.js', 0.8]
)

यह Guess.js-जनरेट किया गया कोड ब्राउज़र को बता रहा है कि वह a.js संभावना वाले हिस्से 0.2 और b.js को संभावना 0.8 वाले हिस्से को प्रीफ़ेच करने पर विचार करे.

जब ब्राउज़र कोड लागू कर लेता है, तब Guess.js उपयोगकर्ता की कनेक्शन स्पीड की जांच करेगा. अगर यह काफ़ी है, तो Guess.js, पेज के हेडर में दो <link rel="prefetch"> टैग डाल देगा. हर टैग के लिए एक टैग जोड़ा जाएगा. अगर उपयोगकर्ता हाई-स्पीड नेटवर्क पर है, तो Guess.js दोनों हिस्सों को प्रीफ़ेच कर देगा. अगर उपयोगकर्ता का नेटवर्क कनेक्शन खराब है, तो Guess.js सिर्फ़ b.js हिस्से को प्रीफ़ेच करेगा, क्योंकि इसकी ज़रूरत होने की संभावना काफ़ी ज़्यादा है.

ज़्यादा जानें

Guess.js के बारे में ज़्यादा जानने के लिए, ये संसाधन देखें: