किसी वेब पेज को खोलने पर, ब्राउज़र सर्वर से एचटीएमएल दस्तावेज़ का अनुरोध करता है. इसके बाद, वह इसके कॉन्टेंट को पार्स करता है और रेफ़र किए गए किसी भी रिसॉर्स के लिए अलग-अलग अनुरोध सबमिट करता है. डेवलपर के तौर पर, आपको पहले से ही उन सभी संसाधनों के बारे में पता होता है जिनकी आपके पेज को ज़रूरत होती है. साथ ही, आपको यह भी पता होता है कि उनमें से कौनसे संसाधन सबसे ज़्यादा ज़रूरी हैं. इस जानकारी का इस्तेमाल करके, ज़रूरी संसाधनों का अनुरोध पहले से किया जा सकता है. इससे, लोड होने की प्रोसेस को तेज़ किया जा सकता है. इस पोस्ट में बताया गया है कि <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 एट्रिब्यूट को भी स्वीकार करते हैं. इसमें लिंक किए गए संसाधन का एमआईएमई टाइप होता है. ब्राउज़र, 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.
प्रीलोडिंग का Core Web Vitals पर असर
पहले से लोड करने की सुविधा, परफ़ॉर्मेंस को ऑप्टिमाइज़ करने का एक असरदार तरीका है. इससे पेज लोड होने की स्पीड पर असर पड़ता है. इस तरह के ऑप्टिमाइज़ेशन से, आपकी साइट की Core Web Vitals में बदलाव हो सकते हैं. इसलिए, इनके बारे में जानना ज़रूरी है.
सबसे बड़ा कॉन्टेंटफ़ुल पेंट (एलसीपी)
फ़ॉन्ट और इमेज के मामले में, प्रीलोडिंग का सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) पर काफ़ी असर पड़ता है. ऐसा इसलिए, क्योंकि इमेज और टेक्स्ट नोड, दोनों एलसीपी कैंडिडेट हो सकते हैं. वेब फ़ॉन्ट का इस्तेमाल करके रेंडर की गई हीरो इमेज और बड़े टेक्स्ट को, प्रीलोड हिंट से काफ़ी फ़ायदा मिल सकता है. इनका इस्तेमाल तब किया जाना चाहिए, जब उपयोगकर्ता को इस तरह के ज़रूरी कॉन्टेंट को तेज़ी से डिलीवर करने के मौके हों.
हालांकि, प्रीलोडिंग और अन्य ऑप्टिमाइज़ेशन के मामले में आपको सावधान रहना होगा! खास तौर पर, बहुत सारे संसाधनों को प्रीलोड करने से बचें. अगर बहुत सारे संसाधनों को प्राथमिकता दी जाती है, तो उनमें से किसी को भी प्राथमिकता नहीं दी जाती है. ज़्यादा प्रीलोड हिंट का इस्तेमाल करने से, उन लोगों को ज़्यादा नुकसान होगा जो धीमी स्पीड वाले नेटवर्क का इस्तेमाल करते हैं. ऐसा इसलिए, क्योंकि बैंडविड्थ की समस्या ज़्यादा दिखेगी.
इसके बजाय, कुछ ऐसे अहम संसाधनों पर फ़ोकस करें जिन्हें प्रीलोड करने से फ़ायदा मिलेगा. फ़ॉन्ट को पहले से लोड करते समय, पक्का करें कि फ़ॉन्ट 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 का इस्तेमाल कम करें और असल दुनिया में इसके असर को मेज़र करें.