जब कोई वेब पेज खोला जाता है, तो ब्राउज़र किसी सर्वर से एचटीएमएल दस्तावेज़ का अनुरोध करता है. इसके बाद, वह उसके कॉन्टेंट को पार्स करता है और रेफ़रंस में दिए गए किसी भी रिसॉर्स के लिए अलग-अलग अनुरोध सबमिट करता है. डेवलपर के तौर पर, आपको पहले से ही पता होता है कि आपके पेज को किन सभी संसाधनों की ज़रूरत है और उनमें से कौनसे सबसे ज़्यादा ज़रूरी हैं. इस जानकारी का इस्तेमाल करके, अहम संसाधनों का अनुरोध पहले से किया जा सकता है. इससे, लोड होने की प्रोसेस तेज़ हो जाती है. इस पोस्ट में बताया गया है कि <link rel="preload"> का इस्तेमाल करके, यह कैसे किया जा सकता है.
प्रीलोड करने की सुविधा कैसे काम करती है
पहले से लोड करने की सुविधा, उन रिसॉर्स के लिए सबसे सही है जिन्हें आम तौर पर ब्राउज़र देर से खोजता है.
@font-face नियम के साथ तय किया गया है. ब्राउज़र, स्टाइलशीट को डाउनलोड और पार्स करने के बाद ही फ़ॉन्ट फ़ाइल को लोड करता है.किसी रिसॉर्स को पहले से लोड करके, ब्राउज़र को यह बताया जाता है कि आपको उसे ब्राउज़र के खोजने से पहले फ़ेच करना है. ऐसा इसलिए किया जाता है, क्योंकि आपको पता है कि यह मौजूदा पेज के लिए ज़रूरी है.
क्रिटिकल रिक्वेस्ट चेन, उन संसाधनों के क्रम को दिखाती है जिन्हें ब्राउज़र प्राथमिकता देता है और फ़ेच करता है. Lighthouse, इस चेन के तीसरे लेवल पर मौजूद ऐसेट की पहचान, देर से मिली ऐसेट के तौर पर करता है. मुख्य अनुरोधों को पहले से लोड करने के ऑडिट का इस्तेमाल करके, यह पता लगाया जा सकता है कि किन संसाधनों को पहले से लोड करना है.
अपने एचटीएमएल दस्तावेज़ के हेड में rel="preload" के साथ <link> टैग जोड़कर, संसाधनों को पहले से लोड किया जा सकता है:
<link rel="preload" as="script" href="critical.js">
ब्राउज़र, पहले से लोड किए गए संसाधनों को कैश मेमोरी में सेव कर लेता है, ताकि ज़रूरत पड़ने पर वे तुरंत उपलब्ध हो सकें. (यह स्क्रिप्ट को लागू नहीं करता या स्टाइलशीट लागू नहीं करता.)
संसाधन के लिए दिए गए संकेत, जैसे कि preconnect और prefetch, ब्राउज़र के हिसाब से लागू किए जाते हैं. दूसरी ओर, ब्राउज़र के लिए preload ज़रूरी है. आधुनिक ब्राउज़र, रिसॉर्स को प्राथमिकता देने में पहले से ही काफ़ी अच्छे हैं. इसलिए, preload का इस्तेमाल कम से कम करें और सिर्फ़ सबसे ज़रूरी रिसॉर्स को पहले से लोड करें.
इस्तेमाल न किए गए प्रीलोड, load इवेंट के लगभग तीन सेकंड बाद, Chrome में Console की चेतावनी को ट्रिगर करते हैं.
उपयोग के उदाहरण
सीएसएस में तय किए गए रिसॉर्स को पहले से लोड करना
@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")
अगर webpack के पुराने वर्शन का इस्तेमाल किया जा रहा है, तो तीसरे पक्ष के प्लग इन का इस्तेमाल करें. जैसे, 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 का कम से कम इस्तेमाल करें और असल दुनिया में इसका असर मेज़र करें.