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