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