इस कोडलैब में, rel="preload" का इस्तेमाल करके वेब फ़ॉन्ट को प्रीलोड करने का तरीका बताया गया है. इससे, स्टाइल न किए गए टेक्स्ट (FOUT) का फ़्लैश हट जाता है.
मापें
कोई भी ऑप्टिमाइज़ेशन जोड़ने से पहले, यह मेज़र करें कि वेबसाइट की परफ़ॉर्मेंस कैसी है.
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं. - DevTools खोलने के लिए, `Control+Shift+J` दबाएं. Mac पर, `Command+Option+J` दबाएं.
- Lighthouse टैब पर क्लिक करें.
- पक्का करें कि कैटगरी सूची में, परफ़ॉर्मेंस चेकबॉक्स चुना गया हो.
- रिपोर्ट जनरेट करें बटन पर क्लिक करें.
जनरेट की गई लाइटहाउस रिपोर्ट में, आपको क्रिटिकल पाथ की ज़्यादा से ज़्यादा देरी में संसाधनों को फ़ेच करने का क्रम दिखेगा.
ऊपर दिए गए ऑडिट में, वेब फ़ॉन्ट ज़रूरी अनुरोध श्रृंखला का हिस्सा हैं और सबसे आखिर में फ़ेच किए जाते हैं. अहम अनुरोध चेन, उन संसाधनों के क्रम को दिखाती है जिन्हें ब्राउज़र प्राथमिकता देता है और फ़ेच करता है. इस ऐप्लिकेशन में, वेब फ़ॉन्ट (Pacfico और Pacifico-Bold) को @font-face नियम का इस्तेमाल करके तय किया गया है. साथ ही, ये क्रिटिकल अनुरोध श्रृंखला में ब्राउज़र से फ़ेच किए गए आखिरी संसाधन हैं. आम तौर पर, वेबफ़ॉन्ट को लेज़ी लोड किया जाता है. इसका मतलब है कि वे तब तक लोड नहीं होते, जब तक ज़रूरी रिसॉर्स (सीएसएस, JS) डाउनलोड नहीं हो जाते.
ऐप्लिकेशन में फ़ेच किए गए संसाधनों का क्रम यहां दिया गया है:
वेब फ़ॉन्ट पहले से लोड करना
फ़ॉन्ट लोड होने में लगने वाले समय से बचने के लिए, वे वेब फ़ॉन्ट पहले से लोड किए जा सकते हैं जिनकी तुरंत ज़रूरत होती है. दस्तावेज़ के सबसे ऊपर, इस ऐप्लिकेशन के लिए Link एलिमेंट जोड़ें:
<head>
<!-- ... -->
<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>
as="font" type="font/woff2" एट्रिब्यूट, ब्राउज़र को इस रिसॉर्स को फ़ॉन्ट के तौर पर डाउनलोड करने के लिए कहते हैं. साथ ही, रिसॉर्स की सूची में प्राथमिकता तय करने में मदद करते हैं.
crossorigin एट्रिब्यूट से पता चलता है कि रिसॉर्स को सीओआरएस अनुरोध के साथ फ़ेच किया जाना चाहिए या नहीं, क्योंकि फ़ॉन्ट किसी दूसरे डोमेन से आ सकता है. इस एट्रिब्यूट के बिना, ब्राउज़र पहले से लोड किए गए फ़ॉन्ट को अनदेखा कर देता है.
Pacifico-Bold का इस्तेमाल पेज हेडर में किया जाता है. इसलिए, हमने इसे जल्दी फ़ेच करने के लिए, प्रीलोड टैग जोड़ा है. Pacifico.woff2 फ़ॉन्ट को पहले से लोड करने की ज़रूरत नहीं है, क्योंकि यह फ़ोल्ड के नीचे मौजूद टेक्स्ट को स्टाइल करता है.
ऐप्लिकेशन को फिर से लोड करें और Lighthouse को फिर से चलाएं. क्रिटिकल पाथ में लगने वाला ज़्यादा से ज़्यादा समय सेक्शन देखें.
देखें कि Pacifico-Bold.woff2 को गंभीर अनुरोध की चेन से कैसे हटाया गया है. इसे ऐप्लिकेशन में पहले ही फ़ेच कर लिया जाता है.
प्रीलोड की सुविधा की मदद से, ब्राउज़र को पता चल जाता है कि उसे यह फ़ाइल पहले डाउनलोड करनी है. ध्यान रखें कि अगर प्रीलोड का इस्तेमाल सही तरीके से नहीं किया जाता है, तो यह परफ़ॉर्मेंस पर असर डाल सकता है. ऐसा इसलिए, क्योंकि प्रीलोड ऐसे संसाधनों के लिए अनुरोध करता है जिनका इस्तेमाल नहीं किया जाता.