पीआरपीएल पैटर्न के साथ झटपट लोड होने की सुविधा लागू करें

PRPL एक छोटा रूप है, जो वेब पेजों को लोड करने और ज़्यादा इंटरैक्टिव और तेज़ होने के लिए इस्तेमाल किए जाने वाले पैटर्न के बारे में बताता है:

  • देर से खोजे गए संसाधनों को पहले से लोड करें.
  • शुरुआती रास्ता जल्द से जल्द रेंडर करें.
  • बची हुई ऐसेट को प्री-कैश करें.
  • लेज़ी लोड अन्य रूट और गैर-ज़रूरी ऐसेट.

इस गाइड में जानें कि ये सभी तकनीकें, एक-दूसरे के साथ कैसे काम करती हैं. साथ ही, बेहतर नतीजे पाने के लिए इन्हें फिर भी अलग-अलग इस्तेमाल किया जा सकता है.

लाइटहाउस की मदद से अपने पेज को ऑडिट करें

PRPL तकनीक के हिसाब से, अपनी परफ़ॉर्मेंस को बेहतर बनाने के अवसरों की पहचान करने के लिए लाइटहाउस चलाएं:

  1. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
  2. लाइटहाउस टैब पर क्लिक करें.
  3. परफ़ॉर्मेंस और प्रोग्रेसिव वेब ऐप्लिकेशन चेकबॉक्स चुनें.
  4. रिपोर्ट जनरेट करने के लिए ऑडिट चलाएं पर क्लिक करें.

ज़्यादा जानकारी के लिए, Lighthouse की मदद से परफ़ॉर्मेंस के अवसरों के बारे में जानें देखें.

ज़रूरी संसाधनों को पहले से लोड करें

अगर किसी संसाधन को पार्स किया गया है और देर से फ़ेच किया गया है, तो लाइटहाउस नीचे दिया गया ऐसा ऑडिट दिखाता है जो पूरे नहीं हो सका:

लाइटहाउस: मुख्य अनुरोधों का ऑडिट पहले से लोड करें

पहले से लोड करने की सुविधा, डिक्लेरेटिव फ़ेच का अनुरोध है. यह ब्राउज़र को किसी ऐसे संसाधन का अनुरोध करने के लिए कहता है जिसे ब्राउज़र की प्रीलोड स्कैनर से नहीं खोजा जा सकता. जैसे, background-image प्रॉपर्टी में बताई गई इमेज. अपने एचटीएमएल दस्तावेज़ के सबसे ऊपर rel="preload" वाला <link> टैग जोड़कर, देर से खोजे गए संसाधनों को पहले से लोड करें:

<link rel="preload" as="image" href="hero-image.jpg">

<link rel="preload"> डायरेक्टिव जोड़ने से, उस रिसॉर्स के लिए अनुरोध शुरू हो जाएगा और उसे कैश मेमोरी में सेव कर दिया जाएगा. फिर ब्राउज़र ज़रूरत के समय इसे फिर से हासिल कर सकता है.

अहम संसाधनों को पहले से लोड करने के बारे में ज़्यादा जानकारी के लिए, ज़रूरी ऐसेट पहले से लोड करने की गाइड देखें.

शुरुआती रास्ता जल्द से जल्द रेंडर करें

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

लाइटहाउस: रेंडर ब्लॉक करने वाले रिसॉर्स ऑडिट को खत्म करें

फ़र्स्ट पेंट को बेहतर बनाने के लिए, लाइटहाउस ज़रूरी JavaScript को इनलाइन करने और बाकी को async का इस्तेमाल करके हटाने का सुझाव देता है. साथ ही, फ़ोल्ड के ऊपर इस्तेमाल किए जाने वाले ज़रूरी सीएसएस को इनलाइन करना भी. इससे परफ़ॉर्मेंस बेहतर होती है. ऐसा करने के लिए रेंडर को रोकने वाली एसेट को फ़ेच करने के लिए, सर्वर से राउंड-ट्रिप हटा दी जाती हैं. हालांकि, डेवलपमेंट के नज़रिए से इनलाइन कोड का रखरखाव करना मुश्किल होता है और ब्राउज़र, इसे अलग से कैश मेमोरी में सेव नहीं कर सकता.

फ़र्स्ट पेंट को बेहतर बनाने का एक और तरीका यह है कि आप अपने पेज के शुरुआती एचटीएमएल को सर्वर-साइड रेंडर करें. इससे उपयोगकर्ता को कॉन्टेंट तुरंत तब दिखता है, जब स्क्रिप्ट को फ़ेच, पार्स, और एक्ज़ीक्यूट किया जा रहा हो. हालांकि, इससे एचटीएमएल फ़ाइल का पेलोड बहुत बढ़ सकता है, जिससे इंटरैक्टिव में लगने वाला समय या आपके ऐप्लिकेशन को इंटरैक्टिव होने और उपयोगकर्ता के इनपुट का जवाब देने में लगने वाले समय को नुकसान पहुंच सकता है.

आपके ऐप्लिकेशन में First Paint को कम करने का कोई एक सही तरीका नहीं है. आपको इनलाइन स्टाइल और सर्वर-साइड रेंडरिंग के बारे में सिर्फ़ तब सोचना चाहिए, जब फ़ायदे आपके ऐप्लिकेशन के मुकाबले ज़्यादा अहमियत रखते हों. इन दोनों सिद्धांतों के बारे में ज़्यादा जानने के लिए, यहां दिए गए संसाधनों का इस्तेमाल करें.

सर्विस वर्कर से मिले अनुरोध/रिस्पॉन्स

प्री-कैश एसेट

प्रॉक्सी के तौर पर काम करके, सर्विस वर्कर बार-बार विज़िट करने पर सर्वर के बजाय, सीधे कैश से ऐसेट फ़ेच कर सकते हैं. इससे उपयोगकर्ता न सिर्फ़ ऑफ़लाइन होने पर, आपका ऐप्लिकेशन इस्तेमाल कर पाएंगे, बल्कि बार-बार होने वाली विज़िट पर भी पेज लोड होने में कम समय लगेगा.

सर्विस वर्कर जनरेट करने की प्रक्रिया को आसान बनाने के लिए तीसरे पक्ष की लाइब्रेरी का इस्तेमाल करें, बशर्ते आपके पास कैश मेमोरी में सेव करने की, लाइब्रेरी की ज़रूरत से ज़्यादा जटिल शर्तें न हों. उदाहरण के लिए, Workbox, टूल का एक कलेक्शन देता है, जिसकी मदद से कैश ऐसेट बनाने के लिए सर्विस वर्कर बनाया जा सकता है और उनका रखरखाव किया जा सकता है. सर्विस वर्कर और ऑफ़लाइन विश्वसनीयता के बारे में ज़्यादा जानकारी के लिए, भरोसेमंद लर्निंग पाथ में सर्विस वर्कर गाइड देखें.

लेज़ी लोड

नेटवर्क पर बहुत ज़्यादा डेटा भेजने पर, लाइटहाउस ऑडिट पूरा नहीं हो सका.

लाइटहाउस: यहां नेटवर्क पेलोड का बहुत बड़ा ऑडिट किया गया है

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

लाइटहाउस: JavaScript चालू होने में लगने वाले समय का ऑडिट

एक छोटा JavaScript पेलोड भेजने के लिए, जिसमें सिर्फ़ वह कोड हो जिसकी ज़रूरत उपयोगकर्ता को शुरुआत में आपका ऐप्लिकेशन लोड करते समय पड़ती है, मांग पर पूरे बंडल और लेज़ी लोड के हिस्सों को बांट दें.

अपने बंडल को बांटने में काम आने के बाद, ज़्यादा ज़रूरी हिस्सों को पहले से लोड कर लें (ज़रूरी एसेट पहले से लोड करने की गाइड देखें). पहले से लोड करने से, ज़रूरी संसाधन को ब्राउज़र जल्दी फ़ेच और डाउनलोड कर लेता है.

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

लाइटहाउस: ऑफ़स्क्रीन इमेज ऑडिट को कुछ समय के लिए रोकें

अगर आपके वेब पेज पर कई इमेज लोड की जाती हैं, तो पेज के लोड होने के दौरान, उन सभी इमेज को कुछ समय के लिए रोकें जो वेबसाइट में फ़ोल्ड के नीचे दिखती हैं या जो डिवाइस के व्यूपोर्ट से बाहर हैं. इमेज को लेज़ीलोड करने के लिए लेज़ीसाइज़ का इस्तेमाल करना लेख पढ़ें.

अगले चरण

अब आपको पीआरपीएल पैटर्न से जुड़े कुछ बुनियादी कॉन्सेप्ट पता चल गए हैं. इसलिए, ज़्यादा जानने के लिए इस सेक्शन में दी गई अगली गाइड पर जाएं. यह ध्यान रखना ज़रूरी है कि सभी तकनीकों को एक साथ लागू करने की ज़रूरत नहीं है. नीचे दी गई किसी भी कोशिश से परफ़ॉर्मेंस में काफ़ी सुधार होगा.

  • ज़रूरी संसाधनों को पहले से लोड करें.
  • शुरुआती रास्ता जल्द से जल्द रेंडर करें.
  • बची हुई ऐसेट को प्री-कैश करें.
  • लेज़ी लोड अन्य रूट और गैर-ज़रूरी ऐसेट.

PRPL पैटर्न के बारे में ज़्यादा पढ़ा जा सकता है.