इस पेज का अनुवाद Cloud Translation API से किया गया है.

WebFont की लोडिंग और रेंडरिंग को ऑप्टिमाइज़ करें

Ilya Grigorik

"पूरा" वेबफ़ॉन्ट, जिसमें स्टाइल वाले सभी वैरिएंट शामिल होते हैं. हो सकता है कि आपको इनकी ज़रूरत न हो. साथ ही, इसमें ऐसे सभी ग्लिफ़ भी शामिल होते हैं जिनका इस्तेमाल नहीं किया जा सकता. इनकी वजह से, डाउनलोड का साइज़ आसानी से कई मेगाबाइट हो सकता है. इस पोस्ट में, आपको वेबफ़ॉन्ट लोड करने के तरीके को ऑप्टिमाइज़ करने का तरीका पता चलेगा, ताकि वेबसाइट पर आने वाले लोग सिर्फ़ वही फ़ॉन्ट डाउनलोड करें जिनका इस्तेमाल वे करेंगे.

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

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

डिफ़ॉल्ट सेटिंग

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

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

पेज के कॉन्टेंट के फ़र्स्ट पेंट और फ़ॉन्ट संसाधन के अनुरोध के बीच "रेस" की वजह से, "खाली टेक्स्ट की समस्या" पैदा होती है. फ़र्स्ट पेंट, रेंडर ट्री बनने के कुछ समय बाद किया जा सकता है.

वेबफ़ॉन्ट को पहले से लोड करके और font-display का इस्तेमाल करके, यह कंट्रोल किया जा सकता है कि ब्राउज़र, उपलब्ध न होने वाले फ़ॉन्ट के साथ कैसे काम करते हैं. इससे, फ़ॉन्ट लोड होने की वजह से खाली पेजों और लेआउट शिफ़्ट को रोका जा सकता है.

वेबफ़ॉन्ट के संसाधनों को पहले से लोड करना

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

टेक्स्ट रेंडर होने में लगने वाले समय को पसंद के मुताबिक बनाना

प्रीलोड करने से, पेज का कॉन्टेंट रेंडर होने पर वेबफ़ॉन्ट उपलब्ध होने की संभावना बढ़ जाती है. हालांकि, इससे यह गारंटी नहीं मिलती कि वेबफ़ॉन्ट उपलब्ध होगा ही. आपको अब भी यह ध्यान रखना होगा कि ब्राउज़र, ऐसे टेक्स्ट को रेंडर करते समय कैसा व्यवहार करते हैं जिसमें font-family का इस्तेमाल किया गया है, जो अब तक उपलब्ध नहीं है.

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

सोर्स

कुछ ब्राउज़र, फ़ॉन्ट के टाइम आउट के मौजूदा व्यवहार को लागू करते हैं. font-display भी फ़ॉन्ट डाउनलोड के लाइफ़टाइम को तीन मुख्य अवधियों में बांटता है:

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

इन अवधियों को समझने का मतलब है कि font-display का इस्तेमाल करके यह तय किया जा सकता है कि आपका फ़ॉन्ट कैसे रेंडर होना चाहिए. यह इस बात पर निर्भर करता है कि फ़ॉन्ट डाउनलोड किया गया है या नहीं और कब डाउनलोड किया गया है.

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

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  font-display: auto; /* or block, swap, fallback, optional */
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2'), /* will be preloaded */
       url('/fonts/awesome-l.woff') format('woff'),
       url('/fonts/awesome-l.ttf') format('truetype'),
       url('/fonts/awesome-l.eot') format('embedded-opentype');
  unicode-range: U+000-5FF; /* Latin glyphs */
}

फ़िलहाल, font-display में ये वैल्यू इस्तेमाल की जा सकती हैं:

auto
block
swap
fallback
optional

फ़ॉन्ट को पहले से लोड करने और font-display प्रॉपर्टी के बारे में ज़्यादा जानने के लिए, ये पोस्ट देखें:

फ़ॉन्ट लोडिंग एपीआई

<link rel="preload"> और सीएसएस font-display का एक साथ इस्तेमाल करने पर, आपको फ़ॉन्ट लोड करने और रेंडर करने पर काफ़ी कंट्रोल मिलता है. साथ ही, इससे आपके पेज का साइज़ भी नहीं बढ़ता. हालांकि, अगर आपको ज़्यादा कस्टमाइज़ेशन की ज़रूरत है और आप JavaScript को चलाने से जुड़ी समस्याओं को हल करने के लिए तैयार हैं, तो आपके पास एक और विकल्प है.

Font Loading API, सीएसएस फ़ॉन्ट फ़ेस को तय करने और उनमें बदलाव करने के लिए स्क्रिप्टिंग इंटरफ़ेस उपलब्ध कराता है. साथ ही, इससे फ़ॉन्ट के डाउनलोड होने की प्रोग्रेस को ट्रैक किया जा सकता है और उनके डिफ़ॉल्ट लेज़ी लोड व्यवहार को बदला जा सकता है. उदाहरण के लिए, अगर आपको लगता है कि किसी खास फ़ॉन्ट वैरिएंट की ज़रूरत है, तो उसे तय करें और ब्राउज़र को फ़ॉन्ट संसाधन को तुरंत फ़ेच करने के लिए कहें:

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

सोर्स

var font = new FontFace("Awesome Font", "url(/fonts/awesome.woff2)", {
  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});

// don't wait for the render tree, initiate an immediate fetch!
font.load().then(function() {
  // apply the font (which may re-render text and cause a page reflow)
  // after the font has finished downloading
  document.fonts.add(font);
  document.body.style.fontFamily = "Awesome Font, serif";

  // OR... by default the content is hidden,
  // and it's rendered after the font is available
  var content = document.getElementById("content");
  content.style.visibility = "visible";

  // OR... apply your own render strategy here...
});

इसके अलावा, check() के ज़रिए फ़ॉन्ट की स्थिति देखी जा सकती है और डाउनलोड की प्रोग्रेस को ट्रैक किया जा सकता है. इसलिए, अपने पेजों पर टेक्स्ट रेंडर करने के लिए, अपनी पसंद के मुताबिक रणनीति भी तय की जा सकती है:

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

सबसे अच्छी बात यह है कि पेज पर मौजूद अलग-अलग कॉन्टेंट के लिए, ऊपर बताई गई रणनीतियों को आपस में मिलाया जा सकता है. उदाहरण के लिए, फ़ॉन्ट उपलब्ध होने तक कुछ सेक्शन पर टेक्स्ट रेंडर करने में देरी की जा सकती है. इसके लिए, फ़ॉलबैक फ़ॉन्ट का इस्तेमाल करें. इसके बाद, फ़ॉन्ट डाउनलोड होने के बाद, टेक्स्ट को फिर से रेंडर करें.

सही तरीके से कैश मेमोरी में सेव करना ज़रूरी है

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

अगर आपका वेब ऐप्लिकेशन सर्विस वर्क का इस्तेमाल करता है, तो ज़्यादातर इस्तेमाल के उदाहरणों के लिए, कैश मेमोरी में पहले से सेव करने की रणनीति के साथ फ़ॉन्ट रिसॉर्स दिखाना सही होता है.

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

वेब फ़ॉन्ट लोड करने से जुड़ी चेकलिस्ट

<link rel="preload">, font-display या फ़ॉन्ट लोड करने वाले एपीआई का इस्तेमाल करके, फ़ॉन्ट लोड करने और रेंडर करने की सुविधा को पसंद के मुताबिक बनाएं: डिफ़ॉल्ट रूप से, धीरे-धीरे लोड होने की सुविधा की वजह से, टेक्स्ट रेंडर होने में देरी हो सकती है. वेब प्लैटफ़ॉर्म की इन सुविधाओं की मदद से, खास फ़ॉन्ट के लिए इस व्यवहार को बदला जा सकता है. साथ ही, पेज पर मौजूद अलग-अलग कॉन्टेंट के लिए, रेंडरिंग और टाइम आउट की कस्टम रणनीतियां तय की जा सकती हैं.
फिर से पुष्टि करने और कैश मेमोरी में सेव करने से जुड़ी सबसे सही नीतियां तय करें: फ़ॉन्ट स्टैटिक संसाधन होते हैं, जिन्हें अक्सर अपडेट नहीं किया जाता. पक्का करें कि आपके सर्वर, लंबे समय तक चलने वाला 'ज़्यादा से ज़्यादा समय' टाइमस्टैंप और फिर से पुष्टि करने वाला टोकन उपलब्ध कराते हों. इससे अलग-अलग पेजों पर फ़ॉन्ट का बेहतर तरीके से फिर से इस्तेमाल किया जा सकता है. अगर सेवा वर्कर्स का इस्तेमाल किया जा रहा है, तो कैश मेमोरी में डेटा सेव करने की रणनीति का इस्तेमाल करना सही रहेगा.

लाइटहाउस की मदद से, वेबफ़ॉन्ट लोड होने के व्यवहार की ऑटोमेटेड टेस्टिंग

Lighthouse की मदद से, यह पक्का करने की प्रोसेस को ऑटोमेट किया जा सकता है कि वेब फ़ॉन्ट ऑप्टिमाइज़ेशन के सबसे सही तरीकों का पालन किया जा रहा है या नहीं.

यहां दिए गए ऑडिट की मदद से, यह पक्का किया जा सकता है कि आपके पेज समय के साथ, वेब फ़ॉन्ट ऑप्टिमाइज़ेशन के सबसे सही तरीकों का पालन कर रहे हैं: