फ़ॉन्ट अक्सर बड़ी फ़ाइलें होती हैं और इन्हें लोड होने में ज़्यादा समय लगता है. कुछ ब्राउज़र, फ़ॉन्ट के लोड होने तक टेक्स्ट छिपाते हैं. इसकी वजह से, न दिखने वाले टेक्स्ट (एफ़ओआईटी) का फ़्लैश होता है.
लाइटहाउस फ़ॉन्ट-डिसप्ले ऑडिट कैसे काम नहीं करता है
Lighthouse ऐसे फ़ॉन्ट यूआरएल को फ़्लैग करता है जो नहीं दिखने वाले टेक्स्ट को फ़्लैश कर सकता है:
नहीं दिखने वाला टेक्स्ट दिखने से कैसे बचें
font-display
API से पता चलता है कि 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 फ़ॉन्ट का उदाहरण
अपने Google Fonts यूआरएल के आखिर में &display=swap
/&display=optional
/&display=fallback
पैरामीटर जोड़ें:
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
/>
रुके हुए फ़ॉन्ट की वजह से होने वाले लेआउट शिफ़्ट से बचने का तरीका
कुछ समय के लिए सिस्टम फ़ॉन्ट दिखाने से, कोई FOIT, बिना स्टाइल वाले टेक्स्ट के फ़्लैश (FOUT) से बदल जाएगा. यह कॉन्टेंट को जल्दी रेंडर करके, FCP&LCP को बेहतर बनाता है. हालांकि, जब कस्टम फ़ॉन्ट, अस्थायी सिस्टम फ़ॉन्ट की जगह लेता ���ै, तब FOIT और FOUT, दोनों का सीएलएस पर एक जैसा ही असर पड़ेगा.
font-display: optional
के साथ पहले से लोड करने की सुविधा का इस्तेमाल करके, फ़ॉन्ट लोड होने के सीएलएस असर को कम किया जा सकता है.
हालांकि, पहले से लोड किए गए डेटा का ज़्यादा इस्तेमाल करने से, लोड होने वाली मेट्रिक पर बुरा असर पड़ सकता है. हम A/B टेस्टिंग करने का सुझाव देते हैं, ताकि यह पक्का किया जा सके कि फ़ॉन्ट को पहले से लोड करने से कोई परफ़ॉर्मेंस रिग्रेशन नहीं होता.
स्टैक के लिए खास सलाह
Drupal
अपनी थीम में पसंद के मुताबिक फ़ॉन्ट तय करते समय, @font-display
के बारे में बताएं.
Magento
पसंद के मुताबिक फ़ॉन्ट तय करते समय @font-display
तय करें.
रिसॉर्स
- पक्का करें कि वेबफ़ॉन्ट लोड होने के दौरान टेक्स्ट दिखता रहे ऑडिट के लिए सोर्स कोड
- लोड करते समय दिखने वाले टेक्स्ट से बचना
- फ़ॉन्ट डिसप्ले की मदद से फ़ॉन्ट की परफ़ॉर्मेंस को कंट्रोल करना
- लोड होने की स्पीड (कोडलैब) को बेहतर बनाने के लिए, वेब फ़ॉन्ट को पहले से लोड करने के बारे में जानकारी
- वैकल्पिक फ़ॉन्ट को पहले से लोड करके, लेआउट शिफ़्ट होने और न दिखने वाले टेक्स्ट (एफ़ओआईटी) के फ़्लैश को रोकें