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

Chrome 83 से, link rel="preload" और font-display: optional को एक साथ इस्तेमाल करके, लेआउट जैंक को पूरी तरह से हटाया जा सकता है

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 मिलीसेकंड में डाउनलोड नहीं होता है, तो फ़ॉलबैक फ़ॉन्ट का इस्तेमाल किया जाता है और कोई स्वैपिंग नहीं होती है.

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

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

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

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

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

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

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

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

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

नतीजा

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