फ़ॉन्ट अक्सर बड़ी फ़ाइलें होती हैं, जो लोड होने में ज़्यादा समय लेती हैं. कुछ ब्राउज़र, फ़ॉन्ट लोड होने तक टेक्स्ट को छिपा देते हैं, जिससे नहीं दिखने वाले टेक्स्ट (एफ़ओआईटी) का फ़्लैश चालू हो.
Lighthouse का फ़ॉन्ट-डिसप्ले ऑडिट कैसे पूरा नहीं हो पाता
Lighthouse ऐसे सभी फ़ॉन्ट यूआरएल को फ़्लैग करता है जिनसे अदृश्य टेक्स्ट फ़्लैश हो सकता है:
न दिखने वाले टेक्स्ट को दिखाने से रोकने का तरीका
font-display
एपीआई से पता चलता है कि font-face
स्टाइल में इस्तेमाल करने पर, फ़ॉन्ट कैसा दिखता है. अगर कस्टम फ़ॉन्ट तैयार नहीं है, तो नीचे दी गई font-display
वैल्यू, ब्राउज़र को सिस्टम फ़ॉन्ट इस्तेमाल करने के लिए कहेंगी:
swap
optional
fallback
सीएसएस का उदाहरण
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'),
url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
format('woff2');
font-display: swap;
}
Google Fonts का उदाहरण
अपने Google फ़ॉन्ट के यूआरएल के आखिर में, &display=swap
/&display=optional
/&display=fallback
पैरामीटर जोड़ें:
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
/>
स्थगित फ़ॉन्ट की वजह से लेआउट शिफ़्ट होने से कैसे बचें
कुछ समय के लिए सिस्टम फ़ॉन्ट दिखाने पर, फ़ॉन्ट के बिना स्टाइल वाले टेक्स्ट (FOUT) के फ़्लैश से फ़ॉन्ट के बिना स्टाइल वाले टेक्स्ट (FOIT) की जगह ले लेगा. इससे कॉन्टेंट जल्दी रेंडर होता है और FCP और LCP बेहतर होता है. हालांकि, जब कस्टम फ़ॉन्ट, अस्थायी सिस्टम फ़ॉन्ट की जगह लेता है, तो FOIT और FOUT, दोनों का सीएलएस पर एक जैसा असर पड़ेगा.
फ़ॉन्ट लोड होने के सीएलएस के असर को font-display: optional
के साथ पहले से लोड करने की सुविधा का इस्तेमाल करके कम किया जा सकता है.
हालांकि, प्रीलोड का ज़रूरत से ज़्यादा इस्तेमाल करने से, लोड मेट्रिक पर बुरा असर पड़ सकता है. हमारा सुझाव है कि आप A/B टेस्टिंग करें, ताकि यह पक्का किया जा सके कि फ़ॉन्ट को पहले से लोड करने से, परफ़ॉर्मेंस में कोई गिरावट न आए.
स्टैक के लिए सलाह
Drupal
अपनी थीम में पसंद के मुताबिक फ़ॉन्ट की जानकारी देने के दौरान, @font-display
के बारे में बताएं.
Magento
पसंद के मुताबिक फ़ॉन्ट बनाते समय, @font-display
तय करें.
संसाधन
- वेबफ़ॉन्ट लोड होने के दौरान टेक्स्ट दिखता रहे ऑडिट के लिए सोर्स कोड
- लोड होने के दौरान, टेक्स्ट को न दिखने से रोकना
- फ़ॉन्ट डिसप्ले की मदद से फ़ॉन्ट की परफ़ॉर्मेंस को कंट्रोल करना
- लोड होने की स्पीड को बेहतर बनाने के लिए, वेब फ़ॉन्ट को पहले से लोड करना (कोडलैब)
- वैकल्पिक फ़ॉन्ट को पहले से लोड करके, लेआउट शिफ़्ट होने और न दिखने वाले टेक्स्ट (एफ़ओआईटी) के फ़्लैश होने से रोकें