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"> डायरेक्टिव जोड़ने पर, उस रिसॉर्स के लिए अनुरोध भेजा जाएगा और उसे कैश मेमोरी में सेव कर दिया जाएगा. इसके बाद, ब्राउज़र ज़रूरत पड़ने पर उसे वापस ला सकता है.
अहम संसाधनों को पहले से लोड करने के बारे में ज़्यादा जानने के लिए, यह लेख पढ़ें: ज़रूरी ऐसेट को पहले से लोड करने के बारे में जानकारी देने वाली गाइड.
शुरुआती रास्ते को जल्द से जल्द रेंडर करें
अगर ऐसे संसाधन हैं जिनकी वजह से फ़र्स्ट पेंट में देरी होती है, तो लाइटहाउस एक चेतावनी दिखाता है, वह क्षण जब आपकी साइट, स्क्रीन पर पिक्सल रेंडर करती है:
First Paint को बेहतर बनाने के लिए, Lighthouse ज़रूरी JavaScript को इनलाइन करने और
इसका उपयोग करके शेष को स्थगित करना
async
साथ ही, पेज के ऊपरी हिस्से में ज़रूरी सीएसएस को इनलाइन करें. इससे परफ़ॉर्मेंस बेहतर होती है
रेंडर ब्लॉक करने वाली ऐसेट को फ़ेच करने के लिए, सर्वर की राउंड-ट्रिप को हटाकर,
हालांकि, डेवलपमेंट के नज़रिए से इनलाइन कोड को बनाए रखना मुश्किल होता है और
को ब्राउज़र द्वारा अलग से संचित नहीं किया जा सकता.
First Paint को बेहतर बनाने का एक और तरीका है शुरुआती दौर में सर्वर-साइड रेंडर करना आपके पेज के एचटीएमएल में मौजूद होता है. इससे स्क्रिप्ट के दौरान, लोगों को तुरंत कॉन्टेंट दिखने लगता है अब भी फ़ेच, पार्स, और एक्ज़ीक्यूट किए जा रहे हैं. हालांकि, इससे आपकी साइट पर आने वाले लोगों की संख्या एचटीएमएल फ़ाइल का पेलोड बहुत ज़्यादा होता है, जिससे इंटरैक्टिव में लगने वाले समय को नुकसान पहुंच सकता है, या आपके आवेदन को इंटरैक्टिव होने और जवाब देने में लगने वाला समय उपयोगकर्ता के इनपुट में शामिल करें.
आपके फ़ोन में फ़र्स्ट पेंट को कम करने का कोई एक सही समाधान नहीं है इस्तेमाल किया जा सकता है, और आपको सिर्फ़ इनलाइन स्टाइल इस्तेमाल करना चाहिए और सर्वर साइड से रेंडरिंग से ज़्यादा फ़ायदे मिल सकते हैं. आप इन दोनों सिद्धांतों के बारे में ज़्यादा जानने के लिए, नीचे दिए गए संसाधनों का इस्तेमाल करें.
प्री-कैश एसेट
प्रॉक्सी के रूप में काम करके, सर्विस वर्कर सीधे कैश मेमोरी से एसेट फ़ेच कर सकते हैं पर क्लिक करने को कहा जाता है. इससे उपयोगकर्ताओं को न सिर्फ़ हमारी ऑफ़लाइन होने पर भी डाउनलोड करने की सुविधा उपलब्ध है, जिससे पेज लोड होने में कम समय लगता है बार-बार विज़िट करने की सुविधा मिलती है.
सर्विस वर्कर जनरेट करने की प्रोसेस को आसान बनाने के लिए, तीसरे पक्ष की लाइब्रेरी का इस्तेमाल करें जब तक कि आपके पास लाइब्रेरी की तुलना में ज़्यादा जटिल कैशिंग ज़रूरतें न हों उपलब्ध कराएँ. उदाहरण के लिए, Workbox वेबसाइट ऐसे टूल का कलेक्शन जिनकी मदद से, सर्विस वर्कर बनाया जा सकता है और उसका रखरखाव किया जा सकता है कैश मेमोरी में सेव होने वाली ऐसेट का इस्तेमाल करता है. सर्विस वर्कर और ऑफ़लाइन विश्वसनीयता पर ज़्यादा जानकारी के लिए, विश्वसनीयता से जुड़े लर्निंग पाथ में सर्विस वर्कर गाइड देखें.
लेज़ी लोड
नेटवर्क पर बहुत ज़्यादा डेटा भेजने पर, लाइटहाउस उस ऑडिट को दिखाता है जो पूरा नहीं हो सका.
इसमें सभी तरह की ऐसेट शामिल हैं. हालांकि, खास तौर पर बड़े JavaScript पेलोड यह काफ़ी महंगा साबित होता है, क्योंकि ब्राउज़र को पार्स और कंपाइल करने में लगने वाला समय. ज़रूरत पड़ने पर, लाइटहाउस इसके लिए चेतावनी भी देता है.
ऐसा छोटा JavaScript पेलोड भेजने के लिए जिसमें सिर्फ़ वही कोड हो जिसकी ज़रूरत उपयोगकर्ता शुरुआत में आपके ऐप्लिकेशन को लोड करता है. साथ ही, मांग पर पूरे बंडल और लेज़ी लोड वाले हिस्सों को बांटता है.
अपने बंडल को अलग-अलग हिस्सों में बांटने के बाद, उन हिस्सों को पहले से लोड कर लें जो हैं ज़रूरी है (ज़रूरी ऐसेट पहले से लोड करने की गाइड पढ़ें). पहले से लोड करने से यह पक्का होता है कि ज़्यादा ज़रूरी संसाधन जल्द ही फ़ेच और डाउनलोड हो जाएंगे ब्राउज़र से.
मांग पर, JavaScript के अलग-अलग हिस्सों को बांटने और लोड करने के अलावा, लाइटहाउस, ऐसी इमेज के लिए भी ऑडिट की सुविधा देता है जो ज़्यादा समय से लोड नहीं होती हैं.
अगर वेब पेज पर कई इमेज लोड की जाती हैं, तो पेज में फ़ोल्ड के नीचे मौजूद सभी इमेज को अलग करें या पेज लोड होने पर, डिवाइस के व्यूपोर्ट के बाहर होगा (इमेज को लेज़ीलोड करने के लिए लेज़ीसाइज़ का इस्तेमाल करना देखें).
अगले चरण
अब आपको PRPL पैटर्न समझने के लिए, कुछ बुनियादी कॉन्सेप्ट समझ आ गया है, ज़्यादा जानने के लिए, इस सेक्शन में मौजूद अगली गाइड पर जाएं. यह याद रखना ज़रूरी है कि हर तकनीक को एक साथ लागू करते हैं. इनमें से किसी भी तरीके का इस्तेमाल करने पर, प्रदर्शन में सुधार किए गए हैं.
- ज़रूरी संसाधन पहले से लोड करें.
- शुरुआती रास्ते को जल्द से जल्द रेंडर करें.
- बची हुई ऐसेट को प्री-कैश करें.
- अन्य रूट और ग़ैर-ज़रूरी ऐसेट लेज़ी लोड हो सकती है.
आप PRPL पैटर्न के बारे में और पढ़ सकते हैं.