पक्का करें कि वेबफ़ॉन्ट लोड होने के दौरान टेक्स्ट दिखता रहे

फ़ॉन्ट अक्सर बड़ी फ़ाइलें होती हैं और इन्हें लोड होने में ज़्यादा समय लगता है. कुछ ब्राउज़र, फ़ॉन्ट लोड होने तक टेक्स्ट को छिपा देते हैं. इससे अदृश्य टेक्स्ट का फ़्लैश (एफ़ओआईटी) दिखता है.

Lighthouse में फ़ॉन्ट-डिस्प्ले ऑडिट कैसे पूरा नहीं होता

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 Fonts के यूआरएल के आखिर में &display=swap/&display=optional/&display=fallback पैरामीटर जोड़ें:

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

फ़ॉन्ट लोड होने में देरी की वजह से होने वाले लेआउट शिफ़्ट से बचने का तरीका

सिस्टम फ़ॉन्ट को कुछ समय के लिए दिखाने से, एफओआईटी की जगह बिना स्टाइल वाला टेक्स्ट (एफ़ओयूटी) दिखने लगेगा. इससे कॉन्टेंट को जल्द रेंडर करके, FCP और LCP को बेहतर बनाया जा सकता है. हालांकि, जब कस्टम फ़ॉन्ट, सिस्टम के अस्थायी फ़ॉन्ट की जगह लेता है, तब FOIT और FOUT, दोनों का असर CLS पर एक जैसा होता है.

फ़ॉन्ट लोड होने की वजह से होने वाले सीएलएस के असर को कम करने के लिए, प्रीलोड के साथ-साथ font-display: optional का इस्तेमाल किया जा सकता है. हालांकि, प्रीलोडिंग का ज़्यादा इस्तेमाल करने से, लोड होने की मेट्रिक पर बुरा असर पड़ सकता है. हमारा सुझाव है कि A/B टेस्टिंग करें. इससे यह पक्का किया जा सकेगा कि फ़ॉन्ट को प्रीलोड करने से, परफ़ॉर्मेंस में कोई गिरावट नहीं आई है.

स्टैक के हिसाब से सलाह

Drupal

अपनी थीम में पसंद के मुताबिक फ़ॉन्ट की जानकारी देते समय, @font-display के बारे में बताएं.

Magento

पसंद के मुताबिक फ़ॉन्ट बनाते समय, @font-display तय करें.

संसाधन