आपको इसके बारे में क्यों सोचना चाहिए?
फ़ॉन्ट अक्सर बड़ी फ़ाइलें होती हैं, जिन्हें लोड होने में समय लगता है. इसकी समस्या को हल करने के लिए, कुछ ब्राउज़र टेक्स्ट को तब तक छिपाते हैं, जब तक कि फ़ॉन्ट लोड नहीं हो जाता ("न दिखने वाला टेक्स्ट का फ़्लैश").
सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) को, टेक्स्ट के रेंडर होने में थोड़ा समय लग सकता है. अगर आपको परफ़ॉर्मेंस के लिए ऑप्टिमाइज़ करना है, तो आपको "न दिखने वाले टेक्स्ट के फ़्लैश" (एफ़ओआईटी) से बचना होगा. साथ ही, सिस्टम फ़ॉन्ट का इस्तेमाल करके, उपयोगकर्ताओं को तुरंत कॉन्टेंट दिखाना होगा. इससे "बिना स्टाइल वाले टेक्स्ट का फ़्लैश" (FOUT) होगा.
फ़ॉन्ट दिखाने के लिए ब्राउज़र की डिफ़ॉल्ट सेटिंग
ये सामान्य ब्राउज़र के लिए, फ़ॉन्ट लोड करने के डिफ़ॉल्ट व्यवहार हैं:
| ब्राउज़र | फ़ॉन्ट तैयार न होने पर, डिफ़ॉल्ट तरीका... |
|---|---|
| Chrome और Edge | टेक्स्ट को 3 सेकंड तक छिपाएं. अगर टेक्स्ट अब भी तैयार नहीं है, तो फ़ॉन्ट तैयार होने तक, सिस्टम फ़ॉन्ट का इस्तेमाल किया जाता है. इसके बाद, फ़ॉन्ट को बदल दिया जाता है. |
| Firefox | टेक्स्ट को 3 सेकंड तक छिपाएं. अगर टेक्स्ट अब भी तैयार नहीं है, तो फ़ॉन्ट तैयार होने तक, सिस्टम फ़ॉन्ट का इस्तेमाल किया जाता है. इसके बाद, फ़ॉन्ट को बदल दिया जाता है. |
| Safari | फ़ॉन्ट तैयार होने तक टेक्स्ट को छिपाता है. |
टेक्स्ट तुरंत दिखाएं
इस गाइड में टेक्स्ट को जल्द से जल्द दिखाने के दो तरीके बताए गए हैं: पहला तरीका आसान है और यह अच्छा ब्राउज़र सपोर्ट देता है. दूसरे तरीके में गहराई से की गई है, लेकिन इसमें आपको ज़्यादा विकल्प मिल सकते हैं. आपकी वेबसाइट के लिए सबसे अच्छा विकल्प, आपकी ज़रूरतों पर निर्भर करता है.
पहला विकल्प: font-display का इस्तेमाल करें
font-display एक एपीआई है, जो फ़ॉन्ट को दिखाने की रणनीति के बारे में बताता है. swap ब्राउज़र को बताता है कि इस फ़ॉन्ट का इस्तेमाल करने वाले टेक्स्ट को, सिस्टम फ़ॉन्ट का इस्तेमाल करके तुरंत दिखाया जाना चाहिए. कस्टम फ़ॉन्ट तैयार हो जाने के बाद, सिस्टम फ़ॉन्ट को बदल दिया जाता है.
/* Before */
@font-face {
font-family: Helvetica;
}
/* After */
@font-face {
font-family: Helvetica;
font-display: swap;
}
अगर किसी ब्राउज़र में font-display काम नहीं करता, लेकिन यह सभी मॉडर्न ब्राउज़र पर काम नहीं करता, तो फ़ॉन्ट लोड करने के लिए, ब्राउज़र अपने डिफ़ॉल्ट तरीके का इस्तेमाल करता रहेगा.
विकल्प #2: कस्टम फ़ॉन्ट के लोड होने तक इंतज़ार करें
थोड़ी और मेहनत करके, ज़्यादा कस्टम तरीका अपनाया जा सकता है.
इस तरीके के तीन हिस्से हैं:
- शुरुआत में पेज लोड होने पर, पसंद के मुताबिक बनाए गए फ़ॉन्ट का इस्तेमाल न करें. इसके लिए, अपनी सीएसएस की रीफ़ैक्टर करें, ताकि शुरुआत में कस्टम फ़ॉन्ट इस्तेमाल न किए जा सकें. इससे यह पक्का होता है कि ब्राउज़र, सिस्टम फ़ॉन्ट का इस्तेमाल करके तुरंत टेक्स्ट दिखाता है.
- CSS फ़ॉन्ट लोडिंग एपीआई का इस्तेमाल करके, पता लगाएं कि आपका कस्टम फ़ॉन्ट कब लोड होता है
- कस्टम फ़ॉन्ट इस्तेमाल करने के लिए, पेज की स्टाइल अपडेट करें.
// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");
// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);
// Load the font
font.load();
// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
// Update the CSS to use the fonts
});
यह काम FontFaceObserver लाइब्रेरी की मदद से भी किया जा सकता है. कुछ लोग ऐसे एपीआई इस्तेमाल कर पाते हैं जो आसान होते हैं.
इससे फ़ॉन्ट लोड करते समय और भी कई चीज़ें ध्यान में रखी जा सकती हैं. उदाहरण के लिए, सभी फ़ॉन्ट एक साथ लोड किए जा सकते हैं और हर फ़ॉन्ट लोड होने पर कई लेआउट की ज़रूरत नहीं पड़ती. इसके अलावा, साइटें उन उपयोगकर्ताओं के लिए फ़ॉन्ट लोड नहीं करना चुन सकती हैं जो धीमे कनेक्शन का इस्तेमाल करते हैं या जो डेटा सेव करने का विकल्प इस्तेमाल कर रहे हैं.
पुष्टि करें
लाइटहाउस चलाएं और पुष्टि करें कि साइट, टेक्स्ट दिखाने के लिए font-display: swap का इस्तेमाल कर रही है:
- DevTools खोलने के लिए, Control+Shift+J या Mac पर Command+Option+J दबाएं.
- लाइटहाउस टैब पर क्लिक करें.
- पक्का करें कि कैटगरी सूची में परफ़ॉर्मेंस चेकबॉक्स को चुना गया हो.
- रिपोर्ट जनरेट करें बटन पर क्लिक करें.
पुष्टि करें कि पक्का करें कि वेबफ़ॉन्ट लोड होने के दौरान टेक्स्ट दिखता रहे ऑडिट पास हो रहा है.