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