वैकल्पिक फ़ॉन्ट पहले से लोड करके, लेआउट शिफ़्ट होने और न दिखने वाले टेक्स्ट (एफ़ओआईटी) के फ़्लैश से बचें

Chrome 83 से, link rel="preload" और font-display: लेआउट जैंक को पूरी तरह हटाने के लिए, वैकल्पिक को जोड़ा जा सकता है

Houssein Djirdeh

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

रेंडरिंग साइकल को ऑप्टिमाइज़ करके, Chrome 83 वैकल्पिक फ़ॉन्ट को पहले से लोड करते समय लेआउट शिफ़्टिंग को रोक देता है. कस्टम फ़ॉन्ट को रेंडर करते समय, <link rel="preload"> को font-display: optional के साथ जोड़ना, लेआउट जैंक नहीं होने की गारंटी देने का सबसे असरदार तरीका है.

वेबसाइट का अलग-अलग ब्राउज़र पर चलना

क्रॉस-ब्राउज़र के लिए अप-टू-डेट सहायता जानकारी के लिए, एमडीएन का डेटा देखें:

• <link rel="preload">
• font-display

फ़ॉन्ट रेंडरिंग

लेआउट शिफ़्टिंग या री-लेआउट तब होता है, जब किसी वेब पेज पर मौजूद संसाधन डाइनैमिक तौर पर बदलता है. इस वजह से, कॉन्टेंट में "बदलाव" होता है. वेब फ़ॉन्ट को फ़ेच और रेंडर करने की वजह से, इन दो में से किसी एक तरीके से लेआउट शिफ़्ट हो सकता है:

• फ़ॉलबैक फ़ॉन्ट को नए फ़ॉन्ट से बदल दिया गया है ("बिना स्टाइल वाले टेक्स्ट का फ़्लैश")
• "न दिखने वाला" टेक्स्ट तब तक दिखता है, जब तक पेज पर नया फ़ॉन्ट रेंडर नहीं होता ("न दिखने वाले टेक्स्ट का फ़्लैश")

सीएसएस font-display प्रॉपर्टी से, इस्तेमाल की जा सकने वाली अलग-अलग वैल्यू (auto, block,swap, fallback, और optional) की मदद से, कस्टम फ़ॉन्ट को रेंडर करने के तरीके में बदलाव किया जा सकता है. एसिंक्रोनस रूप से लोड किए गए फ़ॉन्ट के लिए, इस्तेमाल किए जाने वाले पसंदीदा तरीके पर निर्भर करता है. हालांकि, काम करने वाली इन सभी वैल्यू में से हर एक वैल्यू, ऊपर दिए गए दो तरीकों में से किसी एक में, अब तक री-लेआउट को ट्रिगर कर सकती है!

ध्यान दें: कुल लेआउट शिफ़्ट की मेट्रिक की मदद से, किसी वेब पेज के लेआउट में होने वाले बदलाव को मापा जा सकता है.

वैकल्पिक फ़ॉन्ट

font-display प्रॉपर्टी, उन फ़ॉन्ट को मैनेज करने के लिए तीन पीरियड की टाइमलाइन का इस्तेमाल करती है जिन्हें रेंडर करने से पहले डाउनलोड करना ज़रूरी होता है:

• ब्लॉक करें: "न दिखने वाला" टेक्स्ट रेंडर करें. हालांकि, लोड होते ही वेब फ़ॉन्ट पर स्विच करें.
• बदलें: फ़ॉलबैक सिस्टम फ़ॉन्ट का इस्तेमाल करके टेक्स्ट रेंडर करें. हालांकि, लोड होने के पूरा होते ही वेब फ़ॉन्ट पर स्विच करें.
• फ़ेल: फ़ॉलबैक सिस्टम फ़ॉन्ट का इस्तेमाल करके टेक्स्ट रेंडर करें.

इससे पहले, font-display: optional के लिए बनाए गए फ़ॉन्ट में 100 मि॰से॰ की ब्लॉक पीरियड होती थी और बदलने की अवधि नहीं होती थी. इसका मतलब है कि फ़ॉलबैक फ़ॉन्ट पर स्विच करने से पहले, "न दिखने वाला" टेक्स्ट बहुत कम समय के लिए दिखता है. अगर 100 मि॰से॰ के अंदर फ़ॉन्ट डाउनलोड नहीं किया जाता है, तो फ़ॉलबैक फ़ॉन्ट का इस्तेमाल किया जाता है और कोई बदलाव नहीं किया जाता है.

100 मि॰से॰ की ब्लॉक अवधि के बाद में फ़ॉन्ट डाउनलोड करने पर, Chrome में font-display: optional का पिछला तरीका

हालांकि, अगर फ़ॉन्ट को 100 मि॰से॰ की ब्लॉक अवधि पूरी होने से पहले डाउनलोड किया जाता है, तो कस्टम फ़ॉन्ट रेंडर हो जाता है और पेज पर उसका इस्तेमाल किया जाता है.

100 मि॰से॰ की अवधि से पहले फ़ॉन्ट डाउनलोड करने पर, Chrome में font-display: optional का पिछला व्यवहार

Chrome दोनों मामलों में, पेज को दो बार फिर से रेंडर करता है. भले ही, फ़ॉलबैक फ़ॉन्ट का इस्तेमाल किया गया हो या कस्टम फ़ॉन्ट समय पर लोड होना बंद हो. इसकी वजह से, न दिखने वाले टेक्स्ट में थोड़ी झिलमिलाहट होती है. साथ ही, नया फ़ॉन्ट रेंडर होने पर, लेआउट जैंक पेज के कुछ कॉन्टेंट को एक जगह से दूसरी जगह ले जाता है. ऐसा तब भी होता है, जब फ़ॉन्ट ब्राउज़र की डिस्क कैश में सेव हो और ब्लॉक की अवधि पूरी होने से पहले ही अच्छी तरह लोड हो सके.

<link rel="preload'> के साथ पहले से लोड किए गए वैकल्पिक फ़ॉन्ट के लिए, पहले रेंडर साइकल को पूरी तरह से हटाने के लिए, Chrome 83 में ऑप्टिमाइज़ेशन की सुविधा शुरू हो गई है. इसके बजाय, जब तक कस्टम फ़ॉन्ट लोड नहीं हो जाता या कोई तय समयसीमा नहीं बीत जाती, तब तक रेंडरिंग को ब्लॉक किया जाता है. फ़िलहाल, यह टाइम आउट पीरियड 100 मि॰से॰ पर सेट है. हालांकि, परफ़ॉर्मेंस को ऑप्टिमाइज़ करने के लिए, आने वाले समय में यह अवधि बदल सकती है.

100 मि॰से॰ के ब्लॉक पीरियड (न दिखने वाले टेक्स्ट का फ़्लैश नहीं) के बाद डाउनलोड होने पर, Chrome में font-display: optional की नई सुविधा

100 मि॰से॰ के ब्लॉक होने से पहले, फ़ॉन्ट डाउनलोड होने पर, Chrome में नई font-display: optional सुविधा (न दिखने वाला टेक्स्ट न दिखने की समस्या नहीं)

Chrome में वैकल्पिक फ़ॉन्ट पहले से लोड करने से, लेआउट जैंक और बिना स्टाइल वाले टेक्स्ट के फ़्लैश की संभावना हटा दी जाती है. यह सीएसएस फ़ॉन्ट मॉड्यूल लेवल 4 में बताए गए तरीके से मैच करता है. इसमें वैकल्पिक फ़ॉन्ट की वजह से कभी भी लेआउट नहीं बदला जा सकता. साथ ही, उपयोगकर्ता एजेंट, सही अवधि के लिए रेंडर करने में देरी कर सकते हैं.

हालांकि, किसी वैकल्पिक फ़ॉन्ट को पहले से लोड करना ज़रूरी नहीं है, लेकिन यह पहले रेंडर साइकल से पहले, उसके लोड होने की संभावना को काफ़ी बेहतर बना देता है, खास तौर पर तब, जब उसे ब्राउज़र के कैश में सेव न किया गया हो.

नतीजा

Chrome टीम आपकी जानना चाहती है कि इन नए ऑप्टिमाइज़ेशन के साथ, वैकल्पिक फ़ॉन्ट पहले से लोड किए जाते हैं या नहीं! अगर आपको कोई समस्या आती है या आपको किसी सुविधा का सुझाव देना है, तो शिकायत करें.