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