जब कोई वेब पेज खोला जाता है, तो ब्राउज़र किसी सर्वर से एचटीएमएल दस्तावेज़ का अनुरोध करता है. इसके बाद, वह उसके कॉन्टेंट को पार्स करता है और रेफ़रंस में दिए गए किसी भी रिसॉर्स के लिए अलग-अलग अनुरोध सबमिट करता है. डेवलपर के तौर पर, आपको पहले से ही पता होता है कि आपके पेज को किन सभी संसाधनों की ज़रूरत है और उनमें से कौनसे सबसे ज़्यादा ज़रूरी हैं. इस जानकारी का इस्तेमाल करके, अहम संसाधनों का अनुरोध पहले से किया जा सकता है. इससे, लोड होने की प्रोसेस तेज़ हो जाती है. इस पोस्ट में, <link rel="preload"> का इस्तेमाल करके ऐसा करने का तरीका बताया गया है.
प्रीलोड करने की सुविधा कैसे काम करती है
पहले से लोड करना, उन संसाधनों के लिए सबसे सही होता है जिन्हें आम तौर पर ब्राउज़र देर से खोजता है.
@font-face नियम के साथ तय किया गया है. ब्राउज़र, स्टाइलशीट को डाउनलोड और पार्स करने के बाद ही फ़ॉन्ट फ़ाइल को लोड करता है.किसी रिसॉर्स को पहले से लोड करके, ब्राउज़र को यह बताया जाता है कि आपको उसे ब्राउज़र के खोजने से पहले फ़ेच करना है. ऐसा इसलिए किया जाता है, क्योंकि आपको पता है कि यह मौजूदा पेज के लिए ज़रूरी है.
अहम अनुरोध चेन, उन संसाधनों का क्रम दिखाती है जिन्हें ब्राउज़र प्राथमिकता देता है और फ़ेच करता है. Lighthouse, इस चेन के तीसरे लेवल पर मौजूद ऐसेट की पहचान, देर से मिली ऐसेट के तौर पर करता है. मुख्य अनुरोधों को पहले से लोड करने के ऑडिट का इस्तेमाल करके, यह पता लगाया जा सकता है कि किन संसाधनों को पहले से लोड करना है.
अपने एचटीएमएल दस्तावेज़ के हेड में rel="preload" के साथ <link> टैग जोड़कर, संसाधनों को पहले से लोड किया जा सकता है:
<link rel="preload" as="script" href="critical.js">
ब्राउज़र, पहले से लोड किए गए रिसॉर्स को कैश मेमोरी में सेव करता है, ताकि ज़रूरत पड़ने पर वे तुरंत उपलब्ध हो जाएं. (यह स्क्रिप्ट निष्पादित नहीं करता या स्टाइलशीट लागू नहीं करता.)
संसाधन के लिए दिए गए संकेत, जैसे कि preconnect और prefetch, ब्राउज़र के हिसाब से लागू किए जाते हैं. दूसरी ओर, preload, ब्राउज़र के लिए ज़रूरी है. आधुनिक ब्राउज़र, रिसॉर्स को प्राथमिकता देने में पहले से ही काफ़ी अच्छे हैं. इसलिए, preload का इस्तेमाल कम से कम करें और सिर्फ़ सबसे ज़रूरी रिसॉर्स को पहले से लोड करें.
पहले से लोड न किए जाने की वजह से, Chrome में load इवेंट के करीब तीन सेकंड बाद, कंसोल की चेतावनी दिख जाएगी.
उपयोग के उदाहरण
सीएसएस में तय किए गए रिसॉर्स को पहले से लोड करना
@font-face के नियमों या सीएसएस फ़ाइलों में दिए गए बैकग्राउंड इमेज वाले फ़ॉन्ट तब तक नहीं खोजे जा सकते, जब तक ब्राउज़र उन सीएसएस फ़ाइलों को डाउनलोड और पार्स नहीं कर लेता. इन रिसॉर्स को पहले से लोड करने से, यह पक्का हो जाता है कि सीएसएस फ़ाइलों के डाउनलोड होने से पहले ही इन्हें फ़ेच कर लिया गया है.
सीएसएस फ़ाइलें पहले से लोड की जा रही हैं
अगर ज़रूरी सीएसएस के तरीके का इस्तेमाल किया जा रहा है, तो अपनी सीएसएस को दो हिस्सों में बांटें. वेबपेज पर सबसे पहले दिखने वाले कॉन्टेंट को रेंडर करने के लिए ज़रूरी सीएसएस, दस्तावेज़ के <head> में इनलाइन की जाती है. आम तौर पर, गैर-ज़रूरी सीएसएस को JavaScript के साथ लेज़ी-लोड किया जाता है. गैर-ज़रूरी सीएसएस को लोड करने से पहले, JavaScript के चलने का इंतज़ार करने पर, उपयोगकर्ताओं को स्क्रोल करने पर रेंडरिंग में देरी हो सकती है. इसलिए, जल्द से जल्द डाउनलोड शुरू करने के लिए, <link rel="preload"> का इस्तेमाल करना बेहतर होगा.
JavaScript फ़ाइलों को पहले से लोड करना
ब्राउज़र, पहले से लोड की गई फ़ाइलों को एक्सीक्यूट नहीं करते. इसलिए, फ़ेच करने की प्रोसेस को एक्सीक्यूशन से अलग करने के लिए, प्रीलोडिंग की सुविधा का इस्तेमाल किया जा सकता है. इससे, इंटरैक्टिव होने में लगने वाला समय जैसी मेट्रिक को बेहतर बनाया जा सकता है. पहले से लोड करने की सुविधा तब सबसे अच्छी तरह से काम करती है, जब आप अपने JavaScript बंडल को अलग-अलग करें और सिर्फ़ ज़रूरी हिस्सों को पहले से लोड करें.
rel=preload एट्रिब्यूट को लागू करने का तरीका
preload को लागू करने का सबसे आसान तरीका यह है कि दस्तावेज़ के <head> में <link> टैग जोड़ा जाए:
<head>
<link rel="preload" as="script" href="critical.js">
</head>
as एट्रिब्यूट की वैल्यू सबमिट करने से, ब्राउज़र को प्रीफ़ेच किए गए रिसॉर्स की प्राथमिकता तय करने में मदद मिलती है. यह प्राथमिकता, रिसॉर्स के टाइप के हिसाब से तय की जाती है. साथ ही, इससे ब्राउज़र को सही हेडर सेट करने और यह तय करने में भी मदद मिलती है कि रिसॉर्स पहले से कैश मेमोरी में मौजूद है या नहीं. इस एट्रिब्यूट के लिए ये वैल्यू इस्तेमाल की जा सकती हैं: script, style, font, image, और अन्य.
फ़ॉन्ट जैसे कुछ तरह के संसाधन, बिना पहचान बताए मोड में लोड किए जाते हैं. इनके लिए, आपको crossorigin एट्रिब्यूट को preload के साथ सेट करना होगा:
<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>
<link> एलिमेंट में type एट्रिब्यूट भी शामिल होता है. इसमें लिंक किए गए रिसॉर्स का MIME टाइप होता है. ब्राउज़र, type एट्रिब्यूट की वैल्यू का इस्तेमाल करके यह पक्का करते हैं कि संसाधनों को सिर्फ़ तब प्रीलोड किया जाए, जब उनके फ़ाइल टाइप का इस्तेमाल किया जा सकता हो. अगर ब्राउज़र बताए गए संसाधन प्रकार के साथ काम नहीं करता है, तो वह <link rel="preload"> को अनदेखा कर देगा.
Link एचटीटीपी हेडर का इस्तेमाल करके भी, किसी भी तरह का संसाधन पहले से लोड किया जा सकता है:
Link: </css/style.css>; rel="preload"; as="style"
एचटीटीपी हेडर में preload की जानकारी देने का एक फ़ायदा यह है कि ब्राउज़र को दस्तावेज़ को खोजने के लिए उसे पार्स करने की ज़रूरत नहीं होती. इससे कुछ मामलों में, बेहतर परफ़ॉर्मेंस मिल सकती है.
webpack की मदद से JavaScript मॉड्यूल को पहले से लोड करना
अगर आपने अपने ऐप्लिकेशन की बिल्ड फ़ाइलें बनाने के लिए, किसी ऐसे मॉड्यूल बंडलर का इस्तेमाल किया है जो प्रीलोड टैग इंजेक्ट करता है, तो आपको यह देखना होगा कि वह प्रीलोड टैग इंजेक्ट करता है या नहीं. webpack के 4.6.0 या उसके बाद के वर्शन में, import() में मैजिक टिप्पणियों का इस्तेमाल करके, प्रीलोडिंग की सुविधा काम करती है:
import(_/* webpackPreload: true */_ "CriticalChunk")
अगर आपके पास वेबपैक का पुराना वर्शन है, तो किसी तीसरे पक्ष के प्लगिन का इस्तेमाल करें. जैसे, preload-webpack-plugin.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी पर, प्रीलोड करने के असर
पहले से लोड करने की सुविधा, परफ़ॉर्मेंस को बेहतर बनाने का एक असरदार तरीका है. इससे लोड होने की स्पीड पर असर पड़ता है. इस तरह के ऑप्टिमाइज़ेशन से, आपकी साइट की वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी में बदलाव हो सकते हैं. इसलिए, इनके बारे में जानना ज़रूरी है.
सबसे बड़ा कॉन्टेंटफ़ुल पेंट (एलसीपी)
फ़ॉन्ट और इमेज के मामले में, पहले से लोड करने का असर सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) पर काफ़ी असरदार होता है. इसकी वजह यह है कि इमेज और टेक्स्ट नोड, दोनों एलसीपी के उम्मीदवार हो सकते हैं. वेब फ़ॉन्ट का इस्तेमाल करके रेंडर की जाने वाली हीरो इमेज और टेक्स्ट को पहले से लोड करने की सुविधा काफ़ी फ़ायदेमंद साबित हो सकती है. साथ ही, इसका इस्तेमाल तब करना चाहिए, जब उपयोगकर्ता को कॉन्टेंट के इन ज़रूरी हिस्सों को तेज़ी से डिलीवर करने के अवसर मौजूद हों.
हालांकि, आपको पेजों को पहले से लोड करने और दूसरे ऑप्टिमाइज़ेशन के लिए सावधानी बरतनी चाहिए! खास तौर पर, बहुत ज़्यादा संसाधनों को पहले से लोड करने से बचें. अगर कई संसाधनों को प्राथमिकता दी जाती है, तो उनमें से कोई भी संसाधन पर काम नहीं करता. ज़्यादा प्रीलोड हिंट का असर, खास तौर पर उन लोगों पर पड़ेगा जो धीमे नेटवर्क का इस्तेमाल कर रहे हैं. ऐसे में, बैंडविड्थ का इस्तेमाल ज़्यादा होगा.
इसके बजाय, कुछ ज़्यादा अहमियत वाले संसाधनों पर फ़ोकस करें जिन्हें पहले से लोड करने से फ़ायदा होगा. फ़ॉन्ट को पहले से लोड करते समय, पक्का करें कि फ़ॉन्ट, WOFF 2.0 फ़ॉर्मैट में दिए जा रहे हों. इससे रिसॉर्स लोड होने में लगने वाले समय को ज़्यादा से ज़्यादा कम किया जा सकेगा. WOFF 2.0, ब्राउज़र के साथ बेहतर तरीके से काम करता है. इसलिए, अगर एलसीपी कैंडिडेट कोई टेक्स्ट नोड है, तो WOFF 1.0 या TrueType (TTF) जैसे पुराने फ़ॉर्मैट का इस्तेमाल करने पर, आपके एलसीपी में देरी होगी.
एलसीपी और JavaScript के मामले में, आपको यह पक्का करना होगा कि सर्वर से पूरा मार्कअप भेजा जा रहा हो, ताकि ब्राउज़र का प्रीलोड स्कैनर सही तरीके से काम कर सके. अगर आपका अनुभव, मार्कअप को रेंडर करने के लिए पूरी तरह से JavaScript पर निर्भर है और सर्वर से रेंडर किया गया एचटीएमएल नहीं भेजा जा सकता, तो ब्राउज़र प्रीलोड स्कैनर के काम न करने पर, इसकी जगह पर काम करना फ़ायदेमंद होगा. साथ ही, ऐसे रिसॉर्स को प्रीलोड करें जिन्हें JavaScript लोड और लागू होने के बाद ही खोजा जा सकता है.
कुल लेआउट शिफ़्ट (सीएलएस)
कुल लेआउट शिफ़्ट (सीएलएस), वेब फ़ॉन्ट के लिए खास तौर पर अहम मेट्रिक है. साथ ही, सीएलएस का वेब फ़ॉन्ट के साथ अहम इंटरैक्शन होता है. वेब फ़ॉन्ट, फ़ॉन्ट लोड होने के तरीके को मैनेज करने के लिए, font-display सीएसएस प्रॉपर्टी का इस्तेमाल करते हैं. वेब फ़ॉन्ट से जुड़े लेआउट में होने वाले बदलावों को कम करने के लिए, ये रणनीतियां अपनाएं:
font-displayके लिए डिफ़ॉल्टblockवैल्यू का इस्तेमाल करते समय, फ़ॉन्ट पहले से लोड करें. यह बहुत ही समझदारी से किया जाने वाला काम है. फ़ॉलबैक के बिना फ़ॉन्ट के डिसप्ले को ब्लॉक करने को, उपयोगकर्ता अनुभव से जुड़ी समस्या माना जा सकता है. एक तरफ़,font-display: block;की मदद से फ़ॉन्ट लोड करने से, वेब फ़ॉन्ट से जुड़े लेआउट में होने वाले बदलावों को रोका जा सकता है. दूसरी ओर, अगर उपयोगकर्ता अनुभव के लिए वे वेब फ़ॉन्ट ज़रूरी हैं, तो आप चाहते हैं कि वे जल्द से जल्द लोड हो जाएं.font-display: block;के साथ प्रीलोड को जोड़ने पर, शायद समझौता किया जा सकता है.font-displayके लिएfallbackवैल्यू का इस्तेमाल करते समय, फ़ॉन्ट पहले से लोड करें.fallback,swapऔरblockके बीच का एक समझौता है. इसमें ब्लॉक करने की अवधि बहुत कम होती है.font-displayके लिए, पहले से लोड किए बिनाoptionalवैल्यू का इस्तेमाल करें. अगर कोई वेब फ़ॉन्ट, उपयोगकर्ता अनुभव के लिए ज़रूरी नहीं है, लेकिन इसका इस्तेमाल पेज के ज़्यादातर टेक्स्ट को रेंडर करने के लिए किया जाता है, तोoptionalवैल्यू का इस्तेमाल करें. खराब स्थितियों में,optionalपेज के टेक्स्ट को फ़ॉलबैक फ़ॉन्ट में दिखाएगा. साथ ही, अगले नेविगेशन के लिए फ़ॉन्ट को बैकग्राउंड में लोड करेगा. इन स्थितियों में, सीएलएस बेहतर हो जाता है, क्योंकि सिस्टम फ़ॉन्ट तुरंत रेंडर हो जाएंगे. साथ ही, अगले पेज लोड होने पर, लेआउट शिफ़्ट के बिना फ़ॉन्ट तुरंत लोड हो जाएगा.
वेब फ़ॉन्ट के लिए सीएलएस को ऑप्टिमाइज़ करना मुश्किल होता है. हमेशा की तरह, लैब में प्रयोग करें. हालांकि, यह पता लगाने के लिए कि फ़ॉन्ट लोड करने की आपकी रणनीतियां सीएलएस को बेहतर बना रही हैं या खराब कर रही हैं, अपने फ़ील्ड डेटा पर भरोसा करें.
पेज के रिस्पॉन्स में लगने वाला समय (आईएनपी)
पेज के रिस्पॉन्स में लगने वाला समय एक मेट्रिक है. इससे पता चलता है कि उपयोगकर्ता के इनपुट का जवाब देने में पेज को कितना समय लगता है. वेब पर इंटरैक्टिविटी का ज़्यादातर हिस्सा JavaScript से मिलता है. इसलिए, ज़रूरी इंटरैक्शन को बेहतर बनाने वाले JavaScript को प्रीलोड करने से, पेज का INP कम रखने में मदद मिल सकती है. हालांकि, ध्यान रखें कि स्टार्टअप के दौरान बहुत ज़्यादा JavaScript को प्रीलोड करने से, अनचाहे खराब नतीजे मिल सकते हैं. ऐसा तब होता है, जब बैंडविड्थ के लिए बहुत ज़्यादा संसाधनों का इस्तेमाल किया जा रहा हो.
आपको कोड को अलग-अलग हिस्सों में बांटने के तरीके को लेकर भी सावधानी बरतनी होगी. कोड को अलग-अलग करने की सुविधा, स्टार्टअप के दौरान लोड होने वाले JavaScript की संख्या को कम करने के लिए एक बेहतरीन ऑप्टिमाइज़ेशन है. हालांकि, अगर इंटरैक्शन की शुरुआत में लोड होने वाले JavaScript पर निर्भर किया जाता है, तो इंटरैक्शन में देरी हो सकती है. इसकी भरपाई करने के लिए, आपको उपयोगकर्ता के इंटेंट की जांच करनी होगी और इंटरैक्शन होने से पहले, JavaScript के ज़रूरी हिस्सों के लिए पहले से लोड डालना होगा. इसका एक उदाहरण, फ़ॉर्म के किसी भी फ़ील्ड के फ़ोकस में होने पर फ़ॉर्म के कॉन्टेंट की पुष्टि करने के लिए ज़रूरी JavaScript को पहले से लोड करना हो सकता है.
नतीजा
पेज स्पीड को बेहतर बनाने के लिए, उन अहम रिसॉर्स को पहले से लोड करें जिन्हें ब्राउज़र ने देर से खोजा है. सभी चीज़ों को पहले से लोड करना फ़ायदेमंद नहीं होगा. इसलिए, preload का कम से कम इस्तेमाल करें और असल दुनिया में इसका असर मेज़र करें.