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

Ilya Grigorik

एक "पूरा" WebFont, जिसमें स्टाइल के वे सभी वैरिएंट शामिल हैं जिनकी आपको ज़रूरत नहीं है और सभी ग्लिफ़, जो शायद इस्तेमाल न हुए हों, एक से ज़्यादा मेगाबाइट के वर्शन डाउनलोड कर सकता है. इस पोस्ट में, WebFonts की लोडिंग को ऑप्टिमाइज़ करने का तरीका बताया गया है, ताकि वेबसाइट पर आने वाले लोग सिर्फ़ वही डेटा डाउनलोड करें जिसे वे इस्तेमाल करेंगे.

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

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

डिफ़ॉल्ट तरीका

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

फ़ॉन्ट क्रिटिकल रेंडरिंग पाथ

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

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

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

अपने WebFont संसाधनों को पहले से लोड करें

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

टेक्स्ट रेंडरिंग में देरी को पसंद के मुताबिक बनाना

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

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

ब्राउज़र सहायता

  • 60
  • 79
  • 58
  • 11.1

सोर्स

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

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

इन पीरियड को समझने का मतलब है कि 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 चलाकर अतिरिक्त खर्च करने को तैयार हैं, तो इसके लिए दूसरा विकल्प भी है.

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

ब्राउज़र सहायता

  • 35
  • 79
  • 41
  • 10

सोर्स

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() से फ़ॉन्ट का स्टेटस देखा जा सकता है और डाउनलोड की प्रोग्रेस को ट्रैक किया जा सकता है. इसलिए, अपने पेजों पर टेक्स्ट रेंडर करने के लिए, पसंद के मुताबिक रणनीति भी बनाई जा सकती है:

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

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

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

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

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

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

WebFont लोड होने की चेकलिस्ट

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

Lighthouse की मदद से, WebFont की लोडिंग के व्यवहार के लिए अपने-आप होने वाली जांच

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

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