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

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

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

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

रिसॉर्स