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

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

मिंको गेचेव

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 के साथ इंटिग्रेशन है. इसे अपने ऐप्लिकेशन में इस्तेमाल करने के लिए, अपने वेबपैक कॉन्फ़िगरेशन में इन लाइनों को जोड़कर 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 से जनरेट किया गया कोड, ब्राउज़र को यह बता रहा है कि प्रॉबबिलिटी 0.2 वाले a.js हिस्से और प्रॉबबिलिटी 0.8 के साथ b.js को प्रीफ़ेच करने के बारे में सोचें.

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

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

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