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

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

Houssein Djirdeh

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

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

अलग-अलग ब्राउज़र पर काम करने की सुविधा से जुड़ी अप-टू-डेट जानकारी के लिए, MDN का डेटा देखें:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

नतीजा

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