PRPL एक ऐसा शब्द है जिससे वेब पेजों को तेज़ी से लोड करने और इंटरैक्टिव बनाने के लिए इस्तेमाल किए जाने वाले पैटर्न के बारे में पता चलता है:
- बाद में खोजे गए रिसॉर्स को पहले से लोड करें.
- शुरुआती रास्ते को जल्द से जल्द रेंडर करें.
- बाकी ऐसेट को पहले से कैश मेमोरी में सेव करें.
- अन्य रूट और ज़रूरी नहीं ऐसी ऐसेट को लेज़ी लोड करें.
इस गाइड में जानें कि इनमें से हर तकनीक एक-दूसरे के साथ कैसे काम करती है. हालांकि, परफ़ॉर्मेंस के नतीजे पाने के लिए, इनका इस्तेमाल अलग-अलग भी किया जा सकता है.
लाइटहाउस की मदद से अपने पेज को ऑडिट करें
लाइटहाउस इस्तेमाल करें, ताकि पीआरपीएल टेक्नोलॉजी के साथ काम करने के अवसरों की पहचान की जा सके:
- DevTools खोलने के लिए, `Control+Shift+J` दबाएं. Mac पर, `Command+Option+J` दबाएं.
- Lighthouse टैब पर क्लिक करें.
- परफ़ॉर्मेंस और प्रोग्रेसिव वेब ऐप्लिकेशन चेकबॉक्स चुनें.
- रिपोर्ट जनरेट करने के लिए, ऑडिट चलाएं पर क्लिक करें.
ज़्यादा जानकारी के लिए, Lighthouse की मदद से परफ़ॉर्मेंस से जुड़े अवसरों का पता लगाना लेख पढ़ें.
ज़रूरी रिसॉर्स प्रीलोड करना
अगर किसी खास संसाधन को पार्स किया जाता है और देर से फ़ेच किया जाता है, तो लाइटहाउस ऐसे गड़बड़ी वाले ऑडिट दिखाता है:
पहले से लोड करना, फ़ेच करने का ऐसा अनुरोध होता है जिसमें ब्राउज़र को किसी ऐसे संसाधन का अनुरोध करने के लिए कहा जाता है जिसे ब्राउज़र के प्रीलोड स्कैनर से ऐक्सेस नहीं किया जा सकता. जैसे, background-image प्रॉपर्टी से मिली इमेज. अपने एचटीएमएल दस्तावेज़ में सबसे ऊपर rel="preload" के साथ <link> टैग जोड़कर, उन रिसॉर्स को पहले से लोड करें जिनका देर से पता चला है:
<link rel="preload" as="image" href="hero-image.jpg">
<link rel="preload"> डायरेक्टिव जोड़ने पर, उस संसाधन के लिए अनुरोध शुरू हो जाएगा और उसे कैश मेमोरी में सेव कर दिया जाएगा. इसके बाद, ब्राउज़र ज़रूरत पड़ने पर उसे वापस पा सकता है.
ज़रूरी संसाधनों को पहले से लोड करने के बारे में ज़्यादा जानने के लिए, ज़रूरी ऐसेट को पहले से लोड करने की गाइड देखें.
शुरुआती रास्ता जल्द से जल्द रेंडर करना
अगर ऐसे संसाधन मौजूद हैं जिनकी वजह से फ़र्स्ट पेंट में देरी होती है, तो Lighthouse चेतावनी देता है. फ़र्स्ट पेंट वह समय होता है जब आपकी साइट, स्क्रीन पर पिक्सल रेंडर करती है:
फ़र्स्ट पेंट को बेहतर बनाने के लिए, लाइटहाउस ज़रूरी JavaScript को इनलाइन करने और बाकी को async का इस्तेमाल करके टालने का सुझाव देता है. साथ ही, यह पेज के ऊपरी हिस्से में इस्तेमाल किए जाने वाले ज़रूरी सीएसएस को इनलाइन करने का सुझाव देता है. इससे परफ़ॉर्मेंस बेहतर होती है, क्योंकि रेंडर करने से रोकने वाली ऐसेट को फ़ेच करने के लिए, सर्वर पर बार-बार जाने की ज़रूरत नहीं पड़ती.
हालांकि, डेवलपमेंट के लिहाज़ से इनलाइन कोड को मैनेज करना मुश्किल होता है और इसे ब्राउज़र अलग से कैश मेमोरी में सेव नहीं कर सकता.
फ़र्स्ट पेंट को बेहतर बनाने का एक और तरीका यह है कि आप अपने पेज के शुरुआती एचटीएमएल को सर्वर-साइड रेंडर करें. इससे उपयोगकर्ता को कॉन्टेंट तुरंत दिखता है, जबकि स्क्रिप्ट को फ़ेच, पार्स, और लागू किया जा रहा होता है. हालांकि, इससे एचटीएमएल फ़ाइल का पेलोड काफ़ी बढ़ सकता है. इससे इंटरैक्टिव होने में लगने वाला समय या आपके ऐप्लिकेशन के इंटरैक्टिव होने और उपयोगकर्ता के इनपुट का जवाब देने में लगने वाला समय बढ़ सकता है.
अपने ऐप्लिकेशन में फ़र्स्ट पेंट को कम करने का कोई एक सही तरीका नहीं है. आपको स्टाइल को इनलाइन करने और सर्वर-साइड रेंडरिंग का इस्तेमाल सिर्फ़ तब करना चाहिए, जब इसके फ़ायदे आपके ऐप्लिकेशन के लिए नुकसान से ज़्यादा हों. इन दोनों कॉन्सेप्ट के बारे में ज़्यादा जानने के लिए, यहां दिए गए संसाधन देखें.
पहले से कैश मेमोरी में सेव की गई ऐसेट
प्रॉक्सी के तौर पर काम करके, सर्विस वर्कर्स, बार-बार विज़िट करने पर ऐसेट को सीधे कैश मेमोरी से फ़ेच कर सकते हैं, न कि सर्वर से. इससे उपयोगकर्ता, ऑफ़लाइन होने पर भी आपके ऐप्लिकेशन का इस्तेमाल कर सकते हैं. साथ ही, दोबारा आने पर पेज लोड होने में कम समय लगता है.
सर्विस वर्कर जनरेट करने की प्रोसेस को आसान बनाने के लिए, तीसरे पक्ष की लाइब्रेरी का इस्तेमाल करें. ऐसा तब तक किया जा सकता है, जब तक कि आपके पास कैश मेमोरी में सेव करने की जटिल शर्तें, लाइब्रेरी से मिलने वाली ज़रूरतों से ज़्यादा मुश्किल हों. उदाहरण के लिए, Workbox ऐसे टूल का कलेक्शन उपलब्ध कराता है जिनकी मदद से, एसेट को कैश मेमोरी में सेव करने के लिए सेवा वर्कर बनाया और मैनेज किया जा सकता है. सेवा वर्कर और ऑफ़लाइन काम करने की सुविधा के बारे में ज़्यादा जानकारी के लिए, भरोसेमंद ऐप्लिकेशन बनाने के बारे में जानकारी देने वाले पाथ में सर्विस वर्कर गाइड देखें.
लेज़ी लोड
नेटवर्क पर बहुत ज़्यादा डेटा भेजने पर, लाइटहाउस उस ऑडिट को दिखाता है जो पूरा नहीं हो सका.
इसमें सभी तरह की एसेट शामिल हैं. हालांकि, बड़े JavaScript पेलोड की वजह से, ब्राउज़र को उन्हें पार्स और कंपाइल करने में ज़्यादा समय लगता है. इसलिए, इनकी लागत ज़्यादा होती है. ज़रूरत पड़ने पर, लाइटहाउस इसके लिए चेतावनी भी देता है.
उपयोगकर्ता जब पहली बार आपका ऐप्लिकेशन लोड करता है, तब सिर्फ़ ज़रूरी कोड वाला छोटा JavaScript पेलोड भेजने के लिए, पूरे बंडल को अलग-अलग हिस्सों में बांटें और मांग के हिसाब से लेज़ी लोड करें.
बंडल को अलग-अलग हिस्सों में बांटने के बाद, सबसे ज़्यादा ज़रूरी हिस्सों को पहले से लोड करें. इसके लिए, ज़रूरी एसेट को पहले से लोड करने से जुड़ी गाइड देखें. प्रीलोड करने से यह पक्का होता है कि ब्राउज़र ज़्यादा ज़रूरी रिसॉर्स को जल्दी फ़ेच और डाउनलोड कर ले.
मांग पर अलग-अलग JavaScript चंक को बांटने और लोड करने के अलावा, Lighthouse, ज़रूरी नहीं होने वाली इमेज को लेज़ी लोड करने के लिए भी ऑडिट करता है.
अगर आपके वेब पेज पर कई इमेज लोड की जाती हैं, तो पेज लोड होने पर, उन सभी इमेज को अलग करें जो फ़ोल्ड के नीचे मौजूद हों या डिवाइस के व्यूपोर्ट के बाहर हों. इमेज को लेज़ीलोड करने के लिए लेज़ीसाइज़ का इस्तेमाल करना लेख पढ़ें.
अगले चरण
अब आपने PRPL पैटर्न के कुछ बुनियादी कॉन्सेप्ट के बारे में जान लिया है. ज़्यादा जानने के लिए, इस सेक्शन में अगली गाइड पर जाएं. ध्यान रखें कि सभी तकनीकों को एक साथ इस्तेमाल करना ज़रूरी नहीं है. इनमें से किसी का भी इस्तेमाल करने पर, प्रॉडक्ट की परफ़ॉर्मेंस में काफ़ी सुधार होता है.
- ज़रूरी संसाधनों को प्रीलोड करें.
- शुरुआती रास्ते को जल्द से जल्द रेंडर करें.
- बाकी ऐसेट को पहले से कैश मेमोरी में सेव करें.
- अन्य रूट और ग़ैर-ज़रूरी ऐसेट लेज़ी लोड हो सकती है.
आप PRPL पैटर्न के बारे में और ज़्यादा पढ़ सकते हैं.