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

अनुमान के आधार पर प्रीफ़ेच करने की सुविधा के बारे में जानें. साथ ही, यह भी जानें कि 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 के बारे में ज़्यादा जानने के लिए, ये संसाधन देखें: