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

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

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 तय करें.

संसाधन